【CSS】业界内CSS的实现方案

几个大的方向

CSS modules

编译的css的class会编译成一个海西字符串，在webpack的css-loader中这样配置

js 复制代码

   {
        test: /.css$/,
        loader: "style-loader!css-loader?modules"
      }

css-loader 默认哈希规则是 [hash:base64],也可以更改定制哈希样式

bash 复制代码

 {
      test: /.css$/,
      loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
    },

css 复制代码

.title {
  color: red;
}

:global(.title) {
  color: green;
}

这种方式不会被编译成哈希字符串，虽然经常用，但是不知道为啥，学到了学到了

css 复制代码

:local(.title) {
  color: red;
}

:global(.title) {
  color: green;
}

通常搭配预编译语言（如less/Sass）,我们的方案是less+css module，这应该也是使用最多的解决方案

编译速度的问题，如何慢？ css module 原理是什么为何慢？我们

我理解会在head部分动态插入style的方式，如

加的太多，必定会影响性能，有大佬尝试extract-css-webpack-plugin提取单独的css解决

上述css in js方案通过编译时提取样式，解决运行时性能的问题

能解决【文件体积线性增长】的问题，Tailwind适用于做对短快平的网站，因为他内置的设计元素好看又好用。定制版话可以 UnoCSS 或者Vailla Extract+SprinkLess

atomic-css-in-js这个应该是 Atom CSS 与CSS in js的结合体，在CSS in JS的基础上以 Atom CSS的形式输出

Meta的stylex

微软的griffel

Ant Design 5.0 正式发布

1、去掉了monent、css 变量、babel-plugin-import（默认按需）减少了很大的体积？ 2、主题方案在CSS Variables 与 CSS-in-JS，选择了后者
云谦的知识星球220
云谦的知识星球216
react-css-in-js
vite开发模式的缓存策略
CSS Modules 用法教程

1、babel-plugin-import 究竟是在做一件什么事情

2、我们项目中在本地联调的时候会碰到，使用css modules的时候，加载顺序冲突的问题，很不稳定，切换下页面就好了。比如期望是red，而不是默认的blue

css 复制代码

:global{
  .ant-button{
    color: red
  }
}

.ant-button{
    color: blue
  }