Menu
I'm trying to understand the best choice (as a CTO) between
I will try not to make the question "too wide" or "off-topic", because it's a very subjective topic. I'll try to answer (here) the question myself if no-one answers the whole, and I'll ask very closed questions :
<style> tag, style= attributes) ?Please I don't want this question closed, so I don't want some code-style opinions, and I want to avoid subjectives POVs.
559
For simple, efficient, and uncomplicated styling, Emotion is a great CSS-to-JS library. On the other hand, for more unique and complex styling options, styled-components may be the better way to go.
Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
Emotion. js performs slightly better than styled-components.
Styled components are a good choice for building a UI library since everything can be in one file and easily be exported and reused. If you prefer writing pure CSS, use CSS modules. You can have separate CSS files, and it locally scopes styles by default.
A very short answer (there is much more to it in general)
SC parses template strings with CSS for at runtime. Emotion has a babel plugin to prepare those parsed things in a format that can render final CSS at runtime faster. JSS currently only supports basic template strings and otherwise uses objects (there are plans to add better support for template strings)
SC and Emotion generate new CSS rules when you update dynamic styles, JSS will update existing rules (note you can see updated rules in styles tab of dev tools, but not in the style tag): reproduction
SC is react only. Emotion has a syntax that can be used without react (css``). JSS has separate packages: jss (core, no react), react-jss (HOC injecting classes), styled-jss (SC like API).
Currently only JSS supports plugins.
Static extraction
Currently only Emotion supports full static extraction. JSS is working on it too. You can get static extraction with JSS today if you put styles into separate files (something.styles.js) and extract them using a webpack plugin (no dynamic values though).
Performance
http://necolas.github.io/react-native-web/benchmarks/
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
