When building components, it is important to follow a set of guidelines when naming your IDs and classes. This article will explore best practices in choosing CSS names.

When building components, it is important to follow a set of guidelines when naming your ids and classes. The main reason behind being cautious is to keep your code reusable and updatable. Naming your rounded corner box “red-corner-box” in CSS is going to lead to trouble down the line. What if there are two red corner boxes with different shades of red? What if a year down the road the client’s shareholders think red is so 2008 and now they want it blue? Quickly we can see how being hasty with naming conventions can cause accidents down the line, and may cause the client to view you as unprofessionalism.
Its best to ask yourself this golden question: Does the look and feel of a component extend to other similar areas of the site?
Lets say for example the red rounded corner box is in the design for error messaging. All across the site wherever there is an error message the designer has made the boxes red with rounded corners. Thus the name for this component will be “error-messaging,” (see figure 1). If you cannot find a theme in the design you may need to talk to the designer to discover his/her intentions of that component in the design.

Figure 1:

Well-thought through naming conventions is a way of taking a step back from the design, and to look at it holistically rather than micro-analyzing every pixel. This becomes increasingly important when deciding on more ambiguous components. Gavin Suntop, at Pop Multimedia, chose the name “flex-box” for a general 1px gray rounded corner container used with a variety of content for a recent redesign. One general rule was to avoid the word “content” in the name. Since there are many different kinds of content (e.g. login forms, homepage content containers, shopping cart buckets) it is good to avoid that word for describing a specific component when other components also use content. Flex-box is a unique name to describe a unique component. Once that component is named team members can discuss the component by its appropriate name rather than “red-corner-box,” and therefore increases communication efficiency. Imagine calling an ipod “small cool rounded-corner music player.” The satisfaction of proper naming conventions shines when building a styleguide. A styleguide is a static one html page featuring all the different styles for an entire site. It usually features all the headers, typography, components, forms, widgets, and site chrome. A good e-commerce website’s styleguide’s component wrappers should look similar to this:

In most circumstances, new-to-the-project developers will immediately know how to use most of these components when comparing the html styleguide to a psd mockup. It passes the reusability test. A year from now when the error-messaging changes to blue the css, html, and image file names will not have to change because the naming conventions has semantic meaning rather than describing ephemeral visual characteristics.

If you have any suggestions or recommendations on naming convention best practices please leave a comment or email us!