属性模块(Attribute Modules)属性模块，或者叫 AM，它的核心是如何为你的样式定义命名空间。让我们从一个简单的例子开始，一个网格，首先用类的方式描述:
好了，然后我们用属性模块方式来做。我们有两个模块，行(rows) 和 列(columns) 。行，现在还没有变化，列有 12 列。
首先你肯定会注意到了它们的 am前缀(am-prefix)。这是 AM 核心的一部分，它确保了属性模块不会和现有属性冲突。你也可以用任意你喜欢的 ‐ 我试过用 ui- ，css- 还有其它一些，不过这个例子里面我们约定用 am-。如果 HTML 校验对你的或者你项目来说很重要，那你就选个 data-，意思也是一样的。 第二个你会注意到应该就是那些值了，什么 "1"，"4" 还是 "12" 的，看起来非常糟糕 的类名 ‐ 它们太普通所以有太高的冲突几率了。不过因为我们已经定义了我们的命名空间，它只在我们规定的地方起作用，所以我们可以随便用那些我么你觉得最简明最有意义的字符。 灵活的属性到目前为止，差别相当细微。不过因为每个模块都有它自己的命名空间，让我们拿我们的值做个不一样的尝试:
现在我们可以用命名来让我们的作用域看起来更有意义了 ‐ 一个宽是 1/3 标记让我们立刻能想起我们需要有 4 列，因为我们用的是一个 12-列 的网格。我们还为所有的列定义了一个默认样式 ‐ 也就是属性 column ，没有值的列将会被视为全宽的列。此外，我们还可以把一些重复的逻辑 (事实上列是左对齐的)移到了这个属性规则里面。 格式化所有的属性和值这是这种方法的核心优点之一。存在一个基础属性，比如 am-Button，可以并且应该定义样式。这个属性的每个扩展值则应该继承或者重写这个基础样式。 在上面的网格例子中，我们正是这样做的：标签 am-Column="1/3" 匹配到了两个属性[am-Column] 和 [am-Column~="1/3"]，因此结果就是基础样式 + 改变。它给我们提供了一种方式来实现 所有的列都是columns 而不需要用重复的类或者用 SASS 的 @extend方法。 BEM 的零类(zero-class)模式回到我们的 BEM 中的单类模式 vs 多类模式上来，AM 给了我们一个零类模式选项。比如说上面的按钮的例子，标记看起来是这样的:
通过创建一个新的属性模块 am-Button，我们可以分离出适用于所有按钮的样式，比如那些大按钮，还有那些圆角按钮。我们不仅可以自由的组合这些变化(比如 am-Button='large rounded')，我们还可以针对这些属性本身做任何的上下文覆盖:
现在不管你选什么样式的按钮，或者你选多少种样式的按钮都不是问题了，关键是，所有的按钮都会适用选择器[am-Button]，这样我们就知道我们的覆盖是有效的了。 AMCSS 工程我, 本・施瓦兹和本・史密西特已经开始为 AM 的规范而努力了。如果你想了解这项技术更多的细节，比如块(blocks),元素(elements),断点(breakpoints) & 更多的话，去看看吧，如果你有问题要问，请戳这里提出问题。 同时我们也发布了文档站点 amcss.github.io ，那有大量的例子。如果你有兴趣贡献回馈，例子，特例或者希望我们给你的 AM 库加链接的话，请移步到我们的 GitHub。 |
