My Emerging CSS System

I’ve been thinking about javascript, sass, css, and the DRY (Don’t Repeat Yourself) principle a bit too much today. It’s partly due to working on a new code base, which makes it easy to point out what I would do differently, but also makes me re-examine my own code, or standards that are out there these days.

Ahhh, you’re repeating yourself!

One thing that I see that’s prettty standard these days, is code where classes are done like this:
 

<a href="#" class="btn btn-primary">Button Text</a>

I think, after looking at this and thinking about this, that this is pretty stupid. This certainly doesn’t adhere to the DRY principle. Why not just:
 

<a href="#" class="btn-primary">Button Text</a>

The above is certainly possible, and is pretty easy to do with SASS. It may make for larger css files, since the declarations that were in the .btn class will now be copied to the .btn-primary class, but honestly, I’m not sure that I care too much about that. There are also file size savings by not having to add the .btn class to every button throughout the site.

 

Loading up those classes

I think a large part of my growing unease over that first example, is that I’ve started seeing stuff like (this example is from bootstrap’s documentation):
 

<div class="progress-bar progress-bar-info progress-bar-striped"></div>

Again, this obviously doesn’t adhere to not repeating myself, but loading up our html with various css classes has become increasingly common. It seems like I’ve seen situations where perhaps the person just should have written in some inline style rules, since they are basically reinventing styles with classes.

I honestly don’t know if loading up an element with a numerous classes bugs me or not. Part of me remembers a time when we aimed for the “separation of concerns”, where our html code would stay free of styling elements. I like the simplicity of that and that oh-so clean html, but my lazy side does like the ability to just slap in classes in the same place as the element, so I don’t have to hunt around for wherever that element has been styled at.

Of course hunting around for an element in a stylesheet doesn’t have to be an issue either. I think for a lot of people who have one directory to house all of their css files, it could be an issue, but some time ago I started creating small stylesheets that live right next to the file that they relate to. For example, if I have a contact.php file, within that same directory, I have a contact.scss (which compiles to contact.css). This gets incorporated into the main style file, but it makes it super easy to find any styles that are specific to the contact page.

 

Another issue with loading up classes within an element 

Another issue that arises with loading up clases on an element is if I use that element elsewhere, I’m stuck with that format everywhere.  For instance, if I have a form that I that I apply the class of ‘submit-buttons-right’ to (which aligns the ‘submit’ button to the right, say in a popup window) and I later want to use that same form code elsewhere, but want to have my submit button on the left (yeah yeah, maybe a bad example, since for usability sake we probably want that submit button placement consistent…), it becomes hard to do.  

Using IDs for styling

It’s pretty common currently for people to suggest that elements shouldn’t be styled based on their id, but instead be styled based on class so those classes can be used throughout the website. Sounds good, but with this approach, we seem to be loading up our html elements with a whole slew of classes as illustrated above. I think SASS could provide a good way of combining reusable elements without loading up our html with extra css classes.  I guess it could be the best of both worlds.

I think if the element only requires a single class, something like ‘btn-primary’, then go ahead and just use a class, but if you need more than two classes to add styles to that element, maybe just use an id, and use a SASS extend to build the properties for your element (and for those who state that you should only be using classes to style elements, I don’t see any reason why you couldn’t use this same philosophy to create a class for the element instead of the id).
 

So instead of something like: 

<div class="progress-bar progress-bar-info progress-bar-striped"></div>

You would have something like:

<div id="upload-progress"></div>

And in SASS, you would have:

#upload-progress{
  @extend .progress-bar;
  @extend .progress-bar-info;
  @extend .progress-bar-striped;
}

I like that by using an id, we’re actually naming what that element does (although it does require with having to come up with a name for that element, which sometimes isn’t as easy as one would think), and moving the long list of display styles to the stylesheet, which in the old way of thinking, is where we declare how things should look.  

Taking this further, I’d probably explore ways to remove that repeated ‘.progress-bar’ which was my first issue pointed out above where that piece of text gets repeated three times in just that small piece of code.
 

I haven’t totally convinced myself that this is the best way of styling up a page, but I think it’s headed in a direction that has less repeated elements, and reads more cleanly. We’ll see where it goes from here.