div+css样式表的id和class常用命名规则

使用div+css样式表的id和class时，命名规则非常重要，良好的命名规则可以提高代码的可读性、可维护性和易于理解。下面详细讲解div+css样式表的id和class常用命名规则。

命名规则

id的命名规则

• id只能出现一次，不能重复。
• id名字应该具有描述性，尽量体现出id关联元素的功能或语义。
• id名字应该简短小写，用连字符 - 分隔单词，不要用下划线 _ 或驼峰式命名法。

示例：

<div id="main-content"></div>

class的命名规则

• class是可以复用的，可以在同一个元素上使用多个class，在多个元素上使用同一个class。
• class名字应该具有描述性，尽量体现出class关联元素的功能或语义。
• class名字应该简短小写，用连字符 - 分隔单词，不要用下划线 _ 或驼峰式命名法。
• 当class名字包含多个单词时，最好使用 BEM 命名法，如 .block__element--modifier。

示例：

<div class="card card--small"></div>

常用命名规则

前缀命名法

前缀命名法是在id或class名字前面加入一个特定的前缀，以表示其类型。常见的前缀命名如下：

• #header：页面头部
• .main：主要内容区域
• .sidebar：侧边栏
• .footer：页面底部
• .btn：按钮
• .tab：选项卡
• .form：表单
• .list：列表
• 等

示例：

<div id="header"></div>
<div class="main"></div>
<div class="sidebar"></div>
<div class="footer"></div>
<button class="btn btn--primary">提交</button>

BEM命名法

BEM命名法是按照块（Block）、元素（Element）、修饰符（Modifier）的顺序进行命名的方法。块是一个独立的组件，元素是块的组成部分，修饰符是用来修饰块或元素的属性或状态的。常见的BEM命名如下：

.block
.block__element
.block__element--modifier

示例：

<div class="card">
  <h3 class="card__title"></h3>
  <div class="card__content"></div>
  <div class="card__footer card__footer--centered"></div>
</div>

以上就是div+css样式表的id和class常用命名规则的详细攻略。