I’ve been working a lot with CSS lately. While it seems pretty easy at first, CSS can get very messy very quickly. So here are a few best practices I learned from others over the past few weeks:
This is one of those things that makes total sense in retrospect, but is hard to keep in mind while in the moment. The key to clean CSS is keeping your styles alphabetized. Border >>Border-Color >> Font-Size >> Margin >> Padding >> Z-Index. This way, when you need to change the margin or padding, you know exactly where to look!
Let’s say you have a sentence and you need one part of it to be green. You can add span tags around the green part, and style the span element within the paragraph tag or bigger div, like this:
I love <span>green</span>.
Just using span is pretty unreadable in the css. It doesn’t not tell you much about the element and why it should be green, and it’s hard to search for when you want to change the color to blue. Instead, add a class or id to your span (e.g. class=”highlighted”), and use that to reference your element, like this:
I love <span id="highlighted">green</span>.
When Working With A Responsive Grid…
One of the biggest examples of being too general I encountered in the past week was with Twitter Bootstrap’s responsive design. In the twitter bootstrap’s grid system, you use span and a number to indicate how many columns an element should take up in a row. For example, “class = ‘span3’ ” means the element will take up three columns.
When you need to move everything in a column over to the right for example, it’s easy to just reference ‘.span3’ and add a margin. Well, what happens when someone comes in and decides whatever is in this row should now be four columns wide (‘.span4’), now you have to go back to your CSS, find the correct ‘.span3’ tag, and modify it to ‘.span4’. Or, a better approach, one that makes your HTML more readable as well, is adding an id or class element to the span, and refer to that element by its id or class in the CSS.
The point is, be specific with your elements. Refer to them by classes or ids, and try to avoid the general tags like h1, p, and span as much as possible.
Styles Don’t Make Good Names
Back to the example above, let’s say you want part of you sentence to be green while the rest is the normal color. It might be tempting to add an id or class tag named “green” around the part of the sentence you want to be green, like this:
I love <span class="green">green</span>.
Do have your own CSS best practices? If so, please share these in the comments!