You created a website, and it looks exactly like the design. You're happy that you don't have to visit that CSS file again. The next day, the client called and wanted some changes, and your struggle with CSS starts, Again.
CSS is a powerful tool and has improved the way the website looks and feels. But CSS is often confusing, chaotic, and hard to work with, especially when you're in the middle of the project or working on some redesigning. Revisiting the CSS feels like a headache. But there is a simple solution, and you will never feel that heartache again - "Introduce Order."
When we write CSS, we are not concerned about how we are writing it. We are just focusing on the end results. And here lies the problem, the end results might change in the future. Hence, when we dread revisiting because the code now needs a large amount of work in both reading and then changing it to reflect the new design changes.
Introducing "order" in the CSS makes your job so simple that you will no longer dread revisiting your old style-sheets.
What is Order?
In short, ordering your CSS is a simple task of organizing the CSS properties, either in groups of similar properties or in alphabetical order.
Chaotic CSS:-
You keep on writing CSS till you reach the final result. You didn't worry about the Ordering of properties. It is a wrong approach since this makes it extremely hard to read the code in the future.
Alphabetical CSS:-
You write CSS alphabetically. Alphabetical sorting is the most straightforward way to organize your CSS style-sheets.
However, the problem with this approach is this is sort of random as properties like color, background could be at the top, and properties like height and width have other properties in between them.
Group CSS:-
It is the part where things got interesting. You group your properties in small chunks of code. That is, the same type of properties are stacked together.
These groups could be:-
- Layout Properties like position, display, etc.
- Typography properties like font-size, font-weight, etc.
- Visual Properties like Color, Background, etc.
It offers a great advantage as reading code becomes very easy. All flex properties are stacked together, and typography properties are stacked together!
If you need to find a property, search for it in the respective block, and change/edit the value.
The problem is that there are many ways to group our properties. For example, we could create a group of font-properties, followed by background properties or layout properties followed by typography, followed by background. Here comes the tools like stylelint for the rescue.
You don't have to worry about how to organize CSS properties. Let these tools do the organizing of your CSS, and you do what you do best; Code.
Conclusion
"Introduce a little order, and every chaos will disappear"
The problem with CSS is that you could write it any way you like. But that is the reason why it becomes so hard to work with big CSS files and maintain the code in the future. Hence developers don't like CSS.
Grouping your CSS properties together in chunks of similar properties will exponentially increase the readability of code and make it easy for you to revisit.
So whenever in the future client demands the changes, you know where to look for them.
Happy Coding:)
