CSS || 功能分类

CSS模块化规则

CSS模块的设计原则：

1. 可重用

2. 可维护

3. 可扩展

1 常见的问题

1.1 基于父组件直接修改样式

.widget {  
  background: yellow;  
  border: 1px solid black;  
  color: black;  
  width: 50%;  
}  
 
#sidebar .widget {  
  width: 200px;  
}  
 
body.homepage .widget {  
  background: white;  
}

• 应用其余编程语言中类的概念，直接修改父组件的样式相当于修改类的定义，违反了开/闭原则：对扩展开放；对修改闭合

1.2 使用复杂的选择器

#main-nav ul li ul li div { }  
#content article h1:first-child { }  
#sidebar > div > h3 + p { }

• 依靠选择器与HTML元素标签组合，HTML代码很干净，但是CSS却变得凌乱，并且增加了CSS与HTML结构的耦合

1.3 一个CSS选择器做的事情太多

.widget {  
  position: absolute;  
  top: 20px;  
  left: 20px;  
  background-color: red;  
  font-size: 1.5em;  
  text-transform: uppercase;  
}

• .widget选择器同时设置了组件的位置、外观。组件的外观可以通用，但是位置却不能。

1.4 总结

出现上述问题的愿意：一个class承担的样式太多。

项目的整体复杂度是一定的，但各个模块的复杂度不同。

• 使用复杂的选择器、一个class承担许多功能，可以简化开发的流程；但是维护与重用却很麻烦

• 模块划分会增加CSS开发的复杂度，但是却同时降低CSS维护与重用的麻烦

2 取舍

1. CSS中尽可能少的包含HTML结构：少使用嵌套层次深的选择器；

2. CSS只定义模块外观样式，在HTML页面上进行调用：更少的CSS被更多的HTML结构调用

3. 对于抽象的样式可以定义在容器中

3 推荐

3.1 专注

使用类选择器定义元素样式，将class应用在元素上即可；不要写嵌套深的CSS选择器

/* Grenade */ 
#main-nav ul li ul { }  
 
/* Sniper Rifle */ 
.subnav { }

3.2 模块化

一个组织结构良好的组件层可以解决HTML与CSS的耦合关系。CSS定义组件的外观，不定义位置和布局。在使用background、font等简写属性时，注意其中关于位置和布局的样式（background-position等）

布局和位置由单独的布局类或单独容器元素构成。

3.3 命名空间与修饰符

对组件每个子元素都使用命名空间，每个元素在不同语境使用修饰符扩展。降低现有类名冲突

使用BEM（Block__Element--Modifier）规则进行命名。

.btn
.btn__item
.btn__item--info
.btn__item--danger

3.4 将CSS组织成逻辑结构

在《SMACSS》中提到，CSS可以被分成4中不同的类：基础base、布局layout、模块modules和状态state

• 基础base：包括复位原则和元素的初始值；

• 布局layout：对整个站点内元素进行定位（类似网格系统）

• 模块modules：可重用的视觉元素

• 状态state：不同状态触发的样式（通过JavaScript实现开启和关闭）

3.5 根据样式与风格使用类名

在Web前端中，class类名的作用有四种：HTML样式、JavaScript的hook、功能检测和自动化测试

为区别不同功能的class，建议为其增加前缀：js-用于JavaScript操作