专栏名称: OSC开源社区

OSChina 开源中国官方微信账号

探究 CSS 架构的正确使用姿势

OSC开源社区 · 公众号 · 程序员 · 2016-11-09 08:38

正文

#长按上图识别二维码，参与OSC源创会年终盛典#

英文原文：Thoughtful CSS Architecture

链接：http://www.zcfy.cc/original/thoughtful-css-architecture-1568.html

译者：Tocy, imqipan, xufuji456, 混元归一, Tony

你曾经是否做过一个CSS项目，之后它变得一团混乱？我们很难追踪到是什么样式影响了HTML：一次小小的修复解决了一个问题，但又带来了三个或更多其他的问题，并且小规模的CSS改变都会打破 JavaScript 的功能。我们都遇到过这样的情况，然而，有些问题在项目开始构建的时候，是可以通过精心的规划来规避的。下面让我们来聊聊 CSS 架构吧！

精细架构的好处

精细架构的首要好处就是可扩展性。当一个项目的范围变宽或是项目的规模变大时，可扩展性将变得具有挑战性，CSS 亦不例外。层叠与全局特性使得 CSS 强大，但也使之开发时候变得脆弱。当你发现你改了某行CSS代码修复某个东西而破坏其他代码的便利性时，你或许想头撞桌子。精细考虑能提供一下好处：

● 更少的样式规则

● 更少的样式冲突

● 长期的可维护性

● 新成员更快的适应性

● 团队成员之间更易于协助

● 项目交接更加顺利

CSS 规则的分类

Jonathan Snook 在他的《 CSS 可扩展和模块化体系结构（SMACSS）》一书中普及了将CSS规则分组类别的概念。将我们的规则结构化成这些定义好的类别有助于我们和我们的团队更好地了解每个样式的功能。主要参考SMACSS中推荐的规则集，我使用七种类别的规则集，以确保每种风格可以放到这些类别之一中。

● Base styles（基本样式）

● Objects（对象）

● Components（组件）

● State（状态）

● Themes（主题）

● Utilities（实用程序）

● Javascript hooks（JS挂钩）

理解这些类别及其功能将有助于给你所使用的样式赋予更高级含义。

基本样式

基本样式是为默认元素而创建，是跨站点之间的默认样式。一般而言，这些覆盖到字体、盒子大小及其为兼容其他浏览器而规范化的一些等。一个常见的错误就是将基本样式定义的过于繁重且创建了一些实际不需要的默认样式。你是否有需要全局性的移除无序列表的项目符号呢，或者其他特定情况？

对象

对象就是专注于结构与布局方面的规则。装饰性的样式是不允许的。对象类的概念由Nicole Sullivan推广，旨在重新使用常用的结构或布局模式。在你的设计中发现结构模式，然后创建对象类，使之能在多个组件或站点的选择中被使用。通过将这些样式融入到类，你就可以避免冗余，以此大大缩小CSS的体积。不论自己写的还是从某框架中借来的表格系统，都融入到类的范畴吧！

组件

组件是各自不相关，自身包含的一块UI。它是原子设计的面包和黄油，将占据大部分的样式。组件可以小到一个按钮，大到一个幻灯片（carousel）。构建强大组件的关键在于须独立于其他组件且自身包含。可以将某个组件放到页面的任何地方，而它将保持原有的设计及其结构。

状态

状态类是一个工具类，用来修改某组件的状态。试想手风琴(Accorditions)被打开或是合并的状态，这反应其启动与禁用的状态，或是元素被隐藏或是显示的状态。通常是用JavaScript来添加/删除状态。与其可用JavaScript来操作状态，你可以更新一个状态类，允许其样式决定每个状态的显示。

主题

主题类只是简单的改变特定颜色、主题或其他进行装饰。主题类可以用于修改整个页面，也可以只是单一的组件。主题并非用于所有项目，但当你需要它是却是非常管用。

公共程序

公共程序类是应用于一个特殊样式规则的单一用途助手。它们可以用于调整间距、增大字体、文字居中、清空调整、隐藏等等。公共类可以帮助你简化布局调整，比如在组件之间增加空间或者清空浮板。它们也可以用来改变已有的组件，而不需要创建一个新的组件实例。

JavaScript钩子

只要有可能，在你的JavaScript和样式之间任何依赖解耦都不是问题。在样式和DOm操作的同时使用JavaScript类名会引起阻塞，让CSS重构出现问题，JavaScript依赖没有彻底清除。相反，使用类完全取决于JavaScript钩子。

命名类

当给你的类命名时，要确定你的命名足够长，以便于辨别（.pullquote 不等于 .pq），但是没必要过长（.nav 而不需要 .navigation）。类名的可读性会影响整个团队成员，你必须有效帮助他们理解你所要表达的思想。

创建描述，在编写CSS时，写出有意义的名称是其中一个最头痛的问题，但如果考虑周全将会帮助很大。空间并不允许对事物命名进行深入处理，但是我们还有更多受欢迎的帖子，欢迎查看：Ethan Muller编著的Naming CSS Stuff is Really hard.

BEM命名约定

一个非常流行并且超级有用的CSS命名约定是Yandex(俄罗斯最流行的搜索引擎)开发的BEM（块元素修饰符）.

该命名约定非常简单，如下：

[块]_[元素]-[修饰符]

你也许会纠结于使用冗长的类名，在你的项目中使用BEM的价值就是快速消除这种担忧。

下面是使用BEM约定命名组件类名的例子：

在你的项目中使用BEM命名约定，有如下三个主要的好处：

● 易读：使用清晰的方式描述元素的类名，将使他人更容易阅读你的HTML或者CSS文件。

● 自我描述：使用分层命名方式命名元素的类名，组件将拥有清晰的层次结构,易于知晓某个元素属于哪个组件。.

● 特异性：通常可能会过多添加一个类到你的组件中的每一个元素，如果遵循BEM约定，你能够保证你的每一个选择器的特异性低，并且覆盖更直接。

命名空间

另一个最佳实践是：当命名你的类时使用命名空间作为前缀，命名空间选择的依据是我们前边描述的类的类别。这会在你的命名前加入一些字符，但是这样做的优点在于能够立即区分每个类名的使用目的，而这在你的HTML或者stylesheets中是非常重要的.下面是我使用的命名空间：

● Objects:.o-

● Components:.c-

● State:.is-OR.has-

● Theme:.t-

● Utilities:.u-

● Javascript hooks:.js-

更多关于使用命名空间优点的内容，请查阅Harry Roberts的相关文章

代码风格

像所有代码一样，重要的是你的CSS项目使用一致的编码风格，这包括很多对于空格键、缩进、命名规则、注释等的规则。你可以从Google、Github或Nicolas Gallagher 找到合理的指导。使用他们或创建你自己类似的一套准则。

代码组织

为了获得最优的代码组织，你应该使用预处理工具（Sass, Less, Stylus）或者后处理工具（PostCSS）来编译代码。这样做有很多优点，例如支持变量、函数、mixin、导入和嵌套等的功能。这些功能将使你实现比单独使用CSS更有条理的架构。

使用导入，你可以将样式划分成多个有意义的文件。

对于任何需要使用多次的值，使用变量命名。给变量名称添加前缀，更有助于识别其用途，同时使代码自动完成功能更有用。

对于性质上是全局的变量，应该存储在专用变量文件中，但是其他变量只能在单个组件中使用，并且应该在使用它们的文件中定义。在Sass中，变量可以包含在局部作用域内，而这个作用域可以位于嵌套的规则集结构体中。

源顺序

因为CSS的级联的性质，您的样式顺序很重要。如果你不是专门了解过你的导入源是如何排序，你会发经常现自己反对使用级联。

最近，Harry Roberts发布了一篇名为“一个明智的方法来排序您的样式（a sensible method for ordering your styles）”，他称之为ITCSS（Inverted Triangle CSS），目的是防止命名空间冲突、特异性问题、泄漏风格和疏忽的回归（参见他的幻灯片in-depth slides）。这个概念非常简单：从具有最广泛的覆盖面和最低特异性的那些样式开始排列您的设置和规则，并以最窄的覆盖面和最高的特异性结束。这意味着您的变量定义和裸元素规则将始终在开头，而您的应用程序类和IE-hack将位于结尾。

Harry定义了七个分，我们的文件应该匹配之并按照以下顺序进行排序：

● Settings（设置项）: 变量和其他设置

● Tools（工具项）: 自定义函数和mixins

● Generic（通用项）: Font-face, box-sizing, 正规化等

● Elements（元素项）: 默认的诸如样式头和链接的裸元素

● Objects（对象）: 布局和结构类

● Components（组件）: 独立的组件

● Trumps: 通用机制和一些相对其他一切都是最后王牌的规则

这篇文章只是对一个深入的广泛的话题的介绍，希望它能激发你对 CSS 项目组织和设计方式的思考。

福利我为开源中国公众号出谋划策

为感谢 OSCer 们对 开源中国公众号的支持，我们联合华章图书为大家送福利啦。

在 11.07-11.11 日期间，在《送福利啦！我为开源中国公众号出谋划策》文章或公众号后台留言，为开源中国公众号内容出谋划策。我们从中选取 6 名用户送出以下图书。热情的 OSCer 们赶紧到后台留言吧。