Coming up with names for your soon-to-be-born children can be pretty challenging but so can naming your CSS. The main problem stems from each site changing over time. A class name might make sense now but what if the design changes? To help out with this, think of names in three main categories: functional, content-based, and presentational.
Functional names
These names come from how the style reflects the elements function. For example, a Facebook “Like” button will most likely look the same across the entire site or a “close” icon in the corner of an element. If you build these elements out and the designer changes the look, you don’t have to change any HTML or CSS names. These names can look something like:
<div class="facebook-like">Like</div> <div class="corner-close">X</div>
Content-based names
These names are just like they sound, styling based off the content of the element. Some examples of these include:
What if these buttons look the same? You’d most likely use the same style block with a comma separating the names. What if the designer wants them to look different later on down the road? Or maybe another element could use those same styles. This is manageable at a small scale but as your site grows, this could get out of hand quickly.
Presentational names
These names deal with the actual look and presentation of an element. Something like:
<div class="dropshadow">...</div> <div class="round-corners">...</div>
These classes can easily be reused and added onto other elements. This also is very helpful if you’re part of a team and another developer will be going into your code at some point in the future. A class of “circle” and “dropshadow” are easier to understand than “avatar.” The downside to this type is having to use multiple class names for a given element and having to delete/switch out class names in the html.
So now what?
For the most part you’ll mostly likely be using functional names but if you can’t use them for a given element, take a look at your project overall. Is it a large build where content-based might get crazy and using multiple presentation names will be repeated or on the smaller side without many different types of content? There are many different ways to “skin a cat” and we all tend to develop slightly differently. No one way is the “holy grail.” Let me know if you have any other techniques you use when naming your CSS in the comments below.
