前端代码书写规范（基础）

一：HTML规范

1.HTML标签名、类名、标签属性和大部分属性值统一用小写，基本所有的HTML代码使用小写。

2.不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含。 例如：<link rel="stylesheet" href="" >

3.元素属性值使用双引号语法，元素属性值可以写上的都写上。  例如：<input type="radio" name="name" checked="checked" >

4.元素嵌套规范，每个块状元素独立一行，内联元素可选。

1 <div>
2     <h1></h1>
3     <p></p>
4 </div>    
5 <p><span></span><span></span></p>

二、图片规范

1.内容图：

内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大

• 优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式

• 尽量不使用PNG格式，PNG8 色位太低，PNG24 压缩率低，文件体积大

• PC平台单张的图片的大小不应大于 200KB。

2.背景图

背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片

• PNG 与 GIF 格式，优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率

• 图像颜色比较简单的，如纯色块线条图标，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式

• 图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式

• 图像颜色丰富而且文件比较大的（40KB - 200KB）优先考虑 JPEG 格式

• 条件允许的，优先考虑 WebP 代替 PNG 和 JPEG 格式

三、CSS规范

1.代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

2.选择器

• 尽量少用通用选择器 *

• 不使用 ID 选择器

• 不使用无具体语义定义的标签选择器

3.易读性层面

逗号， 冒号: 后面 要加一个空格。

统一使用单引号。

4.书写顺序

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）

2. 自身属性：width / height / margin / padding / border / background

3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

四、常用命名推荐

前端代码书写规范（基础）

原文：https://www.cnblogs.com/tdcqcrtd/p/14792096.html