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

时间:2022-04-09 00:23:16

编码

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

@charset "UTF-8";

class 命名

class 名称应当尽可能短,并且意义明确。使用有意义的名称,使用有组织的或目的明确的名称,不要使用表现形式的名称。

不推荐

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

推荐

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

使用中划线(-)分隔 class 中的单词。虽然它很不方便的让你双击选择,但是它可以增强理解性。另外属性选择器 [attribute|=value] 也能识别中划线(-),所以最好坚持使用中划线作为分隔符。

不推荐

.slide_hd {}
.slide_bd {}

推荐

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

基于最近的父 class 或基本 class 作为新 class 的前缀。

不推荐

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

推荐

.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 提供了各种简写属性(fontbackground 等等),使用简写属性对于代码效率和可读性是有很有用的。

不推荐

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,尽量从根本上解决问题,比如改变结构等等。

声明顺序

为了保证更好的可读性,我们应该遵循以下顺序:

  1. 定位:position | z-index | top | right | bottom | left | clip
  2. 布局:display | float | clear | visibility | overflow | overflow-x | overflow-y
  3. 尺寸:width | min-width | max-width | height | min-height | max-height
  4. 外边距:margin | margin-top | margin-right | margin-bottom | margin-left
  5. 内边距:padding | padding-top | padding-right | padding-bottom | padding-left
  6. 边框:border | border-top | border-right | border-bottom | border-left | border-radius | box-shadow | border-image
  7. 背景:background | background-color | background-image | background-repeat | background-attachment | background-position | background-origin | background-clip | background-size
  8. 颜色:color | opacity
  9. 字体:font | font-style | font-variant | font-weight | font-size | font-family
  10. 文本:text-transform | white-space | word-break | word-wrap | overflow-wrap | text-align | word-spacing | letter-spacing | text-indent | vertical-align | line-height
  11. 文本修饰:text-decoration | text-shadow
  12. 书写模式:direction | unicode-bidi | writing-mode
  13. 列表:list-style | list-style-image | list-style-position | list-style-type
  14. 表格:table-layout | border-collapse | border-spacing | caption-side | empty-cells
  15. 内容:content | counter-increment | counter-reset | quotes
  16. 用户界面:appearance | text-overflow | outline | outline-width | outline-color | outline-style | outline-offset | cursor | zoom | box-sizing | resize | user-select
  17. 多列:columns | column-width | column-count | column-gap | column-rule | column-rule-widthcolumn-rule-style | column-rule-color | column-span | column-fill | column-break-before | column-break-after | column-break-inside
  18. 伸缩盒:flex
  19. 变换,过渡,动画: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 \5B8B\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1

更多字体点击查看

对于 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 的嵌套功能的时候,重要的是有一个明确的嵌套顺序。

  1. 当前选择器的 @extend 和 @include
  2. 当前选择器的样式属性
  3. 父级选择器的伪类选择器(:first-letter:hover:active 等等)
  4. 伪类元素(:before 和 :after
  5. 父级选择器的声明样式(.selected.active 等等)
  6. 用 sass 的上下文媒体查询
  7. 子选择器作为最后的部分
.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;
}
}

参考文献