Naming CSS Classes

Headline

Author

by Troy Grosfield

Date

January 3rd, 2013

Category

Developer

Story

There are lots of questions when styling a web page of “what should I name this CSS class”. Here are a few things to think about as you ponder your decision.

Leave implementation logic out of class names! I’ll use Twitter Bootstrap (which by the way is awesome) as an example. Sometimes they do a good job of this and sometimes not.

The Good

Take Twitter Bootstrap’s CSS buttons for example. I think twitter does a great job of leaving “skin: color” class names independent of visual implementation. Instead of calling buttons:

.btn-green

they call it:

.btn-success

The meaning is more semantic and the big advantage here is if you wanted a site wide change for those green buttons to a different color, say blue, then you would have to go update all the class names everywhere that class is used. However, since they use the class name “.btn-success”, only a simple CSS style sheet change is necessary since implementation logic is not in the class name.

The Bad

I’m not a big fan of how Twitter Bootstrap names the button sizes. Say I have a “save” button at the bottom of every form. Designer “A” thinks that large buttons are totally awesome and that all buttons should be very large. With Bootstrap, you would then assign the button the class:

.btn-large

Ok, great, right? Wrong! Designer “A” gets fired for unspecified reasons and you get a new designer who thinks small buttons are the best thing since sliced bread. They want you to make the change site wide. You then have to go update every single place you used the class:

.btn-large

and change it to:

.btn-small

If they would have uses a different naming convention that left the implementation logic out of the class name then it would be one simple style sheet change and you’d be on your way.

TroyGrosfield.com