CSS is one of the easiest web languages to learn, which is why we underestimate it. Writing CSS professionally and efficiently in large projects is harder than it seems. This blog post is a collection of 6 CSS best practices to adopt for better and more readable CSS.
Disclaimer: as with all best practices, these might not apply everywhere at all times. But they serve as a good baseline. You need a good reason to deviate from these CSS best practices.
It's hard to know what you want to style when you don't know what the HTML framework will look like. That's why you should not write CSS alongside HTML. Don't style the header while you're coding it.
Instead, write the HTML first. Once that's done, you'll have a much clearer idea of how you want to style your website's components. If you do this instead of writing CSS along with the HTML, you'll save a tremendous amount of rewriting.
In addition, once you've written the HTML, make sure you organize your stylesheet while writing CSS. You can do this in many different ways, but here are two:
As a final point, if you're working on a large project, break large stylesheets into smaller ones. Have one stylesheet with all the global rules and smaller stylesheets with specific rules. Or different stylesheets for your blog and your static pages. It doesn't matter how you divide it, as long as it's neatly organized and properly cross-referenced.
CSS is fairly explanatory and doesn't seem to require any comments. But it's not because the syntax is easy to read that people (including your future self) will understand what you're trying to do.
That's why you need to add comments to the specific decisions you make in your stylesheet. Explain your reasoning. Add links to tutorials if it's a particularly crafty bit of CSS. What seems obvious when you're writing CSS probably won't be a month from now.
Additionally, use comments to divide logical sections in your stylesheet. For example, /* || General Styles */, /* || Typography */, and /* || Colors */ can make a stylesheet much easier to read. Make sure to keep enough whitespace between these sections too.
Use CSS shorthand properties wherever possible. This is particularly true for border, margin, padding, and background, but it counts for other properties too. For example, don't write the hex code of #FFFF00 when you can write it as #FF0. Of the below two examples, which one do you prefer:
/* Example 1 */
.container-1 {
background-color: #FF0;
background-image: url(.css.png);
background-repeat: no-repeat;
background-position: center;
}
/* Example 2 */
.container-2 {
background: #FF0 url(.css.png) no-repeat center;
}If you want to keep your CSS short, think of one of the most important principles of clean code: Don't Repeat Yourself. Consider this:
/* Example */
.problem {
width: 60%;
height: 60px;
background: #FF0;
border-radius: 3px;
}
.problem--big {
width: 60%;
height: 60px;
font-size: 1.5em;
background: #FF0;
border-radius: 3px;
box-shadow: 1px 2px 5px #CCC;
}
/* The same example, but DRY */
.problemo {
width: 60%;
height: 60px;
background: #FF0;
border-radius: 3px;
}
.problemo--big {
font-size: 1.5em;
box-shadow: 1px 2px 5px #CCC;
}The CSS in the latter part of the above stylesheet is cleaner and shorter. In your HTML, you'd just need to add an extra class, so class="problemo problemo--big" instead of class="problem--big".
Much to the frustration of many web developers, different browsers have slightly different ways of displaying things. Your website that looks one way in Chrome might look another way in Internet Explorer. Fonts might not display, some functionality might not work, line height might be different, etc.
That's why you need to use a reset stylesheet. It reduces the inconsistencies between browsers by overriding the default browser styles. A good stylesheet will explicitly set styles for most HTML elements.
There is a wide variety of CSS reset stylesheets to choose. Two popular resets are Eric Meyer's CSS reset and the Yahoo! Reset. Alternatively, you can create your own stylesheet with something as simple as this:
* {
padding: 0;
margin: 0;
border: 0;
}Make sure you are consistent with your colors. Choose your brand colors and don't deviate from them. You don't need thirteen shades of red. This means you need to be careful declaring colors with rgba() or hsla() because those colors will change depending on the background. Use a hex code instead.
Although IDE plugins help visualize which hex code is which color, it's also a good idea to add a color reference so the people reading your code know which colors you'll use throughout the stylesheet.
If you're too specific with your selectors, you'll end up repeating yourself. Consider the following:
/* Too specific */
article.main p.box {
border: 1px solid #fff;
}
/* Better */
.box {
border: 1px solid #fff;
}The former only works for a paragraph with the class box inside an article with the class main. This is far too specific. A .box selector works equally well.
The same goes for any ID selector. Because ID selectors are already the most specific selectors, there's no need to write ul#nav when #nav will do the trick just the same. A good rule of thumb is to write your CSS selectors with the minimum amount of specificity they need.
Enjoyed reading this? You might also enjoy this blog post on great CSS frameworks.