css和sass规范

css和sass规范

一、CSS编码规范

1、代码风格

1.1文件

css文件使用UTF-8编码，因为uft-8编码具有更广泛的适应性

1.2缩进

• 使用4个空格作为一个缩进层级，可使用tab键进行缩进，一般不允许使用2个空格

.selector {
    margin: 0;
    padding: 0;
}

1.3空格

• 选择器与 { 之间必须包含空格

margin: 0;

• 列表型属性值 书写在单行时，后必须跟一个空格

font-family: Arial, sans-serif;

1.4 行长度

• 每行不得超过120个字符，除非单行不可分割常见不可分割的场景为URL超长
• 建议对于超长的样式，在样式值的空格处或 ,后换行，建议按逻辑分组

/* 不同属性值按逻辑分组 */
background:
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
    no-repeat 0 0;

/* 可重复多次的属性，每次重复一行 */
background-image:
    url(aVeryVeryVeryLongUrlIsPlacedHere)
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* 类似函数的属性值可以根据函数调用的缩进进行 */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162))
);

1.5选择器

• >、+、~选择器的两边保留一个空格

main > nav {
    padding: 10px;
}

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

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

• 属性选择器中的值必须使用双引号包围

article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female
}

1.6属性

• 属性定义必须另起一行

.selector {
    margin: 0;
    padding: 0;
}

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

.selector {
    margin: 0;
}

2、通用

2.1选择器

• 如无必要，不得为id,class选择器添加类型选择器进行限定在性能和维护性上，都有一定的影响

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

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

• 选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

• 选择器中避免使用标签名
  • 从结构、表现、行为分离的原则来看，应该尽量避免css中出现HTML标签，并且在css选择器中出现标签名会存在潜在的问题。
• 使用子选择器，防止太耗性能

.content > .title {
  font-size: 2rem;
}

2.2属性缩写

• 在可以使用缩写的情况下，尽量使用属性缩写

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

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

• 使用border/margin/padding等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。border / margin / padding 等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。

/* centering <article class="page"> horizontally and highlight featured ones */
article {
    margin: 5px;
    border: 1px solid #999;
}

/* good */
.page {
    margin-right: auto;
    margin-left: auto;
}

.featured {
    border-color: #69c;
}

/* bad */
.page {
    margin: 5px auto; /* introducing redundancy */
}

.featured {
    border: 1px solid #69c; /* introducing redundancy */
}

2.3属性书写顺序

同一规则集下的属性在书写时，应按照功能进行分组，并以布局方式、位置>尺寸>文本相关>视觉效果的顺序书写，以提高代码的可读性

• 布局方式相关的属性包括：position / top / right / bottom / left / float / display / overflow等
• 尺寸相关的属性包括：border / margin / padding / width / height等
• 文本相关的属性包括：font / line-height / text-align / word-wrap等
• 视觉效果相关的属性包括：background / color / transition / list-style等
• 如果包含content属性，应放在最前面

.sidebar {
    /* 布局方式: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* 尺寸相关: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /*文本相关: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /*视觉相关: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}

2.4清楚浮动

当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置clear的方式进行clearfix，尽量不要使用增加空标签的方式

.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both
}

2.5 ！important

• 尽量不使用!important声明
• 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和!important定义样式

2.6 z-index

• 使用z-index时必须给元素设置position属性，即对文档流外绝对定位元素的视觉层级关系进行管理
• 在可控环境下，期望显示在最上层的元素，z-index 指定为 999999。
• 在可控环境下，期望显示在最上层的元素，z-index 指定为 999999。

2.7 合理使用ID

• 一般情况下ID不应该被用于样式，并且ID的权重很高，所以不使用ID解决样式的问题，而是使用class

.content .title {
  font-size: 2em;
}

3、值与单位

3.1文本

• 文本内容必须用双引号包围文本类型的内容可能在选择器、属性值等内容中

/* good */
html[lang|="zh"] q:before {
    font-family: "Microsoft YaHei", sans-serif;
    content: "“";
}

html[lang|="zh"] q:after {
    font-family: "Microsoft YaHei", sans-serif;
    content: "”";
}

/* bad */
html[lang|=zh] q:before {
    font-family: 'Microsoft YaHei', sans-serif;
    content: '“';
}

html[lang|=zh] q:after {
    font-family: "Microsoft YaHei", sans-serif;
    content: "”";
}

3.2数值

当数值为0-1之间的小数时，可省略整数部分的0

panel {
    opacity: .8
}

3.3 url()

• url()函数中的路径加双引号

background: url("../i/bean_01.png") -120px -44px no-repeat;

• url()函数中的绝对路径可省去协议名