CssModule css模块化

css 作用域是全局的,项目越来越大,人越来越多,命名慢慢成为问题,以下是几种解决命名问题的方案

1.BEM

以 .block__element--modifier 形式命名,命名有含义,block 可视为模块,有一定作用域含义

2.scoped css

下面是vue事例






// 转换结果




3. css module

将 css 的选择器转换成惟一的字符串,运用到 dom。是在用算法命名,记录了人的命名到算法命名的 map 表
简单来说就是 将class命名通过算法hash 产生唯一的类名

react 有优化插件 react-css-module 利用包装实现不写 import进来的style




// 转换结果



4. css in js

具有代表性的就是styled-components 最后也是类似于css module的原理,
只是在那个基础上又更加可拓展, 比如全局主题样式

   const Wrapper = styled.div`
    /* 应用于Wrapper组件本身和Wrapper组件里的所有html标签 */
    color: black;

    /* 应用于Wrapper组件里的h3标签 */
    h3 {
    color: red
    }

    /* 应用于Wrapper组件里的className为blue的html标签 */
    .blue {
    color: blue
    }
  `

  render(
    
      

黑色 p 标签

红色 h3 标签

蓝色 p 标签

)
  // react 中使用 styled-components
  import styled, { ThemeProvider } from 'styled-components';
  
  const Box = styled.div`
    color: ${props => props.theme.color};
  `;
  
  
    I'm mediumseagreen!
  

你可能感兴趣的:(CssModule css模块化)