TL;DR: There is no right way to do CSS. Just try your best to keep the CSS clean, so will have less problems working with it.
“Why writing about the wrong way of using CSS, and not about the right way to do it?
Here the simple answer: There is no right way.
I’ve been a Frontend Developer for four years now, and CSS never stopped being some kind of a puzzle box. A lot of times my coworker, who is more of a full stack developer, has a problem with styling some elements and pops me a question like:
“What CSS do I have to write to make the elements look like this?”
There is a high chance, I have to answer something like: “Just let me try.” or “I have to take a deeper look into the current structure of your component.”
For him, this seems strange and nerve-racking, to not be able to predict the runtime results, without reloading the browser. In conclusion not to be able to give the one right answer.
What can we do then?
“I already know that CSS is hard to work with! I’m here to learn how to make it easy!”
Slow down boy! I will tell you some tips that may help you ease the pain. NO GUARANTEE!
Write sustainable CSS
I know, this sounds simple. In my few years working, I’ve learned it isn’t!
What I mean is: write CSS that makes it easy to change your code in three years, without a two hour search for the right location, or bug fixing afterwards. Sadly we can not test CSS automatically that easy without a lot of overhead.
I could write a whole article about CSS bad practices and how they affect your sustainability (like using !important or using HTML tags as CSS-selectors), but I think there are enough out there.
“Pff, I will not work on this project after two month anyways!”
This will not only make it easy in the future! Even the day after tomorrow, as soon as there comes another change to the requirements (and you know there will always be a next time) you will be happy, that you wrote clean CSS. So just ask yourself the next time: Would I understand this next week? Would I understand this without knowing the HTML structure?
Until last week I thought this would be a standard, until I met a fellow programer who refused to use SASS or LESS just for the sake of purity in CSS code. I would never want to miss the variables and mixins of SASS again. This helps so much to create sustainable, well readable code. Need a new theme? Just change the main color in one file: TADAA! In the rare case you’ve not tried it before: Do it! You can thank me later.
Even with all the well written code and preprocessor magic in the world, there will still be some cases where there is some CSS, that will not be easy to understand. Just document it somewhere. Best near the code it belongs to. I’m not a big fan of comments, but if there is no other way…better than no documentation at all.
“Well, this all was a lot of philosophical ‘There is no right thing’ and ‘Do what you have to’ but what about code examples, concrete implementations?”
As I said before, I could write articles about these things. Tips on how to achieve the stuff I just told you to do. But this post is not the right place for this discussion. There may be a next one if you want me to, but until then:
Also published on my medium account: https://medium.com/@SheepFromHeaven/css-the-wrong-way-a7112c55b1fd