3 ms·
It is an option and some have tried that but eventually switched to a similar model as the one described in the article because inline styles were underperformi
by ggurgone 8y ago
It is an option and some have tried that but eventually switched to a similar model as the one described in the article because inline styles were underperforming when compared to class names (I imagine that React could be also part of the problem). See https://github.com/necolas/react-native-web/pull/283#issuecomment-266484275 https://github.com/necolas/react-native-web/pull/283#issueco... for example.
Another cons of using inline styles is that you cannot use pseudo classes (eg :hover) and media queries.
- ggurgone 8y agoFor the record I like the authoring experience of inline styles because of the same reason you brought up :) It is slightly harder to enforce static CSS and do composition but definitely doable. In fact I would like to build a CSS in JS library that is as powerful and allows static extraction. Waiting for Facebook to open source their solution first (so that I don't reinvent the wheel) https://twitter.com/sebmck/status/1036018032336822273 https://twitter.com/sebmck/status/1036018032336822273
- CGamesPlay 8y agoInteresting, thanks for the response. How do you handle pseudo classes and media queries now? Does the pseudo class get transformed into a portion of the class name? If so, do pseudo classes override the determinism, or is it still done right-to-left?
- ggurgone 8y ago> Does the pseudo class get transformed into a portion of the class name? Yes. I assume that a state eg .foo:hover { color: red } is always more specific than the idle state .foo {} Atomic CSS classes are sorted so that states and media queries are at the bottom of the bundle and always override basic styles. There is a comprehensive list of supported css features here https://dss-lang.com/supported-css-features/ https://dss-lang.com/supported-css-features/