As a developer, it is our mission to write code that is clean and efficient. When we start to implement CSS into our projects it can get messy real quick. It’s not uncommon that someone might throw together pieces of code just to get the job done quickly. Eventually it turns into a massive file with hundreds of lines of code. Files like this can lead to future complications. But, you can avoid this problem and think ahead with these tips for organizing and writing better CSS!
If possible, avoid multiple stylesheets
It might seem like a good idea to have multiple files for organizational purposes, but it is not recommended. Having multiple styles actually decreases browser render speed as it causes it to make multiple hits. This isn’t optimal when you are trying to achieve better performance for loading your websites. So whenever possible, try to minimize the amount of files used.
Searchable and Makes Sense
If you are creating the project for someone else, take into consideration that your code could be easily searched and understood. Someone else looking at your code shouldn’t have great difficulty going through and finding what they are looking for. You can help ease the process by adding in some comments where necessary. Comments can be used to help note different sections or briefly describe certain styles. Although if there is too much complexity, it is best to come up with separate documentation or style guides to go more in depth.
An example showing the use of a CSS comment.
Remove Bloat and Redundancy
Stylesheets fill up with lines of code quickly. So it’s not uncommon that unused and unnecessary elements are added. Take the time to go back through your code and see what is needed and what is not. Sometimes you might find that some elements share the same styles but are named under different classes. Repeated styles could be combined under one class or at least listed in a string so you don’t have multiple blocks of the same thing.
Example of combining repeated styles into one style block.
You also might find that there are unused styles. Try to go through and make sure you are utilizing all the elements otherwise just delete them.
Try not to use hacks
Sometimes we come across minor inconsistencies between browsers, so we might use hacks. A common browser guilty of this is Internet Explorer (IE). There are plenty of CSS hacks created to force IE to render a page the way it was meant to since it seems to have its own behavior of displaying styles. Hacks don’t necessarily mean future problems are resolved. Instead, although still not always optimal, include conditional stylesheets. But, if you can fix the issue without doing either of those, that would be the best option.
Use of conditional stylesheets for IE.
Organize Your CSS
As mentioned above, try not to throw a bunch of code together. Find out an efficient way to organize your styles. One way is to build a hierarchy. A few examples would be listing by most widely used styles to more specific, listing by type of styles (font, layout, etc.), or by sections (such as global to page specific styles). Organized code can be very helpful in the future as it helps searching much smoother.
Use white space wisely. Eliminate the amount of unused space in your file as this will only increase file size. Also, you can reduce the amount of space used by utilizing shorthand CSS. Shorthand CSS allows you to put multiple values combined into one CSS property.
Use of shorthand CSS.
Some Helpful Resources
If you’re looking to lessen the file size, CSS compression might be helpful. You can use an online tool to make it a little easier.
Try out a CSS preprocessor like SASS or LESS for improving maintainability and extensibility.
SASS – http://sass-lang.com/