It is like the "functional first" programming style where you don't add/implement side effects until the very end.
@BenjaminListwon you may already know this, but you could slightly simplify your LESS example by using '&' as a qualifying selector. So this:
nav {
background: @brand-primary-color;
}
a {
color: @brand-highlight-color;
}
body.special-feature {
nav {
background: @special-feature-primary-color;
}
}
Can become:
nav {
background: @brand-primary-color;
body.special-feature & {
background: @special-feature-primary-color;
}
}
a {
color: @brand-highlight-color;
}
...and the output is the same. Sure it only saves a coupe of lines of code, but I've fallen in love with this method recently as it allows you to keep related code blocks in the same nest, keeping things contextual. Anyway, just thought it was worth mentioning.
Well written.
Unfortunately every developer, designer and coder have a different opinion about what is and isn't a best practice.
I prefer to go with whatever gives me flexibility and maintainability; again, those 2 words differ from person to person.
Honestly at this point we've gone from styling using inline HTML attributes, to using external CSS, to now using inline CSS styles with React; and from completely banning presentational classes to saying that actually no, presentational classes are fine too.
I'm pretty sure that for every "best practice" CSS article you can find another, more recent one that says the opposite.
At this point when it comes to CSS I've only kept two rules throughout the years:
1) Be consistent.
2) Don't be dogmatic.
In other words if you come up with a system stick to it, but don't be afraid to change it if a better system comes along.
/rant
The ALA article seemed a bit like a personal F.U. at Bootstrap, without which we probably wouldn't have ever ended up with <form class="form"> - but I do think their article does hold some merit.
That's not to say that Bootstrap is complete BS. It's a solid framework if that's what you need and their excessive use of classes is also needed to make the framework so robust (if used properly as ALA said).
But if you don't need that, there's nothing wrong with some meaningful classes; and they should be meaningful.
Classes make it easier to apply styling because you can visualise where the code is being used. e.g. It's much harder to decipher
than it is to decipher
As everything on the interweb; there is no right answer.