Html Nicolas Gallaghers'；中的实用程序和组件之间有什么区别；前端方法学？

在Nicolas Gallaghers一书中，他概述了一种以模块化方式构建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-”）
• 最后；状态和修饰符之间有什么区别（它们都有单独的符号）

---

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

好的，我看了他的源代码，看起来实用程序是“做”某事的类，而不是“做”某事的类。因此，一个实用程序应该类似于“.u-textAlignLeft”，一个组件应该类似于“.NormousHeader”

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

---

希望这篇闲话对任何人都有用

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

---

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

或者实用程序与java应用程序设计比webdesign更相关（如在常规html/css网站开发中）？谢谢！您是否同意我对组件状态和实用程序之间的区别的解释（尽管它有点模糊），我走对了吗？或者在其组件范围之外定义一个状态也有意义吗？（在这种情况下，公用事业和国家之间的区别在我看来会更小）我会说，国家不会传达任何特定的风格/表现。比如说，如果有几个组件具有“处于活动状态”，那么每个组件都可能为此设置自己的样式。实用程序类在使用它们的任何地方都具有一致的含义。由于状态类不具有特定的表示意义，所以在通过脚本更改状态类时，与表示类相比，您可以更好地分离关注点；一个state类不会通过它在HTML中的名称来传递表示意义，但是它仍然可以通过css将表示规则附加到它上（比如在.is disabled的灰显禁用按钮中），对吗？就像.u-paintedRed和.is-completedred之间的区别？这是我的理解。最后一个问题；当定义一个状态的作用域为其父级时，您是否应该始终定义该状态（因为在Nicolas的示例中，它是这样定义的，但没有解释原因）？