css in js 的核心思想是：用一个JS对象来描述样式，而不是css样式表
例如下面的对象就是一个用于描述样式的对象：

  1. const styles = {
  2.     backgroundColor: "#f40",
  3.     color: "#fff",
  4.     width: "400px",
  5.     height: "500px",
  6.     margin: "0 auto"
  7. }

由于这种描述样式的方式根本就不存在类名，自然不会有类名冲突
至于如何把样式应用到界面上，不是它所关心的事情，你可以用任何技术、任何框架、任何方式将它应用到界面。

后续学习的vue、react都支持css in js，可以非常轻松的应用到界面

css in js的特点：

  • 绝无冲突的可能：由于它根本不存在类名，所以绝不可能出现类名冲突
  • 更加灵活：可以充分利用JS语言灵活的特点，用各种招式来处理样式
  • 应用面更广：只要支持js语言，就可以支持css in js，因此，在一些用JS语言开发移动端应用的时候非常好用，因为移动端应用很有可能并不支持css
  • 书写不便：书写样式，特别是公共样式的时候，处理起来不是很方便
  • 在页面中增加了大量冗余内容：在页面中处理css in js时，往往是将样式加入到元素的style属性中，会大量增加元素的内联样式，并且可能会有大量重复，不易阅读最终的页面代码

示例
工程文件目录
image.png
index.html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <div class="box"></div>
  11.     <script src="./js/index.js" type="module"></script>
  12. </body>
  13. </html>

index.js的代码

  1. import  {css} from "./util.js"
  2. var  box = document.getElementsByClassName('box')[0]
  3. var obj  = {
  4.     width:"100px",
  5.     background:"red"
  6. }

util.js 的代码 // 实现css-in-js

  1. /**
  2. * 给某个dom元素应用一个样式
  3. * @param {*} dom dom元素
  4. * @param {*} styles 样式对象
  5. */
  6. export function applyStyles(dom, ...styles) {
  7.     let targetStyles = {}; //最终合并的样式对象
  8.     for (const style of styles) {
  9.         targetStyles = {
  10.             ...targetStyles,
  11.             ...style
  12.         }
  13.     }
  15.     for (const key in targetStyles) {
  16.         const value = targetStyles[key];
  17.         dom.style[key] = value;
  18.     }
  19. }