css in js

The core idea of CSS in JS is to use a JS object to describe styles instead of a CSS style sheet

For example, the following object is an object that describes a style:

const styles = {
    backgroundColor: "#f40".color: "#fff".width: "400px".height: "500px".margin: "0 auto"
}
Copy the code

Since there is no class name at all in this way of describing the style, there is naturally no class name conflict

How styles are applied to the interface is not its concern. You can apply them to the interface in any technology, in any framework, in any way.

The vUE and React I learned later all support CSS in JS, which can be easily applied to the interface

CSS in JS

  • There is no possibility of a conflict: since there is no class name, there is no possibility of a class name conflict
  • More flexible: can make full use of the JS language flexible characteristics, with a variety of moves to deal with the style
  • Wide range of applications: CSS in JS can be supported as long as js language is supported. Therefore, it is very useful to develop mobile applications in JS language, because mobile applications may not support CSS
  • Writing inconvenience: Writing styles, especially common styles, are not very convenient to handle
  • Adding a lot of redundancy to the page: When dealing with CSS in JS on a page, you tend to add styles to the style attribute of the element, which will greatly increase the inline style of the element, and may have a lot of repetition, making the final page code difficult to read