深入理解CSS中的属性模块

1、深入理解css中的属性模块更多 vs 更少 - 容易比较奇特的是，虽然在标签里面放那么多类让我十分不爽，可是人们爱哈利，由于他太特么能说了。倡导的某些东西，比如说 oocss 和单一责任原则，从我自己创建的一系列日益复杂的网站来看，我可以说这的确值得对样式行为举行解耦，不过直到最近我才找到一种让我觉得惬意的方式来实现它。我原先有做过一个 bem 的版本，它强调了自立高于重用 每个新的块默认是没有样式继承的，允许组件自立开发并且可以避开打乱页面其它样式的风险。不过代价就是碎片化(fragmentation) 忽然你会发觉你有了 10 种不同的样式链接，12 种不同的蓝色，18 种差别细小的按钮样

2、式等。妮可?沙利文，oocss 的作者，去年在墨尔本做了一个超赞的演示，讲到了这个问题是有多普遍，以及怎么解决它。对我来说，我觉得可以接受的解决计划是，深化 css 的预处理机能，从而取得 bem 的自立性以及 oocss 的全都性。比如说，下面这样的: css code复制内容到剪贴板 .btn /* button styles */ .large /* global large-type modifier */ .rounded /* global rounded-border modifier */ 应当改成这样: css code复制内容到剪贴板 .btn /* button styl

3、es */ .btn-large extend %large-type; .btn-rounded extend %rounded-borders; 我胜利终结了弥漫了占位符的文件，比如满眼都是那些_typography.scss 和 _brand.scss，这不但让我有能力控制碎片化，同时还能默认保持了样式的对每个新组件的自立性。全部的东西都挺好的，至少有那么一段时光是这样。修饰符: m 是怎样破坏 bem 的只要你做关于 css 类的命名 & 维护方面的任何讨论，你一定会要看到尼古拉斯.加拉格尔的杰作"关于 html 的语义和前端架构"。

4、其中一部分特殊吸引我，他称之为修饰符的 '单类模式' vs '多类模式'。容易的说，你的 html 会有两个版本，看起来像这样: 这通过两个备选的 css 模式实现: css code复制内容到剪贴板 /* single class */ .btn, .btn-large /* base button styles */ .btn-large /* large button styles */ /* multi class */ .btn /* base button styles */ .btn-large /* large button styles */

5、这两个模式的差别在于 btn-large 是否只要它自己就足够了，还是说它需要依靠类 btn 。单类模式说可以，它看起来更容易而且可以避开有人遗忘把 btn 包含进来的状况。而且它也不嗦，协作 sass 的 extend 办法，它对 css 来说不像一个负担，只不过它有一个致命伤。上下文重写我们假设你的全部按钮都有背景色，除了你顶部导航栏那些没有。在多类模式下，全部的按钮，大的小的，圆的方的，等等之类，都会包含类 btn，所以你可以这样写: css code复制内容到剪贴板 header > nav > .btn background: none; 而在单类模式中，我们不知道哪种按

6、钮会被重写，所以你只好这样: css code复制内容到剪贴板 header > nav .btn, .btn-large, .btn-rounded background: none; 很明显，这不抱负 - 追加一个按钮变体也就意味着要检查全部地方的按钮样式重写以及添加一个新类。用属性前缀挑选器 =，可以检查你的属性是否以特别字符串开始，比如: css code复制内容到剪贴板 class='btn' /* base button styles */ .btn-large /* large button styles */ header > nav > cl

7、ass='btn' /* overrides for all buttons */ 这实现了单类模式下的容易的上下文重写，不过它还是太弱了，不是一个可以委托的挑选。最致命的是，假如另一个类在 btn-large 浮现，而且前缀挑选器还没匹配到它，那么之后的全部的都完蛋了。而且，它还没有显式的办法来指定多个变种，比如说 btn-large-rounded。我很观赏这种制造性的方式，不过还是死路一条。好吧，到这里我特么操蛋了，吐，直到忽然某天我灵光一闪。 为什么要用类?不要在意我那么挺直这种小问题，不过给我个理由先，为什么类是我们放样式信息的唯一位置？html生存守则如是说: 3.

8、2.5.7 类属性 属性，假如要指定，就必需有一个用来标志该元素属于不同类的值，该值用一组空格分隔符来表示。 而开发者在类属性中怎样用法该标志是没有任何限制的，但是鼓舞开发者用法描述该内容的属性性质的表达，而不是描述该内容所期盼展现何种结果的表达。 所以对吧，我们用类来描述"内容的属性性质"是很有道理的，但是好似我们对类需求过度了吧。一个属性就包括了全部的东西，从巨大的 bem-风格 命名，比如说 primary-nav_sub-nav-current 到像 u-texttruncate 或者 left 或者 clearfix，到 javascript 用的

9、比如说 js-whatevs，然后我们花了巨多时光来解决命名矛盾的问题，然后还希翼他们有很好的可读性。通过商定 & 习惯这是可控的，而且还有像文章前面说到的哈利的那种技术也挺实用的，不过，有一个事实是，我们全部的操作都是基于一个全局命名空间(global namespace)的，不管有多少规约都无法转变的事实。这让我们下面出场的 am 就有那么一点不同了。在我们正式开头研究它之前，我们来复习一下 css 一个鲜为人知的特点。欢迎 = 登场，奇特的挑选器从 ie7 开头，扫瞄器开头支持一种超厉害的 css 规章，叫做空格分隔属性挑选器(space-separated attrib

10、ute selector)。它可以匹配任何属性值，通过空格分隔，就像它们是类一样。下面两行的 css 是等价的: css code复制内容到剪贴板 .dat-class /* dem styles */ ; class='dat-class' /* dem styles */ ; 和 一样，它不在意 a,b 和 c 的挨次，也不在意是不是还有其它， = 挑选器也不在意。不过 = 不限于类(class)属性，这就是这种全新技术的关键。属性模块(attribute modules)属性模块，或者叫 am，它的核心是如何为你的样式定义命名空间。让我们从一个容易的例子开头，一个网格，首

11、先用类的方式描述: css code复制内容到剪贴板 full thirds thirds thirds .row /* max-width, clearfixes */ .column-1 /* 1/12th width, floated */ .column-2 /* 1/6th width, floated */ .column-3 /* 1/4th width, floated */ .column-4 /* 1/3rd width, floated */ .column-5 /* 5/12th width, floated */ /* etc */ .column-12 /* 100

12、% width, floated */ 好了，然后我们用属性模块方式来做。我们有两个模块，行(rows) 和 列(columns) 。行，现在还没有变幻，列有 12 列。 css code复制内容到剪贴板 full thirds thirds thirds am-row /* max-width, clearfixes */ am-column="1" /* 1/12th width, floated */ am-column="2" /* 1/6th width, floated */ am-column=&qu

13、ot;3" /* 1/4th width, floated */ am-column="4" /* 1/3rd width, floated */ am-column="5" /* 5/12th width, floated */ /* etc */ am-column="12" /* 100% width, floated */ 首先你绝对会注重到了它们的 am前缀(am-prefix)。这是 am 核心的一部分，它确保了属性模块不会和现有属性矛盾。你也可以用随意你喜

14、爱的 我试过用 ui- ，css- 还有其它一些，不过这个例子里面我们商定用 am-。假如 html 校验对你的或者你项目来说很重要，那你就选个 data-，意思也是一样的。其次个你会注重到应当就是那些值了，什么 "1"，"4" 还是 "12" 的，看起来十分糟糕 的类名 它们太一般所以有太高的矛盾几率了。不过由于我们已经定义了我们的命名空间，它只在我们规定的地方起作用，所以我们可以任凭用那些我么你觉得最简明最故意义的字符。灵便的属性到目前为止，差别相当细微。不过由于每个模块都有它自己的

15、命名空间，让我们拿我们的值做个不一样的尝试: css code复制内容到剪贴板 full thirds thirds thirds am-row /* max-width, clearfixes */ am-column /* 100% width, floated */ am-column="1/12" /* 1/12th width */ am-column="1/6" /* 1/6th width */ am-column="1/4" /* 1/4th width */ am-co

16、lumn="1/3" /* 1/3rd width */ am-column="5/12" /* 5/12ths width */ /* etc */ 现在我们可以用命名来让我们的作用域看起来更故意义了 一个宽是 1/3 标志让我们立即能想起我们需要有 4 列，由于我们用的是一个 12-列 的网格。我们还为全部的列定义了一个默认样式 也就是属性 column ，没有值的列将会被视为全宽的列。此外，我们还可以把一些重复的规律 (实际上列是左对齐的)移到了这个属性规章里面。格式化全部的属性和值这是这种办法的核心优点之一。存在一

17、个基础属性，比如 am-button，可以并且应当定义样式。这个属性的每个扩展值则应当继承或者重写这个基础样式。在上面的网格例子中，我们正是这样做的：标签 am-column="1/3" 匹配到了两个属性am-column 和 am-column="1/3"，因此结果就是基础样式 + 转变。它给我们提供了一种方式来实现 全部的列都是columns 而不需要用重复的类或者用 sass 的 extend办法。bem 的零类(zero-class)模式回到我们的 bem 中的单类模式 vs 多类模式上来，am 给了我们一个零类模式选项。比如说上面的按钮的例子，标志看起来是这样的: css code复制内容到剪贴板 normal button large button rounded button large rounded button am-button /* base button styles */ am-button="large" /* large button styles */ am-button=&a