Design created by pikisuperstar
After spending a long time learning CSS, finally you have mastered it. Now you feel ready to tackle any project. You start building your first project and everything works as you expect it to. The page looks exactly as you want it to but your CSS file is more than 1000 lines long. And then you need to make a change. After minutes of trying to find where to make the change you realize that you need to organize your code better.
In this article I will give you the best techniques to keep your CSS organized and its size as small as possible. First let me introduce myself. I am a FileMaker Pro developer for more than 20 years. I have built complete solutions and also I have contributed to many others. The last couple of years I switched interest in Web development. This article is a summary of what I have learned so far in CSS.
Before starting it is necessary to use the proper tools for the job. A code editor like VS Code, Brackets, Atom is necessary. Not only they highlight the syntax but also they catch any misspelling errors. With the proper plug-ins they also auto-fill while you are typing, speeding the whole process.
1. Reset the CSS Default Values
Each browser comes with each own default styles for every page. This causes a page to appear different from browser to browser. The purpose of the reset stylesheet is to reduce this type of inconsistencies. It resets the values of elements like default line heights, margins and font sizes of headings, and so on.
My favorite tool for the job is CSS reset. http://meyerweb.com/eric/tools/css/reset/
2. Use CSS variables
CSS variables also known as custom properties they can reused throughout a document. Complex sites have many repeated values. For example instead of using the same color again and again you can assign it to a CSS variable. This way when you need to make a global change there is only one place to do it.
3. Use Meaningful Names on Your Classes and IDs
It is important to think ahead when naming you classes and ids. It will make your life easier when you want to make changes on the page. For example if you have a class 'background-blue' it might be meaningless when you change the color of the background.
Let's assume you have your page design ready and you know all the elements you need. You should assign the same class to all the elements with the same styling. For example you might have a few pictures of people that need to be the same size, border and shadow. Assign them to the same class name class=“people-picture”. For elements that have partially the same styling but there are one or two differences, you can still assign them the same class and use a second class to style only the differences. If only one item is different, for example CEOs pic use an id for the extra styling. Remember that more specific selectors get precedence over the less specific ones.
4. Use comments to organize your CSS selectors according to your HTML elements
Usually when styling you move from one part of the page to another, while writing a few CSS lines for each part to style it. This makes your code fragmented. It is easier to write the CSS selectors in the same order as the elements of the page. So first you have the general styles, for the whole page then the Header, Navbar, body etc. This way when you need to do a change it is very easy to quickly jump to the correct lines in your CSS file.
5. Group your selectors by Element, Class and ID
In the above example all the styling for class deals and all its sub-elements are grouped together. This way it is easier to visualize what is happening and make changes if needed.
6. Do not Use Named 'Colors'
Use hex codes for your colors. It is harder to read but they have some advantages. First they are rendered faster than using color names. Second browsers do not agree on what some color names mean. Third you have a choice of 16,777,216 colors to choose from. Also it will be easier to address them once you start playing with Javascript.
But wait. You are not finished yet. There are a couple of steps more needed to ensure the best experience for your users.
7. Use a CSS Validator
Although your page loads properly in your browser it might have unexpected appearance in another browser. Or there might be bugs that do not appear in your browser. Validators check your CSS for errors or bugs and ensure cross-platform, cross-browser and future compatibility. My preferred one is https://jigsaw.w3.org/css-validator/
While you are there you can also validate your html files.
8. Reduce your CSS File Size
Smaller CSS file means faster page loading and better user experience. First you have to remove unnecessary code. To achieve this check for redundant or duplicate CSS code using a tool like this one: http://unused-css.com/
Also shrink the size of the css file by using a css compressor. There are many. One of my favorites is CSS minifier: http://www.cssminifier.com/
By following these little steps you will help yourself and your teamates when you will need to add or modify your code in the future.
I learned most of these tricks as a student in microverse.org. The free school which you pay after you get a job. Why don't you join me and learn together?
Have feedback? Have more useful techniques you wish to be added to this article? Please say hello 🙋♂️ at Twitter or LinkedIn