My main gripe with CSS is that rules are selectors only. Classes can't compose or inherit (or, if they can, I don't know about it and would welcome a correction).
For example, let's say I use a third-party css library (materializecss, or similar) that provides a class `btn-warning` and `warning-text`, which sets say 10 fields (colors, elevation, etc) on the former and `text-transform` on the latter.
I just want to write one new class that inherits fields from both the existing classes.
I can't specify a new class `my-btn-warning` that inherits all the fields from `btn-warning` and `warning-text`.
I can't create a new class `my-btn-warning` that is composed of `btn-warning` and `warning-text`.
My only option (open to correction) is to copy-and-paste the existing `btn-warning` and `warning-text` fields into my new `my-btn-warning` class.
There's simply no reusability here.
If I want reusability, I need to go outside the spec i.e. have a build step. Not just any build step, but one that exactly matches the upstream library. Which is impossible if there are two upstream libraries, or if my existing build step is different.
This project looks nice but it combines all the disadvantages of writing CSS with all the disadvantages of a build step and adds the extra downside of not being compatible with anyone else's (including mine) build step.
To me, this is the worst of all worlds, with no redeeming advantage at all.
It sounds like you're blaming CSS for the shortcomings of the library you're using.
CSS cascades, embrace it rather than fighting it.
Have a .btn rule that styles all your buttons. Have a .warning one that makes it yellow. Then instead of `<button class="btn-warning">` use `<button class="btn warning">`.
> It sounds like you're blaming CSS for the shortcomings of the library you're using.
...
> Or just use Sass instead!
Maybe I was unclear: my gripe is that this functionality is such a necessary thing to have, that external non-spec third-party tools have to be used to get this functionality.
It is a shortcoming of CSS, because CSS is not providing this functionality that users want.
The fact that everyone is using a third party tool to get this functionality only reinforces my point: if everyone is doing it, then it's a shortcoming.
> Have a .btn rule that styles all your buttons. Have a .warning one that makes it yellow. Then instead of `<button class="btn-warning">` use `<button class="btn warning">`.
I do this, but it ends up being `class="<godawful number of named classes?"` and is prone to breakage when you need to update or modify a theme.
You're composing in the wrong abstration layer, you just use the both classes and if you need any extra stuff you want, then you just create a selector for `.btn-warning.warning-text.my-btn` and as the selector is more specific than the classes that is uses then you can override the functionality it inherits.
For example, let's say I use a third-party css library (materializecss, or similar) that provides a class `btn-warning` and `warning-text`, which sets say 10 fields (colors, elevation, etc) on the former and `text-transform` on the latter.
I just want to write one new class that inherits fields from both the existing classes.
I can't specify a new class `my-btn-warning` that inherits all the fields from `btn-warning` and `warning-text`.
I can't create a new class `my-btn-warning` that is composed of `btn-warning` and `warning-text`.
My only option (open to correction) is to copy-and-paste the existing `btn-warning` and `warning-text` fields into my new `my-btn-warning` class.
There's simply no reusability here.
If I want reusability, I need to go outside the spec i.e. have a build step. Not just any build step, but one that exactly matches the upstream library. Which is impossible if there are two upstream libraries, or if my existing build step is different.
This project looks nice but it combines all the disadvantages of writing CSS with all the disadvantages of a build step and adds the extra downside of not being compatible with anyone else's (including mine) build step.
To me, this is the worst of all worlds, with no redeeming advantage at all.