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 文件的加载速度。

二、选择器的书写规范

• 选择器命名规范

• 选择器都用小写字母。
• 选择器的命名要使用英语，这是编程的通用语言。
• 选择器的名字尽量简短，但要有实际意义，不能为了文件的体积而忽略代码的可读性。
• 逗号后要有空格，一般在选择器的逗号后面加一个空格，这样不至于看起来拥挤。
• 使用-分割，如果有需要多个单词的选择器，几个单词中间用-分隔，比如 page-wrap、btn-small 等。

• 选择器使用规范

• CSS 的属性中需要引号的地方使用单引号，HTML 中的属性使用双引号。
• CSS 选择器在使用的时候，要把样式限定在某个 HTML 区域里生效。这样可以防止不同区域的元素互相影响
• 选择器合并。有相同样式的多个选择器，使用分组选择器，可以减小文件的体积。
• 尽量不使用通配选择器或标签选择器。这两种选择器效率比较低，尽量使用类选择器来代替，只有在需要改变元素默认属性的时候再使用。
• 最右侧的选择器尽量精确。选择器中最后一位的选择器尽量使用类选择器这种比较精确的选择器，因为选择器的读取是由右至左，最右边的选择器会先去遍历，如果最后使用了标签选择器，那么查找样式的消耗就会增多。
• 选择器的嵌套不宜太长。选择器在读取的时候都是一层层的去查找的，所以使用太长的选择器也会增加查找的消耗。
• 在可以的情况下用子代选择器代替后代选择器。子代选择器只需要做一层的查找，而后代选择器需要一直查找到根节点，所以子代选择器的效率会更高一点。
• 使用样式继承。对于可以继承的样式，尽量在父节点加入样式，而不要给每一个子节点都加样式。

三、属性的书写规范

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

margin: 10px 5px 0 5px;

margin: 10px 5px 0;

color: #22ffcc;

color: #2fc;

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

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

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: Rosen 
 * @Date: 2019-04-18 20:09:21 
 * @Last Modified by: Rosen
 * @Last Modified time: 2019-05-05 10:21:21
 */

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

/* 去掉所有元素的内外边距 */
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;
}