可扩展、模块化CSS--样式的分类和规则(翻译文)

SMACSS is becoming one of the most useful contributions to front-end discussions in years

每一个项目代码都需要一定的组织性。如果每次都在文件末尾直接添加一个新的css样式无疑会让检索样式变得困难，并且让其他开发人员对这些文件代码功能感到困惑。所以，我们都会尽可能地让我们写出来的代码能有组织性。我希望通过阅读接下来的文章，你会在已经正在进行的工作能力中特别的关注这个问题，如果幸运的话，也许能提高你的工作能力。

你是如何进行选择使用ID选择器，class选择器，或者其他类型的选择器的？你是如何进行决定来让哪个element获得需要的样式的？又如何让你的样式代码或者说你的网站能够让人容易理解它是有组织性的？

SMACSS的核心就是分类化。通过分类css规则，在此基础上进行更好的实践。有五种种类：
1.基础
2.布局
3.模块
4.状态
5.主题

我们发现我们经常把这五种种类的样式混合写在一起。如果你想要让自己写的样式能够更好理解，无疑在这五种种类的划分规则上写是个很好的选择。
每种种类都有指导规则并且能够运用上这种规则，那么我们该如何按照这种思想去敲代码呢？

对样式进行分类，其中主要的目的是为了制造一种编程模式，这个模式能够在我们的设计中进行不断实践复制。用越少的代码进行复制，那么就越容易维护这些代码，也更一致性，当然模式必须是有利于这些实践的。

1.基础样式：是默认的，他们几乎完全单一元素选择器,但可能包括属性选择器,伪类选择器、子选择器或兄弟姐妹选择器。很多开发人员都是会有一个base.css用来修正默认的不需要样式就是一个例子，这些样式它们看起来如下所示：

html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }

2.布局样式：把页面分成几块，布局样式一般由1个或者多个模块组成。
3.模块样式：是可复用的，就是我们设计中的一个模块的概念，可以是侧边栏，弹出框，列表栏等等
4.状态样式：是指模块和布局处在什么状态，比如侧边栏的黑色状态，按钮的被点击状态等等，状态规则要描述的是模块在不同状态下的样式是如何的。
5.主题样式：一般情况下网页都有一个主色调，就像一个会议由个主题，围绕这个主题来进行其他的讨论。（以前qq空间有更换主题的功能，就是这个概念）。

命名规则

通过以上的分类呢，命名上的约定就会有利于我们快速的理解我们写的样式是属于哪个分类，并且能够理解它在整个页面的作用。在一个大型的项目中，很可能出现样式分别放在不同的文件里头，即使如此，我们依然能通过命名约定快速找到目标样式，知道样式属于哪个文件。
我很喜欢用前缀的方式去区分布局样式，状态样式和模块样式。比如说布局样式(Layout),我会用l-来做前缀。或者使用grid-也同样可以清楚的知道这是布局样式。对应状态，就使用is-,比如说is-hidden和is-collpased。所有的这些都将使得样式代码更加易读。
模块是在项目大量用到的，在模块前面加上前缀可能就会变得没必要的冗长。所以，模块样式我们直接用模块本身名字就行。比如以下代码显示：

/* Example Module */
.example { }

/* Callout Module */
.callout { }

/* Callout Module with State */
.callout.is-collapsed { }

/* Form field module */
.field { }

/* Inline layout  */
.l-inline { }

以模块为基础的元素往往会把基础的模块缩写作为前缀，比如代码例子(example)这个模块
它的题注(caption)就用(.exm-caption)。我们一看到这个名词，就能知道这个题注是和例子这个模块有关的，也能很快找到这个元素的样式。
如果一个模块是另一个模块的变种，那么前者模块应该以后者模块作为前缀，关于子元素样式的内容将会在模块样式这章细说。
命名规则将会贯彻整篇文档内容，不要认为这些规则像教条一样必须严厉去执行，你只要像平时其他一样生活规律自然而然的去执行它。
原文地址：https://smacss.com/