编码规范整理( html css javascript) ------------------- 前端 WEB_html js单独文件命名设计-优快云博客

本文链接：https://blog.youkuaiyun.com/LuoLuoYan123/article/details/81905993

本文档详细介绍了前端项目的命名规范、HTML、CSS代码编写规范等内容，旨在提高代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一命名规范

1️⃣ 项目命名：全部采用小写方式，以下划线分隔，例：my_project_name

2️⃣ 目录命名：参照项目命名规则；有复数结构时，要采用复数命名法。例：scripts, styles

3️⃣ JS文件命名：参照项目命名规则。例：account_model.js

4️⃣ CSS, SCSS文件命名：参照项目命名规则。例：retina_sprites.scss

5️⃣ HTML文件命名：参照项目命名规则。例：error_report.html

6️⃣ CSS命名：
通用类：使用小写字母，以中划线分隔。例：element-content

业务类：BEM思想，block__element--modifier。例如：person__hand--left

另外：SCSS中的变量、函数、混合、placeholder采用驼峰式命名

7️⃣ ID命名：采用驼峰式命名。例：colorBlack

二 HTML规范

2.1 html头部声明统一

1️⃣ DTD声明

<!DOCTYPE html>

2️⃣ 页面编码统一

<meta charset="UTF-8"/>

3️⃣ meta声明

PC端注明: IE兼容/keywords/description

  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频">
  <meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频">
  <meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享">

移动端注明：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no, address=no">

4️⃣ 根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值

HTML5 规范链接：使用link，使用style，使用script

<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">

<!-- In-document CSS -->
<style>
    ...
</style>

<!-- External JS -->
<script src="code_guide.js"></script>

<!-- In-document JS -->
<script>
    ...
</script>

2.2 风格与易读性

1️⃣ 格式缩进

html编码统一格式化显示，使用一个Tab键进行分层缩进 (2个空格宽度)，使整个页面结构层次清晰，方便阅读和修改。

2️⃣ 模块注释

html较大独立模块之间注释格式统一使用：

<!-- start: XXX模块 -->

<!-- end: XXX模块 -->

或者：

<!-- XXX模块 -->

<!-- /XXX模块 -->

2.3 标签与属性

1️⃣ 由于html标签和属性不区别大小写，所有建议都采用小写，尤其是自定义标签和属性名，否定js中取不到，如：

<div data-bgColor="red"></div>

$('div').data('bgColor');  // 取不到，已自动被浏览器转成了data-bgcolor

2️⃣ 所有html属性必须添加双引号（非单引号）

// 禁止
<div id=mainframe> 或 <div id='mainframe'>

// 推荐
<div id="mainframe">

3️⃣ 标签属性顺序

属性应该按照特定的顺序出现以保证易读性；

class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled

class是为高可复用组件设计的，所以应处在第一位；

id更加具体且应该尽量少使用，所以将它放在第二位

4️⃣ boolean属性

boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；

boolean属性的存在表示取值为true，不存在则表示取值为false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

2.4 杂项

1️⃣ 所有标签必须采用合理嵌套。

// 禁止
<p><b></p></b>

// 推荐
<p><b></b></p>

// 禁止inline级标签嵌套block级标签
<span><div></div></span>

2️⃣ img标签中必须添加alt属性。如：<img src="…" alt="logo" />

3️⃣ 减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点；

很多时候，需要通过迭代和重构来使HTML变得更少。

<!-- Not well -->
<span class="avatar">
    <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

三 CSS代码规范

3.1 CSS引用规范

1️⃣ 所有CSS均为外部调用，不得在页面书写任何内部样式或行内样式；

2️⃣ html页面引入样式文件：

统一使用link标签，少用@import（原生import有加载性能问题），sass、less、vue.js等文件使用import命令除外（因为最终前端构建工具会将引入文件编译成一个css文件）

<link rel="stylesheet" href="xxx.css">
<!-- type="text/css"可以省略，清爽 -->

3.2 CSS注释规范

1️⃣ 1、css头部文档注释( 统一加上@charset声明 )，如下：

@charset "utf-8";

/**
 * @created : 2017/09/15 
 * @author : Mr.Wang 
 * @version : v1.0 
 * @desc : XX模块 
 **/

关于"version"，如果对代码有修改更新version版本号，并添加相关注释。

2️⃣ 内部模块之间注释（建议 @模块英文名，好查找）：

/* @info 商品信息区 -----------------------------------------------------------*/
.infoArea{}

/* 单行注释 */
.specArea{}

/* @price 商品价格区 ----------------------------------------------------------*/
.price{}

3.3 CSS字符规范

1️⃣ 缩进：使用soft tab（2个空格）；

2️⃣ 分号：每个属性声明末尾都要加分号；

3️⃣ 空行 :

以下几种情况需要空行

/**
 * 文件最后保留一个空行
 * '}'后最好跟一个空行，包括scss中嵌套的规则
 * 属性之间需要适当的空行，具体见属性声明顺序
 **/

.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

4️⃣ 空格

以下几种情况不需要空格	以下几种情况需要空格
属性名后	属性值前
多个规则的分隔符','前	选择器'>', '+', '~'前后
!important '!'后	'{'前
属性值中'('后和')'前	!important '!'前
行末不要有多余的空格	属性值中的','后
注释'/'后和'/'前

/* 示例代码 */
.element,
.dialog {
  color: red !important;
  background-color: rgba(0, 0, 0, .5);
}

5️⃣ 引号

最外层统一使用双引号；

url的内容要用引号；

属性选择器中的属性值需要引号

.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

3.4 样式中属性

1️⃣ 排序规则：先外部 > 再自身 > 后内部

推荐工具CSScomb，sublime 和 vscode 均有对应插件

 A. 影响文档流的属性（display, position, float, clear, visibility, table-layout等）

 B. 自身盒模型的属性（width, height, margin, padding, border等）

 C. 排版相关属性（font, line-height, text-align, text-indent, vertical-align等）

 D. 装饰性属性（color, background, opacity, cursor等）

 E. 生成内容的属性（content, list-style, quotes等）

2️⃣ 属性简写

属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰；

margin 和 padding 相反，需要使用简写；

常见的属性简写包括：font background transition animation

/* not good */
.element {
    transition: opacity 1s linear 2s;
}

/* good */
.element {
    transition-delay: 2s;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
}