mkimq

Css规范

css文件的分类和引用顺序

通常一个项目只需要引入一个样式，但是对于大项目，我们需要把css文件分类。按照css性质和用途，分成：公共样式、特殊样式、皮肤样式，并以此顺序引入（按需求是否添加版本号）。

  1. 公共样式：标签重置、设置默认值等公共样式。
  2. 特殊样式：某个功能某个页面样式与网站整体风格差异较大或者维护率较高时可以独立引用一个样式。
  3. 皮肤样式：按需换肤功能，我们将颜色、背景等抽离出来。
<link href="static/css/common.css?v=1.0.0" ref="stylesheet" type="text/css" />
<link href="static/css/index.css?v=1.0.0" ref="stylesheet" type="text/css" />
<link href="static/css/skin.css?v=1.0.0" ref="stylesheet" type="text/css" />
 
 
 

命名规范必要

提示

语义化，可读性强。

  1. 使用类选择器，放弃ID选择器

id唯一性，导致无法样式重用。

  1. 命名小写，两个或多个单词用'-'连接

反面例子

.RED {
    ...
}

.fontlarge {
    ...
}

正面例子

.red {
    ...
}

.font-large {
    ...
}
  1. 后代选择器，父级-孩子
.nav {
    ...
}

.nav-title {
    ...
}

注释规范强烈推荐

提示

好的注释使代码可读性更强。

/* 单行注释 */

/*
多行注释
*/

正面例子

/* 导航栏 start */

.nav {
    ...
}
.
.
.

/* 导航栏 end */

书写规范必要

  1. tab键用（必须）四个空格代替

因为在不同系统的编辑工具对tab解析不一样，windows下的tab键是占四个空格的位置，而在linux下会变成占八个空格的位置（除非你自己设定了tab键所占的位置长度）

  1. 属性后必须加';'，方便压缩工具断句。

  2. 空格的使用

    • 选择器与 { 之前（必须）要有空格
    • 属性名的 : 后（必须）要有空格
    • 属性名的 : 前（禁止）加空格
.font-large {
    ...
}

一个原因是美观，其次IE6（目前一般不考虑IE兼容性）存在一个bug

  1. 样式禁止单行

反面例子

a {...}

正面例子

a {
    ...
}
  1. 多选择器规则之间必须换行

反面例子

a.btn, input.btn, input[type="button"] {
    ...
}

正面例子

a.btn,
input.btn,
input[type="button"] {
    ...
}

  1. 禁止向0后面添加单位

  2. 禁止使用css原生 import

使用css原生import有很多弊端，比如会增加请求数等

  1. 属性书写顺序
    • 定位相关, 常见的有：display position left top float 等
    • 盒模型相关, 常见的有：width height margin padding border 等
    • 其他属性

提示

按照这样的顺序书写可见提升浏览器渲染dom的性能。简单举个例子，网页中的图片，如果没有设置width和height，在图片载入之前，他所占的空间为0，但是当他加载完毕之后，那块为0的空间突然被撑开了，这样会导致，他下面的元素重新排列和渲染，造成重绘（repaint）和回流（reflow）。我们在写css的时候，把元素的定位放在前头，首先让浏览器知道该元素是在文本流内还是外，具体在页面的哪个部位，接着让浏览器知道他们的宽度和高度，border等这些占用空间的属性，其他的属性都是在这个固定的区域内渲染的。

正面例子

.content {
    /* 定位 */
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    /* 盒模型 */
    width: 50px;
    height: 50px;
    margin: 50px;
    border: 1px solid red;
    /* 其他 */
    color: white;
}

  1. 小图片sprite合并

  2. 禁止使用行内样式

反面例子

<p style="..." />

  1. 使用rest.cssopen in new window，样式统一

  2. 禁止使用'*'来选择元素

  3. 连接的样式，书写顺序

a:link -> a:visited -> a:hover -> a:active
  1. 样式属性顺序
    • Positioning Model 布局方式、位置，相关属性包括：position, top, z-index, display, float等
    • Box Model 盒模型，相关属性包括：width, height, padding, margin，border,overflow
    • Typographic 文本排版，相关属性包括：font, line-height, text-align
    • Visual 视觉外观，相关属性包括：color, background, list-style, transform, animation

Positioning Model > Box Model > Typographic > Visual 的顺序书写，提高代码的可读性。

  1. 16进制表示颜色值

除非你需要透明度而使用rgba，否则都使用#f0f0f0这样的表示方法，并尽量缩写。

  1. 选择器顺序
    • 从大到小（以选择器的范围为准）
    • 从低到高（以等级上的高低为准）
    • 从先到后（以结构上的先后为准）
    • 从父到子（以结构上的嵌套为准）
/* 从大到小 */
.m-list p {
    ...
}
.m-list p.part {
    ...
}
/* 从低到高 */
.m-logo a {
    ...
}
.m-logo a:hover {
    ...
}
/* 从先到后 */
.g-hd {
    ...
}
.g-bd{
    ...
}
.g-ft {
    ...
}
/* 从父到子 */
.m-list {
    ...
}
.m-list .itm{
    ...
}
贡献者: mankueng