The benefits of css in js?
We used to have a concept of "separation of concerns" when developing web pages, such as our css js html three technologies. HTML only corresponds to the structure of the web page, css is only responsible for the style of the web page, and js is only responsible for the interaction logic of the web page. For example, it is best not to write inline styles, inline js. But the emergence of react just broke this point, and he perfectly combined the three. This facilitates isolation of components. What's the meaning? That is, there is not too much dependency between components and too much coupling. Pull away. . .
css in js in simple terms
1. When we write css in js, we actually use js to write css, so the advantage is that we can use the variables defined by js in css, such as the style-components library we use, we can even use the props of components as parameters to change the style. This allows us to write css more flexible.
2. As I said earlier, we no longer worry about the possible impact of global styles, because the styles of components are independent of components.
3. With style-components, we don't have to worry about naming the element's class, because it will generate a random string for the class, avoiding naming conflicts.