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

程序员写好看的代码，不亚于写一行好看的字
好看的代码总是让人心旷神怡，
不好，不规范的代码，让人看了想说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 的文档类型申明

• 规定的字符编码

<meta charset="UTF-8">

• IE兼容模式

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

• doctypa 大写

(二) 缩进

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

(三) 分块注释

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

例如：

  <header>
    <div>
      <a href="">a>
    div>
  header>
  

(四) 语义化标签

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文件夹

• 按以下顺序组织

1. @import
2. 变量声明
3. 样式声明

@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;
    }
}