I don't see why 0 should be treated as special value. Initial should be used if meant to "disable" it.
What if you want margin: 5px as the general rule and margin: 10px on the last element. Is 10px a disabling selector?
What if you want margin: 5px as the general rule and margin: 10px on the last element. Is 10px a disabling selector?
There might be other rules, browser, user that should not over the 5px rule
- 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.
- 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.
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.
`initial` isn’t any better than 0 for this sort of purpose. `unset` and `revert` are probably less bad; I’d tend to choose `unset`.