You start a project, you write your code, you style it, then you notice that your CSS file is going in all possible directions. I wonder if there is a good way to organize it?
Once the CSS work begins its properties are usually written as they are needed. A little bit of margin to the right, font-size increase here, reduce opacity there, then more margin on the left and so on. At least, that’s how it goes for me.
For one of the projects I tried to go with the alphabetical order. It seems to be the easiest one (after the random order approach, of course). You don’t have to remember which property goes where. Just check the name and put it as the letters go. But then the whole CSS file looks even more out of order because nothing is grouped. Like height and width, for example. They look like something that should be written one after the other, and not at the opposite sides. And also, there is always a moment when you are “playing around” with the properties, adjusting them, to see which value suits your project best. And when you have width and height (for the current example) separated by other properties it gets quite annoying.
I’ve seen that there is also an approach of grouping by the line length, but to me it looks even more inconvenient. May look pretty and it’s relatively easy to implement, but again, similar properties might end up being at different places.
So, we end up with the approach of grouping by type. It’s probably the most annoying to implement, as you have to remember where each property goes to. It’s also not the prettiest one, as you will have them not aligned by length and not ordered alphabetically. But it seems to be the most effective one. You’ll have your similar properties go together, and they will all be neatly organized in small groups of the same types.
But then comes the question: which order to choose? I think, unless you work for a company that has a very specific rule set (in which case you probably won’t be ever bothered by the question of how to order things), the only right answer is: make your own order, remember it and stick to it. I doubt there’ll be a lot of those who will be affected if your CSS order looks less “conventional”. As long as it works for you, I’d say, it’s great.
Personally, to make my own order sample, I’ve checked a couple of articles (not really a recommendation, but in case they are needed: here and here) and just sorted my properties based on what was suggested there (with some adjustments on my side). So far I only did it for one project to see how it works. It takes additional work and time and might annoy you, but having some sort of CSS-structure helps further on as your CSS-files grow.
I could try making a particular list here, but I don’t think that would be really useful, as everyone has their own opinion on which property should go first or last (e.g., I like placing animation at the very end because I prefer writing keyframes right after the element’s main properties, and in that way these two are close to each other; but others might prefer to put it somewhere else).
So, in case you’re bothered by the CSS order and don’t have any specific guidelines, I’d say make your own list of all the properties grouped as you prefer and then use it as an example when applying the actual CSS to your project. As long as you stick to it, that might be a nice approach.
Because after all, most will be looking at the final styling result and won’t be bothered by the CSS order inside.
But if you are like me (trying to create a bit of stability in the ocean of CSS chaos), perhaps that approach might help a little… Until you find out that you have 10 CSS files and used a couple of different orders for each. Because reasons… Don’t ask.
P.S. And yes, there are Tailwind and Bootstrap. But there is order too, as you still have to write all the styling in your HTML. So, perhaps same approach could be used with frameworks as well. Although, you might just check the examples that are given in their documentation and simply copy it.
Thank you for reading.
