CSS的class与id常用的命名规则

CSS的class和id是我们在网页开发中经常需要用到的命名规则。良好的命名规范不仅可以提高代码可读性和维护性，而且对SEO优化也有很大的帮助。下面是CSS的class和id常用的命名规则的完整攻略：

一、class命名规则

1.1 使用短横线-分隔每个单词

在定义class名称时，使用短横线-来分隔每个单词，例如：header-title、nav-bar、list-item等，这样可以提高可读性，避免单词之间的混淆。

/* 使用短横线-来分隔每个单词 */
.header-title {
  font-size: 24px;
  font-weight: bold;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-item {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}

1.2 以模块作为命名空间

在项目开发中，类名可能会有重复，为了避免冲突，可以以模块作为命名空间，例如：header-title、footer-logo等，这样可以更好的区分不同模块，避免类名冲突。

/* 使用模块作为命名空间 */
.header .header-title {
  font-size: 24px;
  font-weight: bold;
}

.footer .footer-logo {
  width: 100px;
  height: 50px;
}

1.3 使用语义化名称

在定义class名称时，尽量使用语义化的名称，例如：banner、logo、menu、button等，这样可以更好的描述元素的作用，增强代码的可读性。

1.4 避免缩写

在定义class名称时，不要使用缩写，例如：hd、ft、btn等，尽量使用完整的单词，这样可以提高代码的可读性。

二、id命名规则

2.1 不要滥用id选择器

在定义元素id时，不要滥用id选择器，在页面上尽可能的少使用id选择器，因为id选择器的优先级很高，容易造成样式污染和冲突。

2.2 使用驼峰命名法

在定义id名称时，使用驼峰命名法，例如：headerTitle、profileInfo等，便于识别单词，提高可读性。

2.3 不要使用数字开头

在定义id名称时，不要使用数字开头，因为HTML5规范不允许使用数字开头的id名称。

2.4 以模块作为命名空间

和class命名规则一样，可以以模块作为命名空间，例如：header、footer等。

/* 使用模块作为命名空间 */
#header {
  height: 60px;
}

#footer {
  height: 40px;
}

综上所述，CSS的class与id常用的命名规则包括：使用短横线-分隔每个单词、以模块作为命名空间、使用语义化名称、避免缩写、不要滥用id选择器、使用驼峰命名法、不要使用数字开头等。在实际应用中，我们需要根据具体的场景和需求选择最适合的命名方式。