为什么连字符（ - ）分隔的类名在CSS中被广泛使用

Question

虽然经历了一些网站和一些其他广泛使用的插件和框架所包含的一些CSS文件，但发现他们广泛使用连字符分隔的单词作为类名。实际上使用这样的类名有什么好处。

例如： 在jquery UI CSS中，

.ui-helper-reset {

    // CSS properties here...

}

Answer 1

可读性：

ui-helper-reset可读，
uiHelperReset无法阅读。

安全定界符：

使用 attribute selectors 之类的[class^="md-"], [class*=" md-"]来明确且安全地定位特定的类名称样式，从而阻止即：.mdSomething成为目标。

易用性：

在每个体面的文字编辑器中，如果您使用-分隔组合班级名称，您可以轻松突出显示所需部分双击，如： col - md - 3 ，并将其替换为 col- {并将其全局替换为 col- { {1}} - 3 即可。另一方面，如果您使用下划线 sm，例如 class_name_here ，如果您双击它，您最终会突出显示整个类名称，如：的 _ 即可。这样会强制您手动拖动 - 选择所需的部分。

CSS命名约定方法

您可以采用CSS命名概念，如：

• SUIT CSS
• BEM （块，元素，修饰符），
• OOCSS （面向对象的CSS）
• SMACSS （CSS的可扩展和模块化架构）
• 原子CSS
• ... 您自己的概念 CSS：）

他们都通过采用更严格的“命名事物”来帮助团队说出“同一种语言”，例如：

SUIT CSS

class_name_here

或

BEM

/* Block */
.Chat{}

/* -element (child) */
.Chat-message{} 

/* --modifier */
.Chat-message--me{}   /* Style my messages differently from other messages */

/* .is-state */
.Chat.is-active{}     /* Multiple chats - active state handled by JS */

如果您的/* block */ .chat{} /* __element (child) */ .chat__message{} /* --modifier */ .chat__message--me{} /* Style my messages differently from other messages */ .chat--js-active{} /* Multiple chats - active state handled by JS */ 是您正在查看的网页的一部分，则可以使用.chat等常规阻止类和.btn等修饰符.btn--big，否则如果您的按钮需要一个特定于聊天应用程序的更严格的样式，而不是使用<a class="btn btn--big">Post</a>和.chat__btn类。这些类名也可以进行预处理。

SCSS

即：通过使用 Sass ，CSS3 sintax的超集，您可以执行以下操作：

_{（使用SUIT CSS的示例）}

.chat__btn--big

---

结论：

在团队中采用更严格的命名格式非常重要。防止并最大限度地减少HTML遗留的遗留类，有助于代码的可重用性，可读性和加速工作流程。此外，它还会强制您以更加模块化的方式思考HTML结构 - 如组件或 atoms 。 无论你决定使用什么都取决于你 - 只是，保持一致。

Answer 2

这只是可读性的做法。通常，对于分隔符，您不能在JavaScript中包含此类变量，因为-是运算符。当您在JavaScript中需要分隔符时，您可以使用以下内容：

.ui_helper_reset //snake_case
.uiHelperReset //camelCase

通过这种方式，您可以区分出一个用于CSS，另一个用于JavaScript。这是我的观点，但也可以应用于你的答案！ ：）

Answer 3

除了更具可读性之外，他们还可以建议哪些类与其他类相关。例如，Twitter Bootstrap按钮具有类似

的类

btn
btn-danger
btn-sm

等

第二个与第一个

有关

Answer 4

只是可读性。您可以按照惯例使用任何名称。