DIV+CSS命名规范全记录

下面给您详细讲解“DIV+CSS命名规范全记录”的完整攻略。

一、 命名规范概述

在进行html和css代码编写过程中，采用良好命名规范是十分重要的，这样能将代码组织得更加简洁明了，有利于代码的维护和更新。

良好的命名规范有以下几点要求：

1. 必须有意义，能准确描述所表示的内容；
2. 避免出现过于宽泛的命名；
3. 专注并确定性，最好不用缩写或缩短词汇的长度；
4. 使用小写字母、中划线或下划线将每个单词隔开，不要使用驼峰命名法或帕斯卡命名法；
5. 必须按照分类进行命名，遵循一定的命名约定，以此区分不同类别的html元素。

二、 具体规范

下面是具体的命名规范：

1. 布局容器

以wrapper作为外层容器的class名称，比如：

<div class="wrapper"></div>

2. 页头类

以header作为页面头部元素的class名称，比如：

<header class="header"></header>

3. 主体部分类

以main作为主体部分的class名称，比如：

<main class="main"></main>

4. 页脚类

以footer作为页脚元素的class名称，比如：

<footer class="footer"></footer>

5. 导航类

以nav作为导航元素的class名称，比如：

<nav class="nav"></nav>

6. 子导航

以sub-nav作为导航子元素的class名称，比如：

<nav class="sub-nav"></nav>

7. 板块类

按照主要的板块名称来命名，比如：

<section class="section-name"></section>

8. 区块标题类

以title作为区块标题元素的class名称，并在前面加上板块名称前缀，比如：

<h3 class="section-name-title"></h3>

9. 列表类

以list作为列表元素的class名称，比如：

<ul class="list"></ul>

10. 列表项类

以item作为列表项元素的class名称，比如：

<li class="list-item"></li>

11. 表单类

以form作为表单元素的class名称，比如：

<form class="form"></form>

12. 表单项类

以item作为表单项元素的class名称，比如：

<label class="form-item"></label>

13. 表单按钮类

以btn作为表单按钮元素的class名称，比如：

<button class="form-btn"></button>

三、常用的CSS命名规范

在CSS中，还有一些常用的命名规范，以下是常用的CSS命名规范：

1. 所有命名必须小写

CSS的所有命名中，包括类名、ID名和属性名，都必须小写。

.wrapper {
  width: 100%;
}

2. 类名和ID名使用连字符

类名和ID名中的单词之间，使用连字符进行连接。

.section-name {
  margin: 0;
}

#nav-bar {
  padding: 10px;
}

3. 避免使用下划线和驼峰式命名

不推荐使用下划线和驼峰式命名，因为与连字符不统一。

4. 避免简写

在书写CSS属性值时，避免使用简写方式。应该遵循将CSS属性完整写出来的原则。

.form-btn {
  font-family: 'Microsoft YaHei';
  font-size: 14px;
  font-weight: bold;
}

5. 依据语义化命名

命名应该依据语义化原则，能清楚地表达其作用。

.nav {
  display: flex;
}

.form {
  width: 50%;
}

以上就是“DIV+CSS命名规范全记录”的完整攻略。

示例说明

下面给出两个具体的示例说明：

示例1

如果有一个网站主要有三个板块，分别是导航、内容和页脚，我们可以使用以下方式进行命名：

<div class="nav"></div>
<div class="main"></div>
<div class="footer"></div>

示例2

如果有一个表单元素，包含label、input和button等元素，我们可以使用以下方式进行命名：

<label class="form-item form-label">Name:</label>
<input class="form-item form-input" type="text">
<button class="form-btn">Submit</button>

以上就是本次的讲解，希望对您有所帮助。