前端代码规范（阿里） --- html、css、less

最新推荐文章于 2025-04-16 18:23:51 发布

独坐空山后

最新推荐文章于 2025-04-16 18:23:51 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签：前端 html css3 css 代码规范

本文链接：https://blog.youkuaiyun.com/pig_is_duck/article/details/106158365

学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍前端开发中的命名规范、HTML、CSS及LESS代码规范，强调代码的可读性和一致性，覆盖项目命名、目录结构、文件命名、语义化标签、缩进、注释、选择器优化等方面。

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

程序员写好看的代码，不亚于写一行好看的字
好看的代码总是让人心旷神怡，
不好，不规范的代码，让人看了想说mmp，
那我们就来学习一下规范的代码怎么写的吧

以下来自B站的学习视频：前端必备-阿里大厂前端开发规范！

一、命名规范

(一) 项目命名

全部采用小写的方式
以中划线分割

正确命名：mall-management-system (商城管理系统)

错误命名：mall-management-system 或 mallManagementSystem

(二) 目录命名

全部采用小写的方式
以中划线命名
复数时，要采用复数结构

正确命名：sctipts / styles / utils / demo-scripts

(三) JS、CSS、SCSS、HTML、PNG等文件命名

全部采用小写的方式
以中划线命名

正确命名：render-dom.js / signup.css / index.html / company-logo

(四) 命名严谨性

严禁使用拼音和中文混合的方式
严禁使用中文、中文拼音
正确使用英文拼写和语法
一些特殊的词语可以采用国际通用的名称

如：河南=henan / 人民币=rmb

正确命名：movie(电影) / employee(员工)

错误命名：dianyin(电影) condition --> condi (×)

二、HTML规范（Vue Template通用）

(一) HTML类型

推荐使用 HTML5 的文档类型申明

<!DOCTYPE html>

规定的字符编码

<meta charset="UTF-8">

IE兼容模式

<meta http-equiv="X-UA-Compatible" content="IE-Edge">

doctypa 大写

(二) 缩进

一个tab 使用两个空格
嵌套的节点应该缩进

(三) 分块注释

在每一个块级元素，列表元素和表格元素中，加上一对HTML注释，注释格式

 <!-- 英文 中文 start -->
 <!-- 英文 中文 end -->

例如：

<!-- header 头部 start -->
  <header>
    <div>
      <a href=""></a>
    </div>
  </header>
  <!-- header 头部 end -->

(四) 语义化标签

HTML5 有很多语义化标签，优先使用这些语义化标签，避免每一个页面都是 div或者 p

(五) 引号

**使用双引号" " **而不是单引号''

三、CSS 规范

(一) 命名

类名使用小写字母，以中划线分割

.swiper-image { ... }

id 使用驼峰式命名

#header { ... }

scss中的变量、函数、混合、placeholder采用驼峰命名
class 的命名不要使用标签名

如：.p .div

(二) 选择器

尽量使用直接子选择器，否则，有时会造成性能损耗

不推荐：

.content .title { ... }

推荐：

.content > .title { ... }

(三) 尽量使用缩写的属性

不推荐：

 border-style: solid;
 border-width: 1px;
 border-color: red;

推荐：

border: 1px solid red;

(四) 每个选择器及属性独占一行

不推荐：

img {
      width: 100%;box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}

推荐：

img {
      width: 100%;
      box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}

(五) 省略 0 后面的单位

border-width: 0;

(六) 避免使用 ID 选择器及全局标签污染全局样式

能不用 id选择器就不要使用id选择器，避免不是禁止

四、LESS 规范

(一) 代码组织

将公告less文件放置在 style/less/common文件夹
按以下顺序组织

@import
变量声明
样式声明

@import 'mixins/size.less'
   
@default-text-color: #333;

.page {
	width: 960px;
    margin: 0 auto;
}

(二) 避免嵌套等级过多

将嵌套深度限制在 3 级

不推荐：

.main {
	.title {
		.name {
			color: #fff;
		}
	}
}

推荐：

.main-title {
    .name {
		color: #fff;
    }
}

前端代码规范（阿里） --- html、css、less

一、命名规范

(一) 项目命名

(二) 目录命名

(三) JS、CSS、SCSS、HTML、PNG等文件命名

(四) 命名严谨性

二、HTML规范（Vue Template通用）

(一) HTML类型

(二) 缩进

(三) 分块注释

(四) 语义化标签

(五) 引号

三、CSS 规范

(一) 命名

(二) 选择器

(三) 尽量使用缩写的属性

(四) 每个选择器及属性独占一行

(五) 省略 0 后面的单位

(六) 避免使用 ID 选择器及 全局标签污染全局样式

四、LESS 规范

(一) 代码组织

(二) 避免嵌套等级过多

(六) 避免使用 ID 选择器及全局标签污染全局样式