html - Nicolas Gallaghers 的前端方法中的实用程序和组件有什么区别？

Question

在 Nicolas Gallaghers 的 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 添加、更改或删除的。所以状态类只是一个约定，有助于明确哪些类需要在样式表和脚本之间共享。您通常不想在脚本中访问修改器类，因为这开始不必要地将它们耦合到特定的表示或组件。