3

在 Nicolas Gallaghers关于 HTML 语义的文章中，他概述了一种以模块化方式构建 html 和 css 的方法（受 BEM 架构的影响）。他举了一个例子，我不完全理解：

/* Utility */
.u-utilityName {}

/* Component */
.ComponentName {}

/* Component modifier */
.ComponentName--modifierName {}

/* Component descendant */
.ComponentName-descendant {}

/* Component descendant modifier */
.ComponentName-descendant--modifierName {}

/* Component state (scoped to component) */
.ComponentName.is-stateOfComponent {}
  • 首先，我不明白的是：实用程序和组件之间有什么区别？
  • 这两者之间的符号差异从何而来（实用程序类名以“u-”为前缀）？
  • 最后的; 状态和修饰符有什么区别（它们都有单独的符号）？

他在他的文章中没有深入解释这一点，我仍然想了解。所以我希望有人能回答这个问题。

4

2 回答 2

2

实用程序类本质上是表示类，因为它修改了元素的一个表示方面。这些很有用，因为它们具有广泛的适用性。您可以将实用程序类应用于各种组件。由于它不是特定于特定组件的，因此没有必要将其创建为组件修饰符。

状态类与修饰类稍有不同，后者通常通过 JavaScript 添加、更改或删除状态。因此，状态类只是一种约定，有助于保持样式表和脚本之间需要共享哪些类。您通常不希望在脚本中访问修饰符类，因为这开始不必要地将它们耦合到特定的演示文稿或组件。

于 2014-03-21T13:23:35.417 回答
0

好的，所以我查看了他的源代码，看起来实用程序是“做”某事的类，而不是“成为”某事。因此，实用程序类似于“.u-textAlignLeft”，而组件类似于“.EnormousHeader”。

然而，这提出了一个新问题：组件状态和实用程序之间的确切区别是什么？如果我必须定义它，那将是一个实用程序“做”某事（.u-textLeft）和一个状态“做”一些只在其组件范围内有意义的事情（例如.is-Disabled）。

希望这篇散文对大家有用！

于 2014-03-21T13:05:44.037 回答