CSS代码重构与优化之路

SMACSS

SMACSS是什么呢，它的全称是Scalable and Modular Architecture for CSS。简单说就是可扩展和模块化的CSS架构。

SMACSS将样式分成5种类型：Base，Layout，Module，State，Theme，我们简单来说说每一种类型分别指什么。

1、Base

基础样式表，定义了基本的样式，我们平时写CSS比如reset.css就是属于基础样式表，另外我认为清除浮动，一些动画也可以归类为基础样式。

2、Layout

布局样式，用于实现网页的基本布局，搭起整个网页的基本骨架。

3、Module

网页中不同的区域有这个不同的功能，这些功能是相对独立的，我们可以称其为模块。模块是独立的，可重用的组件，它们不依赖于布局组件，可以安全的删除修改而不影响其他模块。

4、State

状态样式，通常和js一起配合使用，表示某个组件或功能不同的状态，比如菜单选中状态，按钮不可用状态等。

关于状态样式，我个人觉得要分情况进行讨论：

（1）不同组件的同一状态的样式是一样的，比如头部的导航菜单的选中状态样式和侧栏的菜单选中状态样式是一样的，我认为这部分状态样式可以归类为State

（2）不同组件的统一状态的样式是不一样的，即两个地方的菜单虽然都是选中状态，但是他们却又不同的选中样式，这部分样式不应该被认为是State类型，而是应该放在其组件对应的Module中。

5、Theme

皮肤样式，对于可更换皮肤的站点来说，这个是很有必要的，分离了结构和皮肤，根据不同的皮肤应用不同的样式文件。

BEM

BEM是Block，Element，Modifier的缩写。下面分别来介绍一下这三个概念：

（1）Block：在BEM的理论中，一个网页是由block组成的，比如头部是个block，内容是block，logo也是block，一个block可能由几个子block组成。

（2）Element：element是block的一部分，具有某种功能，element依赖于block，比如在logo中，img是logo的一个element，在菜单中，菜单项是菜单的一个element

（3）Modifier：modifier是用来修饰block或者element的，它表示block或者element在外观或行为上的改变

我们通过BEM命名法写样式如下：

.block{}

.block-element{}

.block-modifier{}

.block-element-modifier{}

BEM将页面解析为block和element，然后根据不同的状态使用modifier来设置样式。

我对BEM的思想理解可能不到位，对BEM的看法主要是由两点：

（1）页面CSS模块化，每个block就是一个模块，模块间相互独立

（2）多级的class命名，避免选择器的嵌套结构

关于CSS方法论

上面提到的这些CSS方法论，大家看了就会发现，它们其实有很多思想是相同的，比如：

1、选择器的嵌套的优化

2、CSS代码模块化

3、抽象CSS代码

…

这些方法论，我们学习的时候，最重要的是去理解其思想，不一定非得照搬它的实现形式，多种方法结合使用。

我自己总结的方法

谈了这么多，下面来说说我自己总结的写CSS代码的一些关键点。

1、写代码之前：从PSD文件出发

当我们拿到设计师给的PSD时，首先不要急于写CSS代码，首先对整个页面进行分析，主要关注点是下面几个：

（1）页面分成了几个模块，哪些模块是公用的，常见的比如头部和底部，还有一些菜单栏等等

（2）分析每一个模块都有什么样式，提取出公用的样式，注意公用样式是全局公用（整个页面公用）还是局部公用（模块内公用），公用样式包括公用的状态样式，比如公用的选中状态，禁用状态等等。

2、开始写代码

根据对PSD文件的分析，我们就可以开始着手写代码，我比较推荐SMACSS将样式分成不同类型的做法：

（1）第一步是搭好页面的骨架，也就是base样式，layout样式。

（2）第二步就是依次实现不同的模块，在这里我推荐BEM的命名思想，但是可以嵌套一到两层的选择器结构

3、优化代码

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!