DEV Community

Cover image for Improve your CSS with these 5 principles

Improve your CSS with these 5 principles

Adrian Bece on October 07, 2019

Writing CSS is really simple and straightforward, so why is there a need for principles and best-practices while writing CSS? As the project scope...
Collapse
 
russellbishop profile image
Russell Bishop • Edited

Adrian I have another principle that conflicts with some of your own, but I feel would solve some of the problems you're sharing.

Don't Unset Yourself.

That is – do not contradict a previous style that you have applied.

Your example:

.card {
  padding: 1rem;
}

.blogList__card {
  padding: 0.5em 1rem;
}

Would be much better served as:

.card { … }
.card--default { padding: 1rem; }

.card--blog-list, // OR
.blog-list__card 
{ padding: 0.5em 1rem; }

This way you do not have to worry about the order of properties to ensure that your classes work as intended. You only ever add styles, instead of setting and then unsetting them.

Collapse
 
chrisachard profile image
Chris Achard

Nice overview - It's good to know the actual names of these tips (like "Low specificity"); that helps with remembering it :)

Also, didn't realize that browsers search for selectors from right to left! That's interesting... I wonder how much overhead it saves once you realize that - do you know of any studies / tests that show that?

Collapse
 
adrianbdesigns profile image
Adrian Bece

Thank you. Glad you found the article useful.

Regarding the performance studies, I am not aware of any, but if you come across any, please link them.

Collapse
 
texxs profile image
Texx Smith

"Writing CSS is really simple and straightforward" = BS.

CSS is getting better but it is still a mess. Brower compatibility probs, compiler-generated CSS, resets, browser pre-fixes, box type, and old legacy days from when they let print designer sit at the table to develop specs...

Oh ya and silly issues reading selector from right to left when we read it top to bottom and the browser typically reads everything else from start to finish . . . etc etc.

CSS is almost as much of a mess as JavaScript.

Collapse
 
adrianbdesigns profile image
Adrian Bece

This article deals with the basics of how we write CSS (selectors and properties concept) and how to write flexible and scalable CSS, not browser compatibility issues, CSS compilers, vendor prefixes, etc.

Collapse
 
texxs profile image
Texx Smith

I wasn't saying anything like that. I'm just saying that CSS is not simple and straightforward anymore. I still enjoyed your article though and look forward to seeing another.

Thread Thread
 
adrianbdesigns profile image
Adrian Bece

Thank you for clarifying and I'm glad you've enjoyed the article.

CSS indeed had a messy history and the syntax suffered for it, but it keeps improving year after year.

 
adrianbdesigns profile image
Adrian Bece

Thank you for the very detailed and insightful answer. I guessed as much regarding the performance and the worst-case scenario. In any case, I think that having a single selector is the best way to go in terms of performance, code readability and flexibility.

In any case, having several levels of CSS selectors brings up some other issues, as described in "Open/Closed principle".

Collapse
 
unodwicho profile image
UnoDwicho

I teach webdesign basics and this was incredibly helpful and gave me some ideas on how to approach things with my students. Specificity often is something that leave them scratching their head.
Thanks!

Collapse
 
adrianbdesigns profile image
Adrian Bece

Thank you, glad you found it helpful. I wish my teachers would show me these best practices from the start.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

I use BEM at work but I prefer ECSS at home. ecss.io/

Collapse
 
adrianbdesigns profile image
Adrian Bece

Nice. Thank you for sharing. I might use it as well on my projects

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

There is definitely some good takeaways, I highly recommend it.

Collapse
 
zenotds profile image
Zeno

Everytime i see BEM I can't stop thinking how ugly, inconvenient and repetitive it is.

Collapse
 
amlinarev profile image
Andrej Mlinarević

That is very true for BEM, but generally it's not a problem if you don't nest classes more than 2-3 levels.

I sometimes combine BEM with the "old ways" in order to not have deep nesting of BEM on complex elements. Works fine, still namespaced (but you need to have control of the whole project and be reasonable enough not to write a global ".specificelement" class.

.block__element--modifier .specificelement {}

Collapse
 
vkeknec profile image
v-keknec

Very helpful. Thanks!

Collapse
 
adrianbdesigns profile image
Adrian Bece

Thank you. Glad you've found it helpful.

Collapse
 
0ctavia profile image
Octa

Excellent article, thank you very much.

Collapse
 
adrianbdesigns profile image
Adrian Bece

Thank you

Collapse
 
manojkrajasekar profile image
Manoj Kumar Rajasekar

Great one ! Clean and simple explanation.

Collapse
 
adrianbdesigns profile image
Adrian Bece

Thank you