- Familiar CSS syntax: Using CSS syntax makes it easier to copy/paste code from devtools and the internet, and a huge productivity boost.
- SCSS like & shorhand: Super nice to write things like
&:hoverwithout having to write selectors again.
- Nesting media queries: Nice to nest media queries inside a style block instead of having to declare it like plain CSS.
- Support for CSS animations: CSS animations are great :)
- No coupling to HTML tag: HTML tags have semantic meaning, and coupling styles to HTML tags makes it harder to re-use the same styles, for example, sometimes some of my buttons and links have similar styles and I don't wanna repeat them.
- Easy to override styles: Overriding styles is one of the main pain points. Many libs don't do anything special and just produce different class names for the styles I declare. Due to no class name having higher specificity, the styles depend on the declaration order which can produce inconsistent results.
- Easy theming support: Theming is not super-common, but can be very important for some apps. Some libraries require you to declare 2 different class names, and build own theming architecture, which is not very nice.
- Statically analyzable: Makes it possible to statically analyze CSS makes it possible to avoid JS for the CSS entirely. However, it's still nice to use declared constants etc, or things like
theme === dark ? 'black' : 'white', where the library could do some static analysis to include the constant, produce separate class names etc.
- Flow support: Some libraries break Flowtype. It'll be nice if types flow naturally even if you need to wrap the component in something.
- Correctness - Libraries should verify that my CSS is properly terminated etc. Many times I forget to write a semi-colon etc. and break the styles.
- Linting: No-one does it, but it'd be super-helpful to lint CSS properies to verify there are no typos. So many times I accidentally use camel case where I should've used hyphens.
- Auto-completion: CSS should get auto-completed just like CSS files.
- Syntax highlighting: It's important to have a good syntax highlighter just like CSS files.