Naming CSS Classes

by Troy Grosfield
January 3rd, 2013

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:


they call it:


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:


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:


and change it to:


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.

Just food for thought when you’re naming your CSS classes…

No Comments »

No Comments Yet

Leave a reply

You must be logged in to post a comment.