Discussion on: Improve your CSS with these 5 principles

[Russell Bishop]

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.