ID 和 Class 命名规则

学习

ID 和 Class 命名规则

2026-02-23/0/ 编辑

ID 和 Class 命名规则

基本规则

1. 必须以字母开头

/* 正确 */
#header { }
.header { }
.my-box { }

/* 错误: 不能以数字开头 */
#1box { }
.1box { }

2. 只能包含字母、数字、下划线(_),连字符(-)

/* 正确 */
#my-id { }
#my_id { }
.my-class { }
.my_class { }

/* 错误: 包含特殊字符 */
#my@id { }
.my@class { }
#my!id { }
.my!class { }
#my id { }  /* 包含空格 */
.my class { }  /* 包含空格 */

3. 区分大小写

/* 以下都是不同的选择器 */
#header { }
#Header { }
#HEADER { }

.header { }
.Header { }
.HEADER { }

4. 不能以连字符开头或结尾

/* 不推荐 */
-header { }
-header- { }
.header- { }

- .class { }
.class- { }

5. 不能使用 CSS 关键字

/* 错误: CSS 伪类关键字 */
#hover { }
#active { }
#focus { }
#visited { }

.hover { }
.active { }
.focus { }
.visited { }

命名风格

1. 连字符命名法(推荐)

使用连字符(-)分隔单词。

<div id="main-content"></div>
<div class="text-center"></div>
<div class="bg-blue"></div>
<div class="user-profile"></div>
#main-content { }
.text-center { }
.bg-blue { }
.user-profile { }

优点:

  • 易读性强
  • 符合 HTML 属性命名习惯
  • 主流 CSS 框架采用此方式

2. 下划线命名法

使用下划线(_)分隔单词。

<div id="main_content"></div>
<div class="text_center"></div>
<div class="bg_blue"></div>
#main_content { }
.text_center { }
.bg_blue { }

3. 驼峰命名法

首字母小写,后续单词首字母大写。

<div id="mainContent"></div>
<div class="textContent"></div>
#mainContent { }
.textContent { }

4. 帕斯卡命名法

每个单词首字母大写。

<div id="MainContent"></div>
<div class="TextContent"></div>
#MainContent { }
.TextContent { }

推荐命名规范

1. 使用小写字母

<!-- 推荐 -->
<div id="header"></div>
<div class="container"></div>

<!-- 不推荐 -->
<div id="Header"></div>
<div class="Container"></div>

2. 使用连字符

<!-- 推荐 -->
<div class="main-content"></div>
<div class="user-profile"></div>

<!-- 不推荐 -->
<div class="mainContent"></div>
<div class="main_content"></div>

3. 使用有意义的名称

<!-- 推荐 -->
<div class="card"></div>
<div class="button"></div>
<div class="form-group"></div>

<!-- 不推荐 -->
<div class="box1"></div>
<div class="div1"></div>
<div class="aaa"></div>

4. 避免过长的名称

<!-- 推荐 -->
<div class="user-card"></div>

<!-- 不推荐 -->
<div class="user-profile-information-card-container"></div>

BEM 命名规范

BEM(Block Element Modifier)是一种流行的 CSS 命名规范。

语法

Block__Element--Modifier
  • Block(块): 独立的实体,可复用
  • Element(元素): 块的组成部分,不能单独使用
  • Modifier(修饰符): 块或元素的状态或变体

示例

Block(块)

<div class="card">
  <div class="card__header">头部</div>
  <div class="card__body">内容</div>
  <div class="card__footer">页脚</div>
</div>
.card { }
.card__header { }
.card__body { }
.card__footer { }

Modifier(修饰符)

<!-- 修饰整个块 -->
<div class="card card--highlight">
  <div class="card__header">头部</div>
  <div class="card__body">内容</div>
</div>

<!-- 修饰元素 -->
<div class="card">
  <div class="card__header card__header--large">头部</div>
  <div class="card__body">内容</div>
</div>
.card--highlight { }
.card__header--large { }

BEM 优势

  • 模块化,避免样式冲突
  • 可读性强,易于维护
  • 避免深层嵌套

常见命名示例

页面布局

<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
#header { }
#nav { }
#main { }
#sidebar { }
#footer { }

组件

<div class="card">
  <div class="card__image">
    <img src="..." alt="..." />
  </div>
  <div class="card__content">
    <h3 class="card__title">标题</h3>
    <p class="card__text">内容</p>
    <button class="card__button card__button--primary">按钮</button>
  </div>
</div>

工具类

<div class="text-center">居中文本</div>
<div class="m-20">外边距 20px</div>
<div class="p-10">内边距 10px</div>
<div class="bg-red">红色背景</div>

禁止的命名

1. 包含空格

/* 错误 */
.my class { }
.my-id { }

2. 包含特殊字符

/* 错误 */
.my@class { }
.my&id { }
.my!class { }

3. 以数字开头

/* 错误 */
.1box { }
.2button { }
#3item { }

4. 使用 CSS 伪类名

/* 错误 */
.hover { }
.active { }
.focus { }
.visited { }

5. 中文字符

/* 不推荐 */
.标题 { }
.按钮 { }

命名建议

1. ID 用于页面结构

<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>

2. Class 用于组件和样式

<div class="card">
  <div class="card__title">标题</div>
  <div class="card__content">内容</div>
</div>

<div class="button button--primary">按钮</div>

3. 使用语义化命名

<!-- 推荐 -->
<div class="navigation"></div>
<div class="article"></div>
<div class="comment"></div>

<!-- 不推荐 -->
<div class="nav-bar"></div>
<div class="art"></div>
<div class="com"></div>

4. 保持一致性

<!-- 推荐: 使用连字符命名法 -->
<div class="main-content"></div>
<div class="user-profile"></div>
<div class="search-box"></div>

<!-- 不要混用不同风格 -->
<div class="main-content"></div>
<div class="userProfile"></div>
<div class="search-box"></div>

最佳实践

1. 使用工具检查

使用 ESLint、Stylelint 等工具检查命名规范。

2. 建立命名规范文档

在团队中建立统一的命名规范文档。

3. 代码审查

在代码审查时检查命名是否符合规范。

4. 使用命名约定

  • 布局使用 ID
  • 组件使用 Class
  • 工具类使用缩写

学习要点

  1. 基本规则: 字母开头,只包含字母、数字、下划线、连字符
  2. 命名风格: 推荐使用连字符命名法
  3. BEM 规范: Block__Element--Modifier
  4. 语义化: 使用有意义的名称
  5. 一致性: 保持命名风格一致
  6. ID vs Class: ID 用于页面结构,Class 用于组件和样式
  7. 避免: 特殊字符、数字开头、CSS 关键字
猜你喜欢