Question

在Nicolas Gallaghers＆＃39; write up about HTML semantics，他概述了一种以模块化方式构建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 - ”）？
最后;状态和修饰符之间有什么区别（它们都有单独的符号）？

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

Answer 1

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

状态类与修饰符类略有不同，因为通常通过JavaScript添加，更改或删除状态。因此，状态类只是一种约定，可以帮助确定样式表和脚本之间需要共享的类。您通常不希望在脚本中访问修饰符类，因为这会开始不必要地将它们耦合到特定的表示或组件。

Answer 2

好的，所以我查看了他的源代码，看起来实用工具是＆＃34;做＆＃34;什么，而不是＆＃34;是＆＃34;一些东西。因此，实用程序将类似于＆＃34; .u-textAlignLeft＆＃34;，以及类似于＆＃34; .EnormousHeader＆＃34;的组件。

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

希望这种散漫对任何人都有用！

Nicolas Gallaghers＆＃39;中的实用程序和组件之间有什么区别？前端方法？

2 个答案: