【规范】前端编码规范——css 规范

时间 2019-11-21

标签规范前端编码 css 栏目字符编码繁體版

原文原文链接

编码在 css 首行设置文件编码为 UTF-8。php

@charset "UTF-8";

class 命名 class 名称应当尽量短，而且意义明确。使用有意义的名称，使用有组织的或目的明确的名称，不要使用表现形式的名称。
不推荐css

fw-800 {font-weight:800;}
.red {color:red;}

推荐前端

.heavy {font-weight:800;}
.important {color:red;}

使用中划线（-）分隔 class 中的单词。虽然它很不方便的让你双击选择，可是它能够加强理解性。另外属性选择器 web

[attribute|=value]

也能识别中划线（-），因此最好坚持使用中划线做为分隔符。
不推荐浏览器

.slide_hd {}
.slide_bd {}

推荐sass

.slide-hd {}
.slide-bd {}

基于最近的父 class 或基本 class 做为新 class 的前缀。
不推荐app

.header .logo {}
.header .banner {}

推荐ide

.header-logo {}
.header-banner {}

使用布局

.js-*

的 class 来标识行为（与样式相对），而且不要将这些 class 写有任何的样式。
减小选择器的嵌套在写选择器时，要尽量的减小嵌套层级，通常 2~3 层，不要超过 4 层。
不推荐字体

.main ul li a span {}

推荐

.main span {}

优化选择器当构建选择器时应该使用清晰，准确和有语义的 class 名。尽可能减小使用标签选择器。若是你只关心你的 class 名，而不是你的代码元素，这样会更容易维护。
不推荐

div.content > header.content-header > h2.title {
    font-size: 2em;
}

推荐

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

属性简写 css 提供了各类简写属性（

font

、

background

等等），使用简写属性对于代码效率和可读性是有颇有用的。
不推荐

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2px;
padding-left: 1px;
padding-right: 1px;
padding-top: 0;

推荐

border-top: none;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1px 2px;

可是不能滥用简写形式，过分使用简写形式的属性声明会致使代码混乱，而且会对属性值带来没必要要的覆盖从而引发意外的反作用。
不推荐

width:100px;
margin:0 auto;

推荐

width:100px;
margin-right:auto;
margin-left:auto;

省略 0 后面的单位不要在 0 值后面使用单位。
不推荐

padding-bottom: 0px;
margin: 0em;

推荐

padding-bottom: 0;
margin: 0;

使用 16 进制表示颜色值 css 中的颜色值能够使用 16 进制来表示，在可能的状况下，能够进行缩写，好比：

#fff

、

#000

。
hack 的使用虽然 hacks 可以很方便的解决浏览器之间的兼容问题，可是咱们仍是不要使用 hacks，尽可能从根本上解决问题，好比改变结构等等。
声明顺序为了保证更好的可读性，咱们应该遵循如下顺序：
定位：

position

z-index

top

right

bottom

left

clip

布局：

display

float

clear

visibility

overflow

overflow-x

overflow-y

尺寸：

width

min-width

max-width

height

min-height

max-height

外边距：

margin

margin-top

margin-right

margin-bottom

margin-left

内边距：

padding

padding-top

padding-right

padding-bottom

padding-left

边框：

border

border-top

border-right

border-bottom

border-left

border-radius

box-shadow

border-image

背景：

background

background-color

background-image

background-repeat

background-attachment

background-position

background-origin

background-clip

background-size

颜色：

color

opacity

字体：

font

font-style

font-variant

font-weight

font-size

font-family

文本：

text-transform

white-space

word-break

word-wrap

overflow-wrap

text-align

word-spacing

letter-spacing

text-indent

vertical-align

line-height

文本修饰：

text-decoration

text-shadow

书写模式：

direction

unicode-bidi

writing-mode

列表：

list-style

list-style-image

list-style-position

list-style-type

表格：

table-layout

border-collapse

border-spacing

caption-side

empty-cells

内容：

content

counter-increment

counter-reset

quotes

用户界面：

appearance

text-overflow

outline

outline-width

outline-color

outline-style

outline-offset

cursor

zoom

box-sizing

resize

user-select

多列：

columns

column-width

column-count

column-gap

column-rule

column-rule-width

column-rule-style

column-rule-color

column-span

column-fill

column-break-before

column-break-after

column-break-inside

伸缩盒：

flex

变换，过渡，动画：

transform

transition

animation

媒体查询的位置将媒体查询放在尽量相关规则的附近。不要将他们打包放在一个单同样式文件中或者放在文档底部。若是你把他们分开了，未来只会被你们遗忘。
推荐

.element {}
.element-avatar {}
.element-selected {}

@media (min-width: 480px) {
    .element {}
    .element-avatar {}
    .element-selected {}
}

带前缀的属性当使用特定厂商的带有前缀的属性时，经过缩进的方式，让每一个属性的值在垂直方向对齐，这样便于多行编辑。

.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
            box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

引号属性选择器或属性值用双引号（

""

），而不是单引号（

''

）括起来。url 的值不要使用引号。
不推荐

import url('//cdn.com/foundation.css');
input[type='submit'] {
    font-family: 'open sans', arial, sans-serif;
}
body:after {
    content: 'pause';
}

推荐

@import url(//cdn.com/foundation.css);
input[type="submit"] {
    font-family: "open sans", arial, sans-serif;
}
body:after {
    content: "pause";
}

声明结束为了保证一致性和可扩展性，每一个声明应该用分号结束。
不推荐

.demo {
    width:100px;
    height:100px
}

推荐

.demo {
    width:100px;
    height:100px;
}

多行规则声明为了易读性和便于快速编辑，统一将语句分为多行，即便该样式只包含一条声明。
不推荐

.demo {width:100px;height:100px;}

推荐

.demo {
    width:100px;
    height:100px;
}

中文字体引用 css 中文字体能够用 unicode 格式来表示，好比“宋体”能够用

\5B8B\4F53

来表示。具体参考下表：
中文英文名 unicode 宋体 SimSun 5B8B4F53 微软雅黑 Microsoft YaHei 5FAE8F6F96C59ED1 更多字体点击查看。
对于 sass 的嵌套在 sass 中你能够嵌套选择器，这能够使代码变得更清洁和可读。嵌套全部的选择器，但尽可能避免嵌套没有任何内容的选择器。
若是你须要指定一些子元素的样式属性，而父元素将不什么样式属性，能够使用常规的 css 选择器链，这将防止您的脚本看起来过于复杂。
不推荐

.content {
    display: block;
}
 
.content > .news-article > .title {
    font-size: 1.2em;
}

推荐

.content {
    display: block;
    > .news-article > .title {
      font-size: 1.2em;
    }
}

当使用 sass 的嵌套功能的时候，重要的是有一个明确的嵌套顺序。
当前选择器的

@extend

和

@include

当前选择器的样式属性
父级选择器的伪类选择器（

:first-letter

，

:hover

，

:active

等等）
伪类元素（

:before

和

:after

）
父级选择器的声明样式（

.selected

，

.active

等等）
用 sass 的上下文媒体查询
子选择器做为最后的部分

.test {
    @extend %clearfix;
    color:#ccc;
    &:hover {
        color:#000;
    }
    &:before {
        border:1px solid #eee;
        content:"";
    }
    &.active {
        color:#f00;
        &:hover {
            color:#ff0;
        }
    }
    @media screen and (max-width: 640px) {
        display:block;
        font-size:2em;
    }
    > .title {
        font-size:1.2em;
    }
}

参考文献 Web Styleguide - Style guide to harmonize HTML, Javascript and CSS / Sass coding style
http://www.css88.com/archives...
转载于猿2048:➻《【规范】前端编码规范——css 规范》