常用的 css 命名规则(推荐)

下面我为你详细讲解“常用的 CSS 命名规则（推荐）”的完整攻略。

简介

CSS 命名规则是前端开发中非常重要的一环，一个好的命名规则可以提高代码的可读性和可维护性。在实际开发中，我们经常使用以下两种命名规则：

• BEM
• SMACSS

以下将详细介绍这两种命名规则。

BEM

BEM 是 Block（块）、Element（元素）和Modifier（修饰符）的缩写。它是一种非常流行的 CSS 命名规则，被广泛应用于大型项目中。

Block

Block 是一个独立的实体，它可以是一个按钮、一个表单、一个导航等等。Block 的命名应该是一个有意义的单词或单词组合，并使用中划线分隔开来。

例如一个按钮的 Block 为：

.btn { ... }

Element

Element 是一个 Block 的一部分，它可以是一个 Block 中任意一个组成部分，比如一个按钮的文本、图片等。Element 的命名应该是 Block 的名称加上一个双下划线 __，后跟有意义的单词或单词组合。

例如一个按钮中的文本 Element 为：

.btn__text { ... }

Modifier

Modifier 是一个 Block 或 Element 的状态或变种，它通常用于改变样式或状态。Modifier 的命名应该是 Block 或 Element 的名称加上一个双短线 --，后跟有意义的单词或单词组合。

例如一个带有橙色背景的按钮 Modifier 为：

.btn--orange { ... }

SMACSS

SMACSS 是 Scalable and Modular Architecture for CSS（可扩展和模块化 CSS 架构）的缩写。它是一套基于模块化的 CSS 命名规则，主要用于管理 CSS 中的可维护性、可扩展性和可重用性。

Base

Base 是所有 CSS 样式的基础，比如字体、颜色、布局等。Base 的命名应该比较通用，尽量避免和其他模块产生冲突。

例如一个基础字体的 Base 为：

.font-base { font-size: 14px; }

Layout

Layout 规定布局，定义不同部分的相对位置和大小，但不涉及样式细节。Layout 的命名应该以 l- 开头，后跟描述性单词或单词组合。

例如一个包含页眉的 Layout 为：

.l-header { ... }

Module

Module 是一个可重复使用的组件或模块，例如按钮、列表、表单等。Module 的命名应该以 m- 开头，后跟描述性单词或单词组合。

例如一个简单的按钮 Module 为：

.m-btn { ... }

State

State 规定一个 Module 或 Layout 的状态，例如被选中、鼠标悬停等。State 的命名应该以 is- 开头，后跟描述性单词或单词组合。

例如一个被选中的按钮 State 为：

.m-btn.is-active { ... }

Theme

Theme 标记一个区域的主题，例如网站的主题颜色。Theme 的命名应该以 theme- 开头，后跟有意义的单词或单词组合。

例如设置页面主题为黑色的命名为：

.theme-black { ... }

结语

以上就是常用的 CSS 命名规则的详细攻略。无论是 BEM 还是 SMACSS，都是非常流行和实用的命名规则，选择哪个规则需要根据实际情况来定。无论选择哪个规则，规范的命名可以有效地提高代码的可读性、可维护性和可扩展性。