CssModule css模块化

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

1.BEM

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

2.scoped css

下面是vue事例

<style scoped>
  .example {
    color: red;
  }
</style>

<template>
  <div class="example">hi</div>
</template>

// 转换结果
<style>
  .example[data-v-f3f3eg9] {
    color: red;
  }
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

3. css module

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

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

<style module>
.red {
  color: red;
}
</style>
<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

// 转换结果
<style module>
._1yZGjg0pYkMbaHPr4wT6P__1 {
  color: red;
}
</style>
<template>
  <p class="_1yZGjg0pYkMbaHPr4wT6P__1">
    This should be red
  </p>
</template>

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(
    <Wrapper>
      <p>黑色 p 标签 </p>
      <h3>红色 h3 标签</h3> 
      <p className="blue" >蓝色 p 标签</p>
    </Wrapper>
  )

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