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 thoroughly 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.
This post was originally featured on my website.
Top comments (0)