计算机科学和编程中的难点之一就是命名事物，CSS 中的命名也不例外，尽管一些开发人员不认为 CSS 是一种真正的编程语言，但随着CSS 变量的加入，这种情况开始发生变化。
当您处理小型项目时，您可能不会优先考虑选择器名称或项目结构，但如果项目变得比您预期的要大，那么您将必须跟踪选择器，使用命名约定可以使这变得容易。
命名约定可以被视为CSS 中的高级概念，因此我们将简要讨论它们，然后您可以根据个人喜好和项目的规模或结构进行选择。
与本系列的传统相反，这篇文章更多的是理论而不是代码。
当你打开自己的 CSS 代码库（很长一段时间之后）或其他开发人员的代码库时，你可能会想到两件事：
如果您教授的是第一种选择，那么您很幸运，因为开发人员已经完成了一些繁重的工作，代码应该易于维护或修改。但是，如果是第二种选择，您将面临大量工作，并且应该有迹象表明您将重命名一些选择器，而遵循命名约定至少（在一定程度上）可以避免其他开发人员费力地想出有意义的选择器名称。
您可以采用以下命名约定：
BEM是Block Element Modifier的缩写，它是yandex团队在 2009 年开发的一种方法。BEM背后的理念是将用户界面划分为独立的块。
现在，您可能会想到以下问题：
在BEM中，块是独立的页面组件，可以重复使用，由classHTML 中的属性表示。
块名称应该描述其用途 而不是元素的外观或行为方式。
以下面的代码片段为例，类选择器清楚地表明其目的是通知用户：
后端开发教程 - Java、Spring Boot 实战 - msg200.com
.notification {
color: #ffffff;
background-color: #20b2aa; /* Light sea green */
}
然后您可以在 HTML 中使用它：
<div class="notification">
<!--code here-->
</div>
另一方面，BEM中的以下内容是不正确的：
.green-text {
/* code here */
}
您可以从方法论中阅读有关块的更多信息。
元素是块的组成部分，不能单独使用。你可以将元素想象成一种母子关系。
元素名称与块之间用双下划线 ( __) 分隔。
使用我们前面的.notification示例，我们可以在 HTML 中向通知添加标题，如下所示：
<div class="notification">
<h1 class="notification__header"></h1>
</div>
CSS 中的代码如下：
.notification__header {
/* code here */
}
阅读使用元素的指南。
BEM修饰符定义块元素的外观、状态或行为。
修饰符名称与块或元素名称之间由一个下划线 ( _) 分隔，并且不能单独使用，我们将简要演示这一点。
我们可能需要另一种通知变体来向用户显示警告，我们所要做的就是更新 HTML，如下所示：
<div class="notification notification_warning">
<h1 class="notification__header"></h1>
</div>
CSS 将是：
.notification_warning {
background-color: yellow;
}
感谢来自@gracesnow的评论，他们明确表示，--在大多数地方，您很可能会遇到与双连字符 ( ) 一起使用的 BEM 修饰符，因此，您可以在 HTML 中这样编写 BEM 修饰符：
<div class="notification notification--warning">
<h1 class="notification__header"></h1>
</div>
CSS：
.notification--warning {
background-color: yellow;
}
您应该知道，双连字符是 BEM 方法论中提出的另一种选择，正如我在下面的评论中指出的那样：
此外， BEM中的以下内容不正确：
<div class="notification_warning">
<h1 class="notification__header"></h1>
</div>
阅读使用修饰符的指南。
当您决定在项目中使用BEM时，文档应该是您的指南。
SMACSS代表 CSS 的可扩展和模块化架构，由Johnathan Snook创建。
SMACSS将 CSS 规则分为 5 类：
基本规则是默认的，它们可以包括属性选择器、伪类选择器、子选择器或兄弟选择器。
html {
/*code here*/
}
div:hover {
/*code here*/
}
[class^="my_selector"] {
/* code here */
}
布局规则将页面划分为多个部分，例如页眉、页脚等
看一下以下布局：
最终的 CSS 规则可以是：
#header {
/*code here*/
}
#sidebar {
/*code here*/
}
#main {
/*code here*/
}
#footer {
/*code here*/
}
模块是设计中可重复使用的模块化部分。它们可以包括：
状态规则是描述模块或布局在特定状态下的样子的方式。
状态可以是下列任意一种：
CSS 将如下所示：
.is-disabled {
cursor: not-allowed;
}
.collapsed {
visibility: hidden;
}
.expanded {
visibility: visible;
}
您应该知道这些状态可以用JavaScript切换，我们将在本系列的后面演示。
主题规则与状态规则类似，因为它们描述了模块或布局的外观。
这只是对SMACSS的介绍。如果你打算使用这本书，我鼓励你先在线阅读。
ITCSS代表倒三角 CSS，其主要理念是帮助您组织项目 CSS 文件，以便更好地处理级联、选择器和特殊性。
ITCSS是部分专有的，这意味着没有官方规范或文档，只有一个主页说明其创建者。
OOCSS是面向对象的 CSS，其目的是鼓励代码重用，并最终使样式表更易于维护。
OOCSS围绕两个主要原则：
如果您对OOCSS感兴趣，您应该阅读Smashing Magazine 上的这本入门指南。
AMCSS是CSS 属性模块的缩写，其整体思想是使用 HTML 属性及其值而不是类来设置元素的样式。
[am-Button] {
/* code here */
}
[am-Button~="primary"] {
/* code for primary button here */
}
从初学者的角度来看，我认为这是比较高级的。但如果感兴趣的话，可以访问项目页面。
另一个命名约定是SUIT CSS命名约定，它依赖于结构化的类名和有意义的连字符。我再次认为它很先进，但您可以访问项目页面了解更多信息。
附加资源（我认为对于初学者来说它很高级）：
由于：
更新：2019年12月13日
附加资源（高级）：
保持理智的 CSS 样式
合理的 CSS 样式表结构体系。
一套简单的思路，指导您构建可维护的 CSS。
任何超过 1000 行的 CSS 都会变得难以处理。你最终会遇到以下常见陷阱：
green，会发生冲突吗？”rscss试图理解所有这些。它不是一个框架。它只是一套理念，用于指导您为任何现代网站或应用程序构建可维护的 CSS。
让我们从学习组件开始。继续阅读 →
rscss © 2015+，Rico Sta. Cruz。基于MIT许可证发布。由 Rico Sta. Cruz 在贡献者（列表）
的帮助下编写并维护。
由于：
更新：2021年1月23日
文章更新后指出：在大多数地方，您可能会发现双连字符 ( --) 用作 BEM 修饰符。
由于：
我们的下一个主题也更多的是理论，它是关于编写可维护的 CSS。
文章来源：https://dev.to/ziizium/css-naming-conventions-5gd6
根据modifier 的快速入门指南：
您的示例是BEM社区中使用的替代命名方案
--alert之一，称为“Two Dashes 样式”。您可以在方法论的命名约定部分查看示例。