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

---

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

---

---

---

🍡 HTML5 + CSS3 编程规范

• 前端开辟中保持代码的同等性、可读性和可维护性是一项非常告急的任务。HTML5 和 CSS3 是如今最盛行的前端开辟语言，订定和遵照一套编程规范对于进步代码的质量和服从非常有资助。在本文中，我们将深入探究 HTML5 和 CSS3 编程的各项规范，包罗定名、结构、嵌套规则、表明、空格等内容，资助开辟者写出更加优雅和高效的代码。
  HTML5
  
  
  
  CSS3
  
  
  
  

---

🍡HTML + CSS 定名规范

• CSS 和 HTML 的定名对代码的可读性和维护性非常告急。规范化的定名不但可以大概进步团队的协作服从，还能镌汰维护资源，防止定名辩论和误解。
  

---

🍦定名规则

• 语义化定名：
  
  
  
  • 必要利用具备语义的英文单词，定名时应只管克制利用数字、拼音、特别符号或随机字符。
    
  • 正确示例：wrap, description, content。
    
  • 错误示例：aaaa, a1, $we, 4tdds。
    
  
  
• 毗连符的利用：
  
  
  
  • 多个单词拼接时发起利用短横线（-）大概下划线（_）毗连，但风格需保持同等，保举利用短横线以进步可读性。克制肴杂利用多种毗连方式或利用驼峰定名法。
    
  • 正确示例：header-nav, content-left, slide-bar。
    
  • 错误示例：headernav, slideBar, ContentLeft。
    
  
  
• 定名轻便：
  
  
  
  • 定名应克制太过复杂，得当举行缩写，通常不要高出 3 到 4 层结构。
    
  • 正确示例：head-tit-ico。
    
  • 错误示例：header-title-left-logo-icon。
    
  
  
• 克制数字标号定名：
  
  
  
  • 克制利用序号定名，如 content1, content2，发起用更具形貌性的名称。
    
  • 正确示例：content-product。
    
  • 错误示例：content1, content2。
    
  
  

留意事项：

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

---

常用定名示例

中文英文名中文英文名中文英文名头部header尾部footer导航nav子导航subnav栏目column主体main消息news相助同伴partner版权copyright标记logo侧栏sidebar横幅banner菜单menu子菜单submenu滚动scroll搜刮search标签页tab提示信息msg标题title状态status小本领tips指南guild服务service热门hot下载download注册register登录条loginbar按钮btn投票vote表明note友谊链接friend-link外衣wrap面包屑breadcrumb

---

🍦img 标签的四要素

img 标签在网页中起到非常告急的作用，特别是在筹划多媒体丰富的页面时。公道为图像指定宽高属性可以大概资助欣赏器提前预留出符合的空间，镌汰页面结构在加载时的抖动。

• img 标签的四要素是：src、width、height、alt。
  
• width 和 height 的属性值只需填写数字，无需单元，表现原始图片的宽度和高度。
  
• alt 是图片更换文本，不但对搜刮引擎优化（SEO）有资助，还能在图片加载失败时为用户提供信息。
  
• 留意：title 属性不属于四要素，但可以为图片提供额外的分析。
  

正确示例：

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

复制代码

错误示例：

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

复制代码

---

🍦标签的空行和表明

---

标签空行

HTML 标签内部原则上不允许出现偶然义的空行，保持代码紧凑和整齐，镌汰多余的字符，尤其是对大块分区之间，可以得当空行或增补表明分析，资助代码阅读者更好地明确页面结构，但克制出现一连两行或更多空行的情况。
示例：

1. <div class="header">
2.   <!-- 头部内容 -->
3. </div>
5. <!-- content start -->
6. <div class="content">
7.   <!-- 主体内容 -->
8. </div>
10. <div class="footer">
11.   <!-- 页脚内容 -->
12. </div>

复制代码

---

表明的利用

表明是资助代码可读性的告急工具，特别是多人协作时更为告急。HTML 中的表明以 <!-- 表明内容 --> 情势存在，通常用于表明复杂的部门或标注告急的分区。

• 模块表明：用于标识页面的告急模块，使团队成员可以大概快速找到必要调解的部门。
  
• 简朴表明：轻便地标注某段代码的用途。
  

示例：

1. <!-- header module start -->
2. <div class="header">
3.   <h1>页面标题</h1>
4. </div>
5. <!-- header module end -->

复制代码

---

🍦HTML 标签誊写与嵌套规则

• 标签小写：全部 HTML 标签必须在半角英文状态下以小写情势输入。
  
• 闭合标签：双标签必须闭合；单标签不需加闭合符 /。
  
• 子级缩进：子级标签应相对父级标签举行一次 TAB 缩进，一个 TAB 便是 2 个空格。
  
• 属性值必须带引号：无论是单引号照旧双引号，都需保持同等，发起同一利用双引号。
  
• 成套标签的绝对父子关系：比方 ul > li、ol > li、dl > dt > dd，这些标签必须保持绝对的父子关系，不允许在 ul 内直接插入非 li 标签。
  
• 标签嵌套规则：
  
  
  
  • a 标签内部不能再嵌套另一个 a 标签。
    
  • 除 a 标签外，其他行内元素不允许嵌套块元素。
    
  • p、dt、h 标签内不能嵌套块元素。
    
  
  

示例：

1. <ul>
2.   <li>项目一</li>
3.   <li>项目二</li>
4. </ul>

复制代码

---

🍦图片文件定名

图片文件的定名规范可以资助团队明确图片的用途，而且有助于 SEO 优化。

• 文件后缀定名划一小写。
  
• 利用短横线举行定名：利用隔断符 - 举行毗连，比方：
  
  
  
  • 配景图片以 bg- 开头，比方 bg-header.jpg。
    
  • 按钮图片以 btn- 开头，比方 btn-submit.png。
    
  • 图标图片以 icon- 开头，比方 icon-user.svg。
    
  • 聚合图片以 spr- 开头，比方 spr-nav.png。
    
  
  

---

🍡 CSS 誊写规范

---

🍦表明

CSS 中表明的利用情势为 /* 表明内容 */，对于复杂的样式代码，应公道利用表明，资助代码阅读者明确各部门的寄义。

---

文件顶部表明

每个 CSS 文件应包罗文件顶部表明，用于标明文件的作用、作者及修改记载。

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

复制代码

---

模块表明

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

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

复制代码

---

特别表明

特别表明用于标注修改、待办等信息，便于在维护时快速处置处罚。

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

复制代码

---

空格规范

• 选择器与 { 之间必须包罗空格。
  
  1. /* 正确示例 */
  2. .selector {
  3.   color: red;
  4. }
  6. /* 错误示例 */
  7. .selector{
  8.   color: red;
  9. }

  复制代码
• 属性名与冒号之间不允许有空格，冒号与属性值之间必须有空格。
  
  1. /* 正确示例 */
  2. color: red;

  复制代码

---

选择器规范

• 选择器嵌套层级不高出 3 级：
  
  
  
  • 正确示例：
    1. #username input {
    2.   text-align: center;
    3. }

    复制代码
  • 错误示例：
    1. .page .header .login #username input {}

    复制代码
  
  
• 并集选择器在逗号后换行誊写下一个选择器：
  
  1. /* 正确示例 */
  2. body,
  3. ul,
  4. p {
  5.   margin: 0;
  6. }

  复制代码

---

属性誊写规范

• 属性界说必须另起一行，属性后必须以分号末端：
  
  1. /* 正确示例 */
  2. .selector {
  3.     margin: 0;
  4.     padding: 0;
  5. }

  复制代码

---

巨细写规定

CSS 中的属性和值必须以小写誊写，保持同等性：

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

复制代码

---

CSS 内引号

CSS 中的全部引号应同一为双引号：

1. content: "";

复制代码

---

CSS3 兼容前缀

为进步 CSS3 的兼容性，在利用新属性时应添加欣赏器前缀，并按以下序次誊写：

1. .selector {
2.     -webkit-transition: all 0.3s ease;
3.     -moz-transition: all 0.3s ease;
4.     -o-transition: all 0.3s ease;
5.     transition: all 0.3s ease;
6. }

复制代码

---

配景 URL 的利用

配景图片的 URL 不必要引号包裹：

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

复制代码

---

CSS 誊写序次

精良的 CSS 誊写序次可以大概资助欣赏器更好地剖析代码，镌汰重复渲染的次数，提升页面性能。

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

示例：

1. /* 正确示例 */
2. .selector {
3.     position: relative;
4.     width: 100px;
5.     font-size: 16px;
6. }

复制代码

---

链接伪类序次

链接的伪类序次需严酷遵照 a:link -> a:visited -> a:hover -> a:active 的序次，以包管差别状态下的样式效果正常。

1. a:link {
2.     color: blue;
3. }
4. a:visited {
5.     color: purple;
6. }
7. a:hover {
8.     color: red;
9. }
10. a:active {
11.     color: green;
12. }

复制代码

---

🍦 CSS 细节优化

• 缩写优化：在能利用缩写的地方只管利用，如 margin、padding、border 等。
  
• 克制重复声明：对于设置为 0 的属性值，单元可以省略；比方，margin: 0 而不是 margin: 0px。
  
• 利用精灵图：对于页面上重复的小图标，应只管利用 CSS 精灵图（Sprite），镌汰 HTTP 哀求次数，进步页面加载速率。
  
• 潜伏文本：为了 SEO 和可访问性，可利用 text-indent: -9999px 来潜伏文本内容而保存图片表现。
  
• 精简代码：在 HTML5 中可以省略 script、style 等标签的 type 属性，以镌汰代码冗余。
  

---

🍡 小结

• 
  
  本文为各人先容了 HTML5 和 CSS3 编程中的告急规范，遵照这些规范可以大概有用地提升代码的可读性和维护性。特别是在多人协作的项目中，代码规范可以低沉沟通资源，镌汰 BUG 的发生。盼望这些规范可以大概资助您在实际项目中编写出更加优雅、易读、可维护的代码。
  

....

---

---