{`.container{color:blue;}p:first-child{color:red;}.hello{color:yellow;}#hi{color:green;}`}CSS模块化CSS（CascadingStyleSheets），从诞生之初就被确定为不能编程，甚至不是解释型语言。它只能作为一个简单的用于格式化HTML元素的层叠样式表。但是随着前端的发展，前端项目变得越来越大，越来越复杂，社区一直在探索如何管理前端代码（js/css/html）和资源（图片，字体，...).在这个过程中，社区探索了js（amd、commonjs、es6）的模块化，现在用js开发大型项目很容易，但是css的模块化一直不是特别流行。1.分组模块化这是CSS模块化最早实现的，也是最主要的方式，包括现在很多组件和开发者都是采用这种方式开发的。分组模块化就是采用命名的方式，不同的前缀代表不同的含义，达到样式分组的目的，将文件分块，从而达到模块化的目的。例如：#目录结构|--one/page/css/某个页面的css目录|--common.csscommoncss|--page1/singlepage1|--section1.cssarea1css|--section2.cssarea2css|--page2/singlepage2|--...#common.css文件.c-el-1{...}.c-el-2{...}...#page1/section1.css文件.page1-section1{...}.page1-section1.el-1{...}.page1-section1.el-2{...}...#page1/section2.cssFile.page1-section2{...}.page1-section2.el-1{...}.page1-section2.el-2{...}...这种方式不是真正的模块化，因为问题全局冲突无法避免，但是原生css不具备编程能力，所以这个问题无法避免。虽然分组不是真正意义上的模块化，但是这种方式并没有脱离css的原生机制，所以很多第三方组件，尤其是导出css文件的时候，都是采用这种方式。比如ant-design导出的css中使用了ant-前缀，mui导出的css中使用了mui-前缀，等等。1.1最佳实践css的命名和分组实践由来已久，自从css诞生以来，所以社区发展的非常成熟，比如网易的css规范框架NEC、H-ui。补充：一个css文件不要太大，可以使用@import来分割文件；样式渲染尽量不要使用#id[attr]，尽量使用.class；使用js库操作dom时，尽量不要使用.class，尽量使用#iddata-set，如$('#main'),$('[data-tab="1"]')。
