.module.css文件介绍与优缺

使用场景：React 

 

css modules指的是所有的类名和动画名称默认都有各自作用域的CSS文件，是在构建步骤中对CSS类名和选择器限定作用域的一种方式（类似于命名空间）。通过CSS Modules可以保证单个组件的所有样式集中在同一个地方、只应用于该组件。

文件目录与引用

注意事项： 

1. 将module.css文件引入为一个变量（示例中为styles）
2. 类名同样使用变量方式，“前大括号 变量 点 类名 后大括号”（示例中为{styles.app}）
3. module.css文件中写法与css写法无特殊区别

import styles from './App.module.css';


function App() {
  return (
    <div className={styles.app}>
      Hello React
    </div>
  );
}

export default App;

.app {
  font-size: 20px;
}

实现效果：

在使用CSS模块时，类名是动态生成的，唯一的，并准确对应到源文件中的各个类的样式。 

作用与缺点：

• 添加胡乱的字符到DOM元素的类名中，保证不会重复，解决工程中的样式污染；
• 只需修改js/jsx文件中的引入和类名书写格式，module.css文件中的写法与css文件一致；
• 如果需要应用某个全局的标签或修改组件库中标签的样式，需要到最外层的样式文件中编写或者在外层的.css样式文件中书写。
• 用阮一峰教程中的话讲，CSS Modules 很容易学，因为它的规则少，同时又非常有用，可以保证某个组件的样式，不会影响到其他组件。
• CSS Modules 提供各种插件，支持不同的构建工具。
• 所有的 class 的名称和动画的名称默认属于本地作用域的 CSS 文件。所以 CSS Modules 不是一个官方的规范，也不是浏览器的一种机制，它是一种构建步骤中的一个进程。（构建通常需要 webpack 或者 browserify 的帮助）。通过构建工具的帮助，可以将 class 的名字或者选择器的名字作用域化。（类似命名空间化）。

结语，转自CSS Modules_入门 精通 教程_W3cplus

在瞬息万变的前端开发世界中，很难找到一个真正有意义的概念，并且将其清晰明了的向广大人民群众普及。把目光投向CSS，一个重大转折就是CSS预处理器的出现（在工具方面来看），其中， Sass应该是最为著名的一个。此外，还有 PostCSS，它和Sass略有不同，但是殊途同归——都是用浏览器不能解析的语法编写，并且最终编译成浏览器能够理解的语法。现在，又有一位新的成员出现了，它就是CSS模块。本文就将介绍CSS模块化的诸多优点，以及如何编写模块化的CSS。著作权归作者所有。