Question

我正在努力消化尼古拉斯·加拉格尔的这篇文章：About HTML semantics and front-end architecture

我正在努力理解“The”多级“模式”标题下的这一段......

我发现它是一种更具伸缩性的模式。例如，采用基本btn组件并添加另外5种类型的按钮和3种其他尺寸。使用“多类”模式，您最终会得到9个可以混合匹配的类。使用“单一类”模式最终会有24个类。

当他说采用 btn 组件并添加另外5种类型的按钮时，他的意思是作为独立的类，例如 btn-danger ， btn -primary 等。如果是这样，在3个附加尺寸的上下文中？

如果有人可以解释他是如何使用“多级”模式和24个使用“单级”模式的课程来解释他是如何获得帮助的。

很抱歉，如果我遗漏了一些明显的东西，或者未能掌握一个简单的概念。

感谢您的帮助！

Answer 1

我认为他所得到的是，在“单班”计划下，你需要为每种可能的组合提供“组合”课程。因此，按照他的“基本btn组件并添加另外5种按钮和3种额外尺寸”的例子：

多级（9）

.btn-大

<a href="http://google.com/" class="btn btn-primary btn-large">
    Example multi-class link
</a>

单班（24）

.btn预警-大

<a href="http://google.com/" class="btn-primary-large">
    Example single-class link
</a>

我认为这很明显为什么第一种方法更灵活，更易于维护。

Answer 2

可能更好的方法是利用sass的力量并做到

.whatever-name {
    @extend %btn;
    @extend %btn-primary;
    @extend %btn-large;
}