【前端】HTML+CSS 编程规范指南

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端

🍡 HTML5 + CSS3 编程规范

• 前端开发中保持代码的一致性、可读性和可维护性是一项非常重要的任务。HTML5 和 CSS3 是目前最流行的前端开发语言，制定和遵循一套编程规范对于提高代码的质量和效率非常有帮助。在本文中，我们将深入探讨 HTML5 和 CSS3 编程的各项规范，包括命名、布局、嵌套规则、注释、空格等内容，帮助开发者写出更加优雅和高效的代码。 HTML5

CSS3

🍡HTML + CSS 命名规范

• CSS 和 HTML 的命名对代码的可读性和维护性非常重要。规范化的命名不仅能够提高团队的协作效率，还能减少维护成本，防止命名冲突和误解。

🍦命名规则

1. 语义化命名：
   • 需要使用具备语义的英文单词，命名时应尽量避免使用数字、拼音、特殊符号或随机字符。
   • 正确示例：wrap, description, content。
   • 错误示例：aaaa, a1, $we, 4tdds。
2. 连接符的使用：
   • 多个单词拼接时建议使用短横线（-）或者下划线（_）连接，但风格需保持一致，推荐使用短横线以提高可读性。避免混合使用多种连接方式或使用驼峰命名法。
   • 正确示例：header-nav, content-left, slide-bar。
   • 错误示例：headernav, slideBar, ContentLeft。
3. 命名简洁：
   • 命名应避免过度复杂，适当进行缩写，通常不要超过 3 到 4 层结构。
   • 正确示例：head-tit-ico。
   • 错误示例：header-title-left-logo-icon。
4. 禁止数字标号命名：
   • 避免使用序号命名，如 content1, content2，建议用更具描述性的名称。
   • 正确示例：content-product。
   • 错误示例：content1, content2。

注意事项：

• 避免 class 与 id 重名。
• id 应用于模块或一级结构区域，并且必须唯一，不允许修改线上项目的 id 名称。

常用命名示例

🍦img 标签的四要素

img 标签在网页中起到非常重要的作用，特别是在设计多媒体丰富的页面时。合理为图像指定宽高属性能够帮助浏览器提前预留出合适的空间，减少页面布局在加载时的抖动。

• img 标签的四要素是：src、width、height、alt。
• width 和 height 的属性值只需填写数字，无需单位，表示原始图片的宽度和高度。
• alt 是图片替代文本，不仅对搜索引擎优化（SEO）有帮助，还能在图片加载失败时为用户提供信息。
• 注意：title 属性不属于四要素，但可以为图片提供额外的说明。

正确示例：

<img src='images/sample.png' width='125' height='125' alt='示例图'>

错误示例：

<img src='images/sample.png' width='125px' height='225px'>

🍦标签的空行和注释

标签空行

HTML 标签内部原则上不允许出现无意义的空行，保持代码紧凑和整洁，减少多余的字符，尤其是对大块分区之间，可以适当空行或补充注释说明，帮助代码阅读者更好地理解页面结构，但禁止出现连续两行或更多空行的情况。

示例：

<div class="header">
  <!-- 头部内容 -->
</div>

<!-- content start -->
<div class="content">
  <!-- 主体内容 -->
</div>

<div class="footer">
  <!-- 页脚内容 -->
</div>

注释的使用

注释是帮助代码可读性的重要工具，特别是多人协作时更为重要。HTML 中的注释以 <!-- 注释内容 --> 形式存在，通常用于解释复杂的部分或标注重要的分区。

• 模块注释：用于标识页面的主要模块，使团队成员能够快速找到需要调整的部分。
• 简单注释：简洁地标注某段代码的用途。

示例：

<!-- header module start -->
<div class="header">
  <h1>页面标题</h1>
</div>
<!-- header module end -->

🍦HTML 标签书写与嵌套规则

1. 标签小写：所有 HTML 标签必须在半角英文状态下以小写形式输入。
2. 闭合标签：双标签必须闭合；单标签不需加闭合符 /。
3. 子级缩进：子级标签应相对父级标签进行一次 TAB 缩进，一个 TAB 等于 2 个空格。
4. 属性值必须带引号：无论是单引号还是双引号，都需保持一致，建议统一使用双引号。
5. 成套标签的绝对父子关系：例如 ul > li、ol > li、dl > dt > dd，这些标签必须保持绝对的父子关系，不允许在 ul 内直接插入非 li 标签。
6. 标签嵌套规则：
   • a 标签内部不能再嵌套另一个 a 标签。
   • 除 a 标签外，其他行内元素不允许嵌套块元素。
   • p、dt、h 标签内不能嵌套块元素。

示例：

<ul>
  <li>项目一</li>
  <li>项目二</li>
</ul>

🍦图片文件命名

图片文件的命名规范可以帮助团队理解图片的用途，并且有助于 SEO 优化。

1. 文件后缀命名一律小写。
2. 使用短横线进行命名：使用间隔符 - 进行连接，例如：
   • 背景图片以 bg- 开头，例如 bg-header.jpg。
   • 按钮图片以 btn- 开头，例如 btn-submit.png。
   • 图标图片以 icon- 开头，例如 icon-user.svg。
   • 聚合图片以 spr- 开头，例如 spr-nav.png。

🍡 CSS 书写规范

🍦注释

CSS 中注释的使用形式为 /* 注释内容 */，对于复杂的样式代码，应合理使用注释，帮助代码阅读者理解各部分的含义。

文件顶部注释

每个 CSS 文件应包含文件顶部注释，用于标明文件的作用、作者及修改记录。

/*
 * @description: 页面样式 - 主要用于首页样式调整
 * @author: zhifu.wang
 * @update: zhifu.wang (2024-10-17)
 */

模块注释

模块注释用于标注某个特定的模块，方便团队成员快速定位。

/* module: header styles by zhifu.wang */
.header {
  background-color: #f0f0f0;
  padding: 20px;
}

特殊注释

特殊注释用于标注修改、待办等信息，便于在维护时快速处理。

/* TODO: 修改此部分的样式以适配移动端 by zhifu.wang */
/* BUGFIX: 修复按钮边距问题 by zhifu.wang */

空格规范

选择器与 { 之间必须包含空格。

/* 正确示例 */
.selector {
  color: red;
}

/* 错误示例 */
.selector{
  color: red;
}

属性名与冒号之间不允许有空格，冒号与属性值之间必须有空格。

/* 正确示例 */
color: red;

选择器规范

选择器嵌套层级不超过 3 级：

正确示例：

#username input {
  text-align: center;
}

错误示例：

.page .header .login #username input {}

并集选择器在逗号后换行书写下一个选择器：

/* 正确示例 */
body,
ul,
p {
  margin: 0;
}

属性书写规范

属性定义必须另起一行，属性后必须以分号结尾：

/* 正确示例 */
.selector {
    margin: 0;
    padding: 0;
}

大小写规定

CSS 中的属性和值必须以小写书写，保持一致性：

/* 正确示例 */
.selector {
  text-align: center;
}

CSS 内引号

CSS 中的所有引号应统一为双引号：

content: "";

CSS3 兼容前缀

为提高 CSS3 的兼容性，在使用新属性时应添加浏览器前缀，并按以下顺序书写：

.selector {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

背景 URL 的使用

背景图片的 URL 不需要引号包裹：

background-image: url(images/banner.jpg);

CSS 书写顺序

良好的 CSS 书写顺序能够帮助浏览器更好地解析代码，减少重复渲染的次数，提升页面性能。

1. 定位属性：包括 display, position, float, z-index, overflow, list-style, clear。
2. 自身属性：如 width, height, margin, padding, border, background。
3. 文本属性：如 color, font-, text-, line-height。
4. 其他属性：如 transform, box-shadow。

示例：

/* 正确示例 */
.selector {
    position: relative;
    width: 100px;
    font-size: 16px;
}

链接伪类顺序

链接的伪类顺序需严格遵循 a:link -> a:visited -> a:hover -> a:active 的顺序，以保证不同状态下的样式效果正常。

a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: red;
}
a:active {
    color: green;
}

🍦 CSS 细节优化

• 缩写优化：在能使用缩写的地方尽量使用，如 margin、padding、border 等。
• 避免重复声明：对于设置为 0 的属性值，单位可以省略；例如，margin: 0 而不是 margin: 0px。
• 使用精灵图：对于页面上重复的小图标，应尽量使用 CSS 精灵图（Sprite），减少 HTTP 请求次数，提高页面加载速度。
• 隐藏文本：为了 SEO 和可访问性，可使用 text-indent: -9999px 来隐藏文本内容而保留图片显示。
• 精简代码：在 HTML5 中可以省略 script、style 等标签的 type 属性，以减少代码冗余。

🍡 小结

本文为大家介绍了 HTML5 和 CSS3 编程中的重要规范，遵循这些规范能够有效地提升代码的可读性和维护性。特别是在多人协作的项目中，代码规范可以降低沟通成本，减少 BUG 的发生。希望这些规范能够帮助您在实际项目中编写出更加优雅、易读、可维护的代码。