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!

Because headers matter A LOT in SEO. It is important to avoid using h1, h2, h3, etc for ambiguous content such as “Contact Me” or “Support” titles that sit at the top of your page. What’s more important for headers is to use them for things specific to your site. For The True Tribe we would use headers for “CSS Good Practices” or “Alex Grande” , but not “Our Heros.” At least we should… The way around this is to make classes called h1, h2, h3, etc and give them properties that are similar to headers.

.h1 {
   font-size: 22px;
   font-weight: 600;
}

.h2 {
   font-size: 20px;
   font-weight: 600;
}

.h3 {
   font-size: 18px;
   font-weight: 600;
}

.h4 {
   font-size: 16px;
}

.h5 {
   font-size: 14px;
}

Other font related styles include, but not limited to…

.bold {
   font-weight: 600; /* I use this one a lot! Instead of using the b tag use
I'm Bold...that's what she said...*/
}

.underline {
   text-decoration: underline;
}

For positioning styles…
This is when all the children of a parent are removed from the page flow and need something to fill the wrapper parent.

.clearFix {
 clear: both;
 height: 0;
 width: 0;
 border: 0;
}

There are more but these are ones I use almost everyday for my clients. I hope you’ll find it useful as well.