深层次了解CSS中的特性控制模块

更多 vs 更少 - 简易较为

奇异的是，尽管在标识里边放那末多类让我十分不爽，但是人们爱哈利，由于他太特么能说了。倡导的一些物品，例如说 OOCSS 和单1义务标准，从我自身建立的1系列日趋繁杂的网站看来，我能够说这的确值得对款式个人行为开展解耦，但是直至近期我才寻找1种让我感觉令人满意的方法来完成它。

我本来有做过1个 BEM 的版本号，它强调了单独高于重用 ‐ 每一个新的块默认设置是沒有款式承继的，容许组件单独开发设计而且能够防止打乱网页页面其它款式的风险性。但是成本便是碎片化(fragmentation) ‐ 突然你会发现你有了 10 种不一样的款式连接，12 种不一样的蓝色，18 种区别细微的按钮款式等。妮可?沙利文，OOCSS 的作者，上年在墨尔本做了1个超赞的演试，讲到了这个难题是有多广泛，和如何处理它。

对我来讲，我感觉能够接纳的处理计划方案是，深层次 CSS 的预解决性能，从而获得 BEM 的单独性和 OOCSS 的1致性。例如说，下面这样的:
 

应当改为这样:
 

我取得成功结束了填满了占位符的文档，例如满眼全是那些_typography.scss 和 _brand.scss，这不仅让我有工作能力操纵碎片化，另外还能默认设置维持了款式的对每一个新组件的单独性。全部的物品都挺好的，至少有那末1段時间是这样。

装饰符: M 是如何破坏 BEM 的

要是你做有关 CSS 类的取名 & 维护保养层面的任何科学研究，你1定会要看到尼古拉斯.加拉格尔的杰作"有关 HTML 的词义和前端开发构架"。在其中1一部分非常吸引住我，他称之为装饰符的 '单类方式' vs '多类方式'。简易的说，你的 HTML 会有两个版本号，看起来像这样:
 
这根据两个备选的 CSS 方式完成:

 

这两个方式的区别在于 btn--large 是不是要是它自身就充足了，還是说它必须依靠类 btn 。单类方式说”能够”，它看起来更简易并且能够防止有人忘掉把 btn 包括进来的状况。并且它也不唠叨，相互配合 SASS 的 @extend 方式，它对 CSS 来讲不像1个压力，只但是它有1个致命伤。

左右文重新写过

大家假定你的全部按钮都有情况色，除你顶部导航栏栏那些沒有。在多类方式下，全部的按钮，大的小的，圆的方的，这些之类，都会包括类 btn，因此你能够这样写:
 

而在单类方式中，大家不知道道哪样按钮会被重新写过，因此你只好这样:

 

很明显，这没理想 - 追加1个按钮变体也就代表着要查验全部地区的按钮款式重新写过和加上1个新类。用特性前缀挑选器 ^=，能够查验你的特性是不是以独特标识符串开始，例如:
 

这完成了单类方式下的简易的左右文重新写过，但是它還是太弱了，并不是1个能够信赖的挑选。最致命的是，假如另外一个类在 btn--large 出現，并且前缀挑选器还没配对到它，那末以后的全部的都完蛋了。并且，它都还没显式的方式来特定好几个变种，例如说 btn--large--rounded。

我很赏析这类造就性的方法，但是還是死胡同1条。好吧，到这里我特么操蛋了，吐，直至突然某天我灵光1闪。
 
为何要用类?

不必在乎我那末立即这类小难题，但是给我个理由先，为何类是大家放款式信息内容的唯1部位？HTML存活守则如是说:

    3.2.5.7 类特性

    特性，假如要特定，就务必有1个用来标识该元素属于不一样类的值，该值用1组空格隔开符来表明。

    而开发设计者在类特性中如何应用该标识是沒有任何限定的，可是激励开发设计者应用叙述该內容的特性特性的表述，而并不是叙述该內容所希望展现何种結果的表述。

因此对吧，大家用类来叙述"內容的特性特性"是很有道理的，可是仿佛大家对类要求过多了吧。1个特性就包含了全部的物品，从极大的 BEM-设计风格 取名，例如说 primary-nav__sub-nav--current 到像 u-textTruncate 或 left 或 clearfix，到 JavaScript 用的例如说 js-whatevs，随后大家花了巨多時间来处理取名矛盾的难题，随后还期待她们有很好的可读性。

根据承诺 & 习惯性这是可控性的，并且也有像文章内容前面说到的哈利的那种技术性也挺有效的，但是，有1个客观事实是，大家全部的实际操作全是根据1个全局性取名室内空间(global namespace)的，无论有是多少规约都没法更改的客观事实。这让大家下面登场的 AM 就有那末1点不一样了。

在大家宣布刚开始探讨它以前，大家来备考1下 CSS 1个不为人知的特性。

欢迎 ~= 出场，奇异的挑选器

从 IE7 刚开始，访问器刚开始适用1种超强大的 CSS 标准，叫做空格隔开特性挑选器(space-separated attribute selector)。它能够配对任何特性值，根据空格隔开，就像它们是类1样。下面两行的 CSS 是等额的的:
 

和 <div class='a b c'> 1样，它不在乎 a,b 和 c 的次序，也不在乎是否也有其它， ~= 挑选器也不在乎。但是 ~= 不限于类(class)特性，这便是这类全新升级技术性的重要。

特性控制模块(Attribute Modules)

特性控制模块，或叫 AM，它的关键是怎样为你的款式界定取名室内空间。让大家从1个简易的事例刚开始，1个网格，最先用类的方法叙述:
 

好了，随后大家用特性控制模块方法来做。大家有两个控制模块，行(rows) 和 列(columns) 。行，如今都还没转变，列有 12 列。
 

最先你毫无疑问会留意到了它们的 am前缀(am-prefix)。这是 AM 关键的1一部分，它保证了特性控制模块不容易和现有特性矛盾。你还可以用随意你喜爱的 ‐ 我试过用 ui- ，css- 也有其它1些，但是这个事例里边大家承诺用 am-。假如 HTML 校检对你的或你新项目来讲很关键，那你就选个 data-，意思也是1样的。

第2个你会留意到应当便是那些值了，甚么 "1"，"4" 還是 "12" 的，看起来十分不尽人意 的类名 ‐ 它们太一般因此有太高的矛盾概率了。但是由于大家早已界定了大家的取名室内空间，它只在大家要求的地区起功效，因此大家能够随意用那些我么你感觉最简要最成心义的标识符。

灵便的特性

到现阶段为止，区别非常微小。但是由于每一个控制模块都有它自身的取名室内空间，让大家拿大家的值做个不1样的尝试:
 

如今大家能够用取名来让大家的功效域看起来更成心义了 ‐ 1个宽是 1/3 标识让大家马上能想起大家必须有 4 列，由于大家用的是1个 12-列 的网格。大家还为全部的列界定了1个默认设置款式 ‐ 也便是特性 column ，沒有值的列可能被视作全宽的列。另外，大家还能够把1些反复的逻辑性 (客观事实上列是左对齐的)移到了这个特性标准里边。

文件格式化全部的特性和值

这是这类方式的关键优势之1。存在1个基本特性，例如 am-Button，能够而且应当界定款式。这个特性的每一个拓展值则应当承继或重新写过这个基本款式。

在上面的网格事例中，大家更是这样做的：标识 am-Column="1/3" 配对到了两个特性[am-Column] 和 [am-Column~="1/3"]，因而結果便是基本款式 + 更改。它给大家出示了1种方法来完成 全部的列全是columns 而不必须用反复的类或用 SASS 的 @extend方式。

BEM 的零类(zero-class)方式

返回大家的 BEM 中的单类方式 vs 多类方式上来，AM 给了大家1个零类方式选项。例如说上面的按钮的事例，标识看起来是这样的:
 

根据建立1个新的特性控制模块 am-Button，大家能够分离出来出可用于全部按钮的款式，例如那些大按钮，也有那些圆角按钮。大家不但能够随意的组成这些转变(例如 am-Button='large rounded')，大家还能够对于这些特性自身做任何的左右文遮盖:
 
如今无论你选甚么款式的按钮，或你选是多少种款式的按钮都并不是难题了，重要是，全部的按钮都会可用挑选器[am-Button]，这样大家就了解大家的遮盖是合理的了。