CSS模块化

CSS模块化

CSS发展

1. 手写原生CSS：行内样式、内嵌样式、link引入外部样式、@import导入样式
2. 使用预处理器Sass/Less：支持变量、支持嵌套
3. 使用后处理器PostCSS：使用PostCss可以接受CSS文件并校验css语法或自动添加浏览器前缀
4. 使用 css modules
5. 使用css in js

什么是CSS模块化？

在系统结构中，模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。那么css模块化的思想，就是在css 编写的环境中，用上模块化的思想，把一个大的项目分解成独立的组件，不同的组件负责不同的功能。

为什么要CSS模块化？

当进行团队开发时，彼此看不懂对方的代码，面对要修改别人已经写好的代码时，无从下手；当代码耦合，面对庞大的css代码等问题时，css模块化思想就体现出来了，这时候就需要对css进行模块化的分离。

css模块化的好处：

• 提高代码重用率
• 降低耦合
• 提高开发效率、减少沟通成本
• 易于维护

CSS模块化的实现

常见的CSS模块化思想，如：Sass、SCSS、LESS、BEM、OOCSS、AMCSS

BEM

BEM由块（block）、元素(element)、修饰符（modifier）组成，是由Yandex团队提出的一种前端命名方法论，且BEM命名约定十分严格，有利于开发大型项目。

命名约定的模式：

.block{} //块即是通常所说的Web应用开发中的组件或模块。每个块是相互独立的

.block_element{} //元素是块的组成部分，元素不能离开块使用。不推荐在元素中嵌套其他元素。

.block_modifier{} //修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观

OOCSS

OOCSS 表示面向对象的CSS，是一种把面向对象的思想运用到CSS代码的组织和管理当中的实践。OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，从而使CSS有更好的扩展性。

如

<div class="size1of4"></div>
<style>
.size1of4 {
			background: blue;
			border: 1px solid #ccc;
			margin: 5px 10px 10px;
			width: 25%;
 }
</style>

使用OOCSS编写

<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>
<style>
.size1of4 {width: 25%;}
.bgBlue {background:blue}
.solidGray {border: 1px solid #ccc}
.mts {margin-top: 5px}
.mrm {margin-right: 10px}
.mbm {margin-bottom: 10px}
.mlm {margin-left: 10px}
</style>

OOCSS的缺点

1. OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。
2. 如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。
3. 最好给每一个组件备写一份说明文档，有助于调用与维护

OOCSS的优点

1. 减少CSS代码
2. 具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系
3. 语义标记，有助于SEO
4. 更好的页面优化，更快的加载时间（因为有很多组件重用）
5. 可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件
6. 能轻松构造新的页面布局，或制作新的页面风格

CSS的scoped

文档上的style元素通常都是全局作用域的，选择器按照全局的CSS优先规则来设置。要实现局部的选择需要先选到容器元素，再用后代选择器来实现。scoped属性可以让style元素不再作用于全局，从当前style元素所在的容器开始选择后代。

总的来说，就是这个局部样式是通过PostCSS给组件中所有的DOM添加了一个独一无二的动态属性，然后通过CSS属性选择器来选择组件中的DOM。

现在的各类框架中都会有scoped属性，使css模块具有模块化性质，不会污染到其他模块。

CSS预处理器

优点

• 用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以便项目使用。
• CSS更加简洁、适应性更强，更易于代码的维护