关于css:css-规范

尽管本文档是针对 CSS 设计的，然而在应用各种 CSS 的预编译器 (如 less、sass、stylus 等) 时，实用的局部也应尽量遵循本文档的约定。

在我的项目中对立将 css 抽离成独自文件，应用 style.scss 命名，并引入到界面中

├─xxxx    
│  ├─component.js    
│  └─index.vue 
│  └─style.scss

其余款式文件应用小写字母，复合词以 - 分隔; 例如 menu.css , sub-menu.css

类名对立应用小驼峰命名：camel-case, 举荐应用 BEM 格局 命名。

BEM 链接：https://juejin.cn/post/687636…

模块 - 名 __ 元素 - 名 -- 润饰器 - 名 -- 润饰器 - 值

block-name__elem-name--mod-name--mod-val

劣势：

防止款式抵触
减小名称长度
进步可浏览性
减少款式重用

为 id 和类命名的时候要应用有意义或通用的名字（可参考开端附录）。例如：

// 不举荐
#aaa {}
// 举荐
#login {}
// 通用
.clearfix {}

为了进步可读性，尽可能的应用简写属性。例如:

/* 不举荐 */
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* 举荐 */
padding: 0 1em 2em;

我的项目过来中有定义很多罕用的工具类如：margin-t-1x 等，请尽可能减少应用。
前期保护非常繁琐，容易呈现叠加 style 状况。

/* 不举荐 */
 <div style="color:red;margin-left:4px">
 </div>
 <div class="bold-title margin-t-1x margin-b-1x">
 </div>

如无必要，不得为 id、class 选择器增加类型选择器进行限定。在性能和维护性上，都有肯定的影响。例如：

/* 举荐 */
#error,
.danger-message {font-color: #c00;}

/* 不举荐 */
dialog#error,
p.danger-message {font-color: #c00;}

倡议：选择器的嵌套层级应不大于 3 级，地位靠后的限定条件应尽可能准确。例如：

/* 举荐 */
#username input {}
.comment .avatar {}

/* 不举荐 */
.page .header .login #username input {}
.comment div * {}

尽量不应用 !important 申明。

倡议配合应用 scoped，划定作用域，缩小净化。
对于更改组件中的款式，举荐应用穿透 /deep/ 操作符，进行部分批改。

倡议：在能够应用缩写的状况下，尽量应用属性缩写。例如：

/* 举荐 */
.post {font: 12px/1.5 arial, sans-serif;}

/* 不举荐 */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

倡议：应用 border、margin、padding 等缩写时，应留神隐含值对理论数值的影响，的确须要设置多个方向的值时才应用缩写。

倡议：属性在书写时，应并以布局形式、地位 > 尺寸 > 文本相干 > 视觉效果的程序书写，以进步代码的可读性。

地位属性(position, top, right, z-index, display, float 等)
尺寸(width, height, padding, margin)
文本(font, line-height, letter-spacing, color- text-align 等)
视觉(background, border 等)
其余(animation, transition 等)

另外，如果蕴含 `content` 属性，应放在最后面。

当元素须要撑起高度以蕴含外部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的形式进行 clearfix。尽量不应用减少空标签的形式。

触发 BFC 的形式很多，常见的有：

float 非 none
position 非 static
overflow 非 visible

另需注意，对曾经触发 BFC 的元素不须要再进行 clearfix。

选择器 与{}之间要蕴含空格。例如：

.menu {}

每行不得超过 120 个字符，除非单行不可分割。

多个抉择以及申明间以行分隔；例如：

/* 举荐 */
.h1,
.h2,
.h3 {line-height: 1.5;}

/* 不举荐 */
.h1, .h2, .h3 {line-height: 1.5;}

`>`、`+`、`~` 选择器的两边各保留一个空格。例如：

/* 举荐 */
main > nav {padding: 10px;}

label + input {margin-left: 5px;}

input:checked ~ button {background-color: #69C;}

/* 不举荐 */
main>nav {padding: 10px;}
label+input {margin-left: 5px;}
input:checked~button {background-color: #69C;}

属性选择器中的值必须用双引号突围。

不倡议应用单引号，不容许不应用引号。例如：

/* 举荐 */
article[character="juliet"] {voice-family: "Vivien Leigh", victoria, female}
/* 不举荐 */
article[character='juliet'] {voice-family: "Vivien Leigh", victoria, female}

属性定义要另起一行

例如：

/* 举荐 */
.selector {
    margin: 0;
    padding: 0;
}

/* 不举荐 */
.selector {margin: 0; padding: 0;}

属性定义后必须以分号结尾

例如：

/* 举荐 */
.selector {margin: 0;}

/* 不举荐 */
.selector {margin: 0}

当数值为 0 – 1 之间的小数时，省略整数局部的 0。例如：

/* 举荐 */
panel {opacity: .8}

/* 不举荐 */
panel {opacity: 0.8}

长度为 0 时须省略单位。(也只有长度单位可省)

例如：

/* 举荐 */
body {padding: 0 5px;}

/* 不举荐 */
body {padding: 0px 5px;}

RGB 色彩值必须应用十六进制记号模式 #rrggbb。个别不应用 rgb()。带有透明度的色彩信息能够应用 rgba()。应用 rgba() 时每个逗号后必须保留一个空格。例如：

/* 举荐 */
.success {box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

/* 不举荐 */
.success {box-shadow: 0 0 2px rgba(0,128,0,.3);
    border-color: rgb(0, 128, 0);
}

色彩值能够缩写时，必须应用缩写模式。例如：

/* 举荐 */
.success {background-color: #aca;}

/* 不举荐 */
.success {background-color: #aaccaa;}

色彩值不容许应用命名色值。例如：

/* 举荐 */
.success {color: #90ee90;}

/* 不举荐 */
.success {color: lightgreen;}

色彩值中的英文字符采纳小写。如不必小写也须要保障同一我的项目内放弃大小写统一。例如：

/* 举荐 */
.success {
    background-color: #aca;
    color: #90ee90;
}

/* 举荐 */
.success {
    background-color: #ACA;
    color: #90EE90;
}

/* 不举荐 */
.success {
    background-color: #ACA;
    color: #90ee90;
}

必须同时给出程度和垂直方向的地位。2D 地位初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为防止了解上的困扰，应同时给出两个方向的值。例如：

/* 举荐 */
body {background-position: center top; /* 50% 0% */}

/* 不举荐 */
body {background-position: top; /* 50% 0% */}

font-family 属性中的字体名称应应用字体的英文 Family Name，其中如有空格，须搁置在引号中。所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：

字体	操作系统	Family Name
宋体 (中易宋体)	Windows	SimSun
黑体 (中易黑体)	Windows	SimHei
微软雅黑	Windows	Microsoft YaHei
微软正黑	Windows	Microsoft JhengHei
华文黑体	Mac/iOS	STHeiti
冬青黑体	Mac/iOS	Hiragino Sans GB
文泉驿正黑	Linux	WenQuanYi Zen Hei
文泉驿微米黑	Linux	WenQuanYi Micro Hei

例如：

h1 {font-family: "Microsoft YaHei";}

须要在 Windows 平台显示的中文内容，其字号应不小于 12px。因为 Windows 的字体渲染机制，小于 12px 的文字显示成果极差、难以辨认。

须要在 Windows 平台显示的中文内容，不要应用除 normal 外的 font-style。其余平台也应慎用。因为中文字体没有 italic 格调的实现，所有浏览器下都会 fallback 到 obilique 实现 (主动拟合为斜体)，小字号下 (特地是 Windows 下会在小字号下应用点阵字体的状况下) 显示成果差，造成浏览艰难。

font-weight 属性必须应用数值形式形容。CSS 的字重分 100 – 900 共九档，但目前受字体自身品质和浏览器的限度，实际上反对 400 和 700 两档，别离等价于关键词 normal 和 bold。例如：

/* 举荐 */
h1 {font-weight: 700;}

/* 不举荐 */
h1 {font-weight: bold;}

line-height 在定义文本段落时，应应用数值。将 line-height 设置为数值，浏览器会基于以后元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒服的行间距离成果，防止在每个设置了 font-size 都须要设置 line-height。当 line-height 用于管制垂直居中时，还是应该设置成与容器高度一致。例如：

.container {line-height: 1.5;}

应用 transition 时应指定 transition-property。例如：

/* 举荐 */
.box {transition: color 1s, border-color 1s;}

/* 不举荐 */
.box {transition: all 1s;}

尽可能在浏览器能高效实现的属性上增加过渡和动画。在可能的状况下应抉择这样四种变换：

transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0..1;

典型的，能够应用 translate 来代替 left 作为动画属性。例如：

/* 举荐 */
.box {transition: transform 1s;}
.box:hover {transform: translate(20px); /* move right for 20px */
}

/* 不举荐 */
.box {
    left: 0;
    transition: left 1s;
}
.box:hover {left: 20px; /* move right for 20px */}

Media Query 不得独自编排，必须与相干的规定一起定义。例如：

/* 举荐 */
/* header styles */
@media (...) {/* header styles */}

/* main styles */
@media (...) {/* main styles */}

/* footer styles */
@media (...) {/* footer styles */}


/* 不举荐 */
/* header styles */
/* main styles */
/* footer styles */

@media (...) {
    /* header styles */
    /* main styles */
    /* footer styles */
}

Media Query 如果有多个逗号分隔的条件时，应将每个条件放在独自一行中。例如：

@media
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx),             /* The standard way */
(min-resolution: 192dpi) {           /* dppx fallback */
    /* Retina-specific stuff here */
}

尽可能给出在高分辨率设施 (Retina) 下成果更佳的款式。

带公有前缀的属性由长到短排列，按冒号地位对齐。规范属性放在最初，按冒号对齐不便浏览，也便于在编辑器内进行多行编辑。例如：

.box {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

须要增加 hack 时应尽可能思考是否能够采纳其余形式解决。如果能通过正当的 HTML 构造或应用其余的 CSS 定义达到现实的款式，则不应该应用 hack 伎俩解决问题。通常 hack 会导致保护老本的减少。

尽量应用 选择器 hack 解决兼容性，而非 属性 hack。尽量应用合乎 CSS 语法的 selector hack，能够防止一些第三方库无奈辨认 hack 语法的问题。例如：

/* IE 7 */
*:first-child + html #header {
    margin-top: 3px;
    padding: 5px;
}

/* IE 6 */
* html #header {
    margin-top: 5px;
    padding: 4px;
}

尽量应用简略的 属性 hack。例如：

.box {
    _display: inline; /* fix double margin */
    float: left;
    margin-left: 20px;
}

.container {
    overflow: hidden;
    *zoom: 1; /* triggering hasLayout */
}

关于css:css-规范

CSS 编码标准

命名标准

文件命名

id 和类的命名

简写属性名字

通用

回绝在元素上间接写 style

选择器

!important

.vue 文件引入 style

属性缩写

属性书写程序

另外，如果蕴含 `content` 属性，应放在最后面。

革除浮动

格局标准

空格

行长度

空行

`>`、`+`、`~` 选择器的两边各保留一个空格。例如：

属性选择器中的值必须用双引号突围。

属性

值与单位

数值

长度

色彩

2D 地位

文本编排

字体

字号

字体格调

字重

行高

变换与动画

响应式

兼容性

属性前缀

Hack

CSS 编码标准

命名标准

文件命名

id 和类的命名

简写属性名字

通用

回绝在元素上间接写 style

选择器

!important

.vue 文件引入 style

属性缩写

属性书写程序

另外，如果蕴含 content 属性，应放在最后面。

革除浮动

格局标准

空格

行长度

空行

>、+、~ 选择器的两边各保留一个空格。例如：

属性选择器中的值必须用双引号突围。

属性

值与单位

数值

长度

色彩

2D 地位

文本编排

字体

字号

字体格调

字重

行高

变换与动画

响应式

兼容性

属性前缀

Hack

另外，如果蕴含 `content` 属性，应放在最后面。

`>`、`+`、`~` 选择器的两边各保留一个空格。例如：