- Webknit
- WON
- Base
Recently I read this article on CSS tricks. It was basically a poll on how people order their CSS properties. Although I had heard of people organizing their CSS, I personally have never really made a solid attempt to get into it. Until now.
I decided to review each method and all the comments to establish which works best for me before I put it into practice.
There are three main methods including (Poll results %):
I am currently in the Random category. I just add my code in any order, whatever property comes into my brain first is applied to the stylesheet. I must admit that primary properties such as width and height are generally the first ones that I will write. With this in mind I decided to look at Grouped by type first.
This seems the most logical way to organize CSS properties. Start with the important stuff and work your way down.
A example structure:-
.css {
Box (height, width, position)
Border (margin, border)
Background (colours)
Text (fonts, font-weight)
Other (text shadow, border-box)
}
This seems a good idea to me and I can understand its logic.
I won’t bother with a code sample for Alphabetical order. It’s pretty self explanatory. The properties go from A-Z.
Admittedly it may take time to get used to either system and the first few attempts may be frustrating but once you get into the swing of things it will become second nature. I imagine this is the reason why most people just work randomly. It’s quick and less hassle and does it really make any difference in the end? Well it does to me.
Anyway initially I was convinced there was no decision to make, the grouped by type method won hands down. I delved a little deeper anyway and two main things bugged me.
First issue is the order of the grouped properties. I noticed that everyone’s opinion differed dramatically on the order of CSS properties, there are no standards for this and people just order things in their own way. This is absolutely fine if you are the only person working on a project, but if you have 5-10 people who all have different ways of ordering their CSS things are going to become frustrating, time consuming and confusing.
The second issue was with web developer (code inspect) tools such as firebug. Firebug is perhaps the most important tool I possess whilst working. I often code on screen using this and then copy the code back to my stylesheet alphabetically. Yes that’s right Firebug and all the other code inspectors arrange their CSS in this order. Just imagine you are positioning your newly made logo on screen using firebug, you add ten CSS rules then copy the code back to your stylesheet. You would then have to arrange the code in group order, therefore making the process twice as long.
With these two issues in mind I am going to go with alphabetical order. Everyone who made it through school will not need an explanation of this order. By grouping my CSS properties alphabetically I feel it helps us as humans to anaylse large amounts of data by utilizing human cognitive working memory. If I managed a huge web project I would instruct my team to operate in this reliable, straightforward way. I also feed the need to mention that alphabetical declaration is something that Google use in their coding standards.
The only issues I have found is that vendor prefixes need to be written together. Because I work in Less all my mixins go to the bottom in alphabetical order. If I were to write normal CSS my box-shadow vendor prefixes would sit alongside box-shadow like the following:
.css{
Background:red;
Border:1px solid red;
-moz-box-shadow: 3px 3px 3px red;
-webkit-box-shadow: 3px 3px 3px red;
box-shadow: 3px 3px 3px red;
color: red;
}
The fact that there is no “proper ” way of ordering css means that everyone will have a different opinion. People will also disagree with my opinions, views and choice. But I think this is the best and most efficient choice for me.