.module.css文件介绍与优缺

使用场景:React 

.module.css文件介绍与优缺_第1张图片 

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

文件目录与引用

.module.css文件介绍与优缺_第2张图片.module.css文件介绍与优缺_第3张图片

注意事项: 

  1. 将module.css文件引入为一个变量(示例中为styles)
  2. 类名同样使用变量方式,“前大括号 变量 点 类名 后大括号”(示例中为{styles.app})
  3. module.css文件中写法与css写法无特殊区别
import styles from './App.module.css';


function App() {
  return (
    
Hello React
); } export default App;
.app {
  font-size: 20px;
}

实现效果:

.module.css文件介绍与优缺_第4张图片

在使用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。著作权归作者所有。

你可能感兴趣的:(javascript,前端)