问为什么有些HTML/CSS设计人员在HTML中使类名复杂化？

EN

我想我也许能对这里的事情有所了解。

在过去的十年中，CSS中的命名约定已经成为web开发的一个重要部分，目的是防止您的样式在应用程序中“泄漏”，并确保您不必编写特异性过熟的CSS。

通过遵循命名约定，它应该意味着编写元素特有的样式，而不是对抗全局样式。边界元可能是最常用的约定，但它可能会导致大量的类名，并且在何时知道如何将什么定义为“块”时会变得很棘手。

如今，随着web组件的出现，希望这些问题中的很多都会消失。我建议阅读css-evolution-from-css-sass-bem-css-modules-to-styled-components，以获得一个很好的理解为什么CSS看起来像今天的方式，并得到一个了解的方向是可能的。

很高兴认识HTML类名不区分大小写。。因此，虽然您可能在类名中看到pascalCasing，但通常类名应该是kebab-case，即.global-header，而不是.globalHeader。

为了给@stwilz加上一个简短的答案：

web开发中最可怕的任务之一是重构CSS。重构意味着有时需要拆分或加入某些作用域的规则。

CSS没有目的驱动的语义，这意味着规则都是关于结果的，没有办法传达意义。也没有范围界定，所有规则都是全球性的。SASS在某种程度上是有帮助的。但是，在很大程度上，您需要使用非常具有描述性的类名，并使用某种继承标记(如您看到的--)，以便：

1)描述性:当您在一年后重新检查您的代码时，您可以知道为什么在这个世界上存在该规则，它适用于哪里，以及如何移动、删除或拆分它，以及它可能会产生什么影响。

2)模块性:为了防止特定于范围的规则泄漏到全局的，甚至更麻烦的规则泄漏到内部元素，您通常会在该作用域中的所有规则前缀相同。现在，在您的设计中，您可能会决定一个作用域需要一个-sub和一个-sub-sub作用域。设想一下，如果你愿意的话，一种编程语言，其中所有的变量名都是全局的。你肯定会用类似的策略来命名他们..。

一些设计师创建了自己的框架--有点像引导https://getbootstrap.com/ --我们使用这个框架来更快地构建网站，例如:当我们编写

<div class="col-md-9 hidden-xs fixed-top text-center"></div>

在上面的类中，我们将div宽度从屏幕宽度变为9/12，隐藏在手机中，固定在屏幕顶部，最后使文本对齐中心。

因此，一些设计师创建他们的类并使用它们，所以类看起来很复杂，但是它允许他们编写更少的CSS或者设计一个完整的网站，而不需要只使用他们在框架中拥有的类来编写css。

目前最好的框架是引导，因为它的类名很容易学习，而且它有很多特性，但是随着时间的推移，您可能会创建自己的框架，并创建特定您需要的类。

我希望这个答案能帮到你，玩得开心:)