Three tips for writing better CSS

I seem to be apart of the few lately, but I still love CSS.

It’s not without its challenges, but nothing I don’t experience when working with HTML or JavaScript in my opinion.

Here are a few quick tips I have been thinking about lately with regards to writing better CSS.

1. Reduce far reaching styles

Be careful styling raw HTML elements globally. Make careful use of the cascade. Globals are powerful and need to be throughly considered before being introduced.

For example, I get a little nervous when I see headings getting overly specific styling outside of a default font-weight and font-size. When you start to introduce colors, text transformations, I often see them having to be overridden farther down the document.

Try to reduce that amount of times you have to undo something you had previously declared farther up the cascade.

2. Whitespace

If you are using a build system to minify your CSS, whitespace is a free documentation tool. This is a small but handy tip I picked up from Harry Roberts, he does a great job explaining how whitespace can be semantic.

3. Periodically check the output

This may seem silly to some, “I know what the output will look like, I wrote it!”, but Sass and tools alike do a great job of masking what you might expect in the output.

Periodically checking the output has often resulted in me refactoring a bit of my CSS for the better of the project.