Writing proper CSS is often hard, but it is something that every developer wants to achieve at some point. The property order is a recurrent question which bothers most of us. Does it matter? Does it useful if we watch for it?
The answer to the questions is not just black and white. As I read more and more on this topic, I found more opinion about it. Some care about it, and others don’t so it is hard to make a related objective point.
The easiest way is to approach this concept from a personal view. I try to demonstrate it both from an objective and subjective perspective, and I hope it will succeed.
Need a Laravel expert? We can help you to create your next performance-based, scalable, and robust project.
What It Is?
CSS is a chaotic language. It gives a lot of freedom for the developer, but it has a price. To manage a complex stylesheet project, you need a methodology to follow before you go insane.
What CSS’s own is the order of the declared properties which is irrelevant. You can write any property in any order, and your stylesheet will work as usual.
The main problem here is the randomness. Can we control the sequence and make it better for us? Is it worth the time and effort to pay attention to it? Will our code be better if we always write the declarations in a particular order? Well, the answer is yes and no.
The Available Methods
There are infinite available methods for shorting our properties because we all can build custom ones which suit for our team or us well. Besides this, there are three concepts.
Random Order
For the ones who like to write their styles in a random order. Don’t follow a rule is still a rule. This concept is the one which usually starts the debate.
.btn {
color: #fff;
background-color: blue;
display: inline-block;
padding: 0.5em 1em;
font-size: 0.8rem;
border-radius: 2px;
font-weight: 700;
overflow: hidden;
border: none;
}
Group Them Logically
By logical, we can group our styles in a lot of ways. Mostly the favorite groups are a layout, typography, box model, visual properties and others.
.btn {
display: inline-block;
overflow: hidden;
padding: 0.5em 1em;
color: #fff;
background-color: blue;
border: none;
border-radius: 2px;
font-size: 0.8rem;
font-weight: 700;
}
ABC Order
Using ABC order your properties – as you guessed – follow-ups each other based on the alphabet.
.btn {
background-color: blue;
border: none;
border-radius: 2px;
color: #fff;
display: inline-block;
font-size: 0.8rem;
font-weight: 700;
overflow: hidden;
padding: 0.5em 1em;
}
From an Objective View
Objectively, controlling our order is a valid problem. We want to make some order in the chaos. So it is a good point.
Using a convention could make our job easier. If we can find something faster and there are lesser room for error we as a developer win.
I’m almost sure that if there is a section for it in your team’s style guide, it will be beneficial. Following these rules is effortless no matter which one you chose. In the popular framework, you find some ruleset, and that is one of the reasons why the example and the source code looks so neat.
Grouping by ABC or logically can make our code more consistent.
From My Personal View
I’m the random order guy here. The question is always in my mind: should I use some method to organize my code this way? I’ve tried both alphabetical and grouping, but I didn’t stick with either.
In some case, we all write ordered CSS, think the shorthands and those properties where we set values for four directions (margin: top right bottom left;). We learned the clockwise direction, and mostly we follow this when we set position like so:
.btn {
position: absolute;
top: 0;
right: auto;
bottom: auto;
left: 0;
}
Here the order doesn’t matter, but I too follow it. For me, another example is the content property. If I use it, I always add it to the start of the block.
.btn::before {
content: '';
...
}
This part of writing better code is not so crucial for me. I see the point why this can be useful, but in a modern environment, I think it is mostly unnecessary.
- On alphabetize the cognitive load is small, everybody gets it immediately, and you can easily avoid the duplication mistakes.
- On logical groups for me, the code feels natural; this is the more likable method for me, and I think this is the best suited for CSS too.
- Both in these, you don’t have a problem where to write your code (you don’t just append at the end of the block).
I don’t think using one of these techniques it is a big help in searching for a specific line. In the modern IDE-s, it is ridiculously easy to highlight or explore something. For an intermediate developer who watches code on a daily, this is not a problem.
I think all of the methods are random in its way. Working in a team or making public code it can be a good choice.
Stylelint and CSSComb
If you want to make, a more coherent CSS start here.
As I mentioned, to make better code – with less error – we should use a linter. Using them, we can set code standards easily.
The most advanced and favorite today is Stylelint which is a fantastic tool with great options. For more information check the official site. In VS Code we can easily set up it – as all kind of linters.
CSSComb is an older tool, and it is not a linter but a code organizer. Running it, you can comb your code based on predefined rules. We can also set it up and config easily in VS Code.
More Opinions
To see the big picture check out other articles too. In this list, you can find some thought from great developers:
