I believe that's exactly the point. You don't set all to 5px and then override using a special rule that says 0px for the last. You exclude the last element from the 5px rule.
There might be other rules, browser, user that should not over the 5px rule
I disagree. If a 5px margin is the general rule, then I would argue it's cleaner to apply it generally, and then apply the 10px margin exceptions in separate rules.
- When special cases are added or removed, the general rule won't have to be adjusted, just code that handles the special cases.
- On the other hand, a single general rule that specifically avoids application to multiple exceptional cases will be pretty long and have multiple :not()s, thus reducing readability and maintainability.
Why burden the general rule with knowledge of its exceptions? To me, doing so is a (small) violation of the principle of separation of concerns.
plus it's called "cascading style sheets". you're going against the current if everything wants to be so specific. This is one of my gripes with styled components.. it makes it easy to forget the power of cascading rules!
For me, forgetting the cascade has nothing to do with it; in my use cases, styled-components is all about:
- eliminating the chance of colliding CSS class names when composing multiple micro-clients together
- simplifying builds, especially cascading builds (library + client). It's nice when styles are covered entirely by the JS build (no separate CSS/SCSS input or output files or separate build pipelines).
Yes, there are other complexities/problems that styled-components adds (including the likelihood that devs will forget about the cascade)... so I wouldn't recommend it for every case. But it does have its place.
As I understand it it's not about the value but that first a rule is applied to all elements and then a new rule overwrites the previous rule for some element, the last one in that example.
To quote the article referenced in the article: "I call this technique disabling selector since the li:last-child selector disables the previous selector's rule."
So the 10px margin for the last element is a disabling selector.
There might be other rules, browser, user that should not over the 5px rule