CSS编码标准指南

文件引用规范

先说加载的规范，这个规范主要是为了提高页面加载速度或者是首屏的速度。

1 CSS 文件或样式在 head 标签中引用。页面的渲染需要 CSS，所以尽量早的让 CSS 文件加载出来。

2 JS 文件要放在 body 标签尾部。页面里加载和运行 JS 都会阻塞页面的渲染过程，所以把 JS 放在尾部可以加快首屏显示的速度，但对整个页面完成加载的时间没什么影响。

3 使用压缩后的文件。线上使用的静态文件，尽量都是压缩好的，CSS 使用 .min.css 形式，JS 使用 .min.js 形式，这样可以减少文件的体积，从而减少下载的时间。

4 减少 import 方式引用 css 文件。import 方式引入的 CSS 文件要等原 CSS 文件加载并解析后才会去请求, 会拖慢 CSS 文件的加载速度。

属性的书写规范

一、使用缩写

在 CSS 中有很多属性或属性值可以缩写, 在能用缩写的地方尽量使用缩写。

1、属性的缩写。CSS 中有些属性是可以合并的, 如:

margin-top: 10px;margin-bottom: 0;margin-left: 5px;margin-right: 5px;

上面这几组 margin 相关的属性占了四条样式, 我们可以使用一条 margin 属性代替这四个方向的 margin：

margin: 10px 5px 0 5px;

一般带有方向的属性, 缩写的时候各个方向的值都是按着"上 右 下 左"的顺序写的。另外如果四个方向值一样，可以直接用一个值代替四个方向；如果左右方向的值一样，则可以省略最后一个左侧的值。

上面这条缩写也可以写成：

margin: 10px 5px 0;

2、颜色的缩写。在使用十六进制颜色的时候, 如果 rgb 三个颜色位置中, 每两位的颜色值相同, 可以把六位的颜色写成三位。

如：color: #22ffcc;

就可以写成：

color: #2fc;

这两种写法是等效的, 但要注意的是如果需要兼容低版本 IE 浏览器, 还是要用六位的颜色值。

3、数字的缩写。在 CSS 中如果整数部分是 0 的小数, 可以忽略小数点前面的 0; 如果属性值是 0, 则可以忽略属性值的单位。

如: font-size: 0.8rem; padding: 0px;

这两条属性就可以做简写：

font-size: .8rem; padding: 0;

二、属性顺序的规范

理论上, CSS 的属性是一条一条解析执行的。这种情况下, 就要把能确定大小和位置的属性写在前面, 把对布局没什么影响的属性写在后面, 避免返工。

一般说的使用顺序如下:

1. 位置属性 (position, top, right, z-index, display, float等)　　

2. 大小 (width, height, padding, margin)　　

3. 文字系列 (font, line-height, letter-spacing, color- text-align等)　　

4. 背景 (background, border等) 5. 其他 (animation, transition等)

注释规范

一 文件头注释

/** @Author: zhangsan* @Date: 2023-04-18 20:09:21* @Last Modified by: zhangsan* @Last Modified time: 2023-05-05 10:21:21*/

二 普通注释

/* 头部导航 */.nav-top{background: #ccc;}

CSS-Reset

/* 去掉所有元素的内外边距 */html, body, div, span,h1, h2, h3, h4, h5, h6, p, pre,a, img, ul, li, form, label, input,table, tbody, tfoot, thead, tr, th, td,audio, video {margin: 0;padding: 0;}/* 统一全局字体 */body {font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif}/* 列表元素去掉默认的列表样式 */ol, ul {list-style: none;}/* Table元素的边框折叠 */table {border-collapse: collapse;border-spacing: 0;}/* 去掉默认的下划线 */a{text-decoration: none;}/* 去掉input自带的边缘效果和背景颜色 */input{outline: none;background: none;}