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!