CSS 编码规范

时间:2020-05-30
本文章向大家介绍CSS 编码规范,主要包括CSS 编码规范使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

一. CSS 书写规范

缩进

使用 4 个空格做为一个缩进层级。

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

空格

1.选择器与 '{' 之间要包含空格;
2.属性名与之后的 ':' 之间不允许包含空格, ':' 与 属性值之间要包含空格;
3.列表型属性值书写在单行时,',' 后要跟一个空格;
4.注释 '/*' 后和 '*/' 前要有一个空格。

/* good */
.selector {
    margin: 0;
    font-family: Arial, sans-serif;
}

5.">、+、~ "选择器的两边各保留一个空格。

main > nav {
    padding: 10px;
}

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

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

分号

每个属性声明末尾都要加分号。

.element {
    width: 20px;
    height: 20px;

    background-color: red;
}

空行

1.'}' 后最好跟一个空行,包括 scss、less等中嵌套的规则;
2.属性之间需要适当的空行。

.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

换行

1.'{' 后和 '}' 前;
2.每个属性独占一行;
3.多个规则的分隔符 ',' 后。

.element {
    color: red;
    background-color: black;
}

.element,
.dialog {
    ...
}

引号

1.最外层统一使用双引号;
2.url的内容要用引号;
3.属性选择器中的属性值需要引号。

.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

选择器

1.避免出现过多的祖先选择器,各浏览器会有性能差异,消耗在选择器的时间也不尽相同。
尽量最多控制在3级以内。

/* bad */
ul.example {}
.example1 .example2 .example3 .example4 {}

/* good */
.example {}

.example1,
.example2 {}

2.非必要的情况下不要使用元素标签名和 id 或 class 进行组合。

/* bad */
ul#example {}
div.error {}
/* good */
#example {}
.error {}

属性书写顺序

1.同一 rule set 下的属性在书写时,应按功能进行分组,并以 Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果) 的顺序书写,以提高代码的可读性;
2.Formatting Model 相关属性包括:position / top / right / bottom / left / float / display / overflow 等;
Box Model 相关属性包括:border / margin / padding / width / height 等;
Typographic 相关属性包括:font / line-height / text-align / word-wrap 等;
3.Visual 相关属性包括:background / color / transition / list-style 等;
4.另外,如果包含 content 属性,应放在最前面。

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

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

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

数值

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

panel {
    opacity: .8;
}

长度

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

body {
    padding: 0 5px;
}

颜色

1.rgb 颜色值使用十六进制记号形式 #rrggbb。不要使用 rgb();
2.带有 alpha 的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。

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

3.颜色值可以缩写时,使用缩写形式。

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

/* bad */
.success {
    background-color: #aaccaa;
}

4.颜色值不要使用命名色值。

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

/* bad */
.success {
    color: lightgreen;
}

5.颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

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

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

带前缀的属性

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

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

不要使用 @import

与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:

使用多个 <link> 元素;
通过 Scss 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件;
通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能。

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
    @import url("more.css");
</style>

二. CSS 命名规范

1.类名使用小写字母,以中划线分隔。
2.避免过度任意的简写,要意义明确。.btn 代表 button,但是 .s 不能表达任何意思。
3.id采用驼峰式命名
4.scss、less等中的变量、函数、混合、placeholder采用驼峰式命名。

/* class */
.element-content {
    ...
}

/* id */
#myDialog {
    ...
}

/* 变量 */
$colorBlack: #000;

/* 函数 */
@function pxToRem($px) {
    ...
}

/* 混合 */
@mixin centerBlock {
    ...
}

/* placeholder */
%myDialog {
    ...
}

附常用类 / id 命名规范:

页 眉:header
内 容:content
容 器:container
页 脚:footer
版 权:copyright 
导 航:menu
主导航:mainmenu
子导航:submenu
标 志:logo
标 语:banner
标 题:title
侧边栏:sidebar
图 标:icon
注 释:note
搜 索:search
按 钮:btn
登 录:login
链 接:link
信息框:message

三. CSS 注释

1.注释可以统一用'/* */';
2.缩进与下一行代码保持一致;
3.可位于一个代码行的末尾,与代码间隔一个空格。

/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;

    color: red; /* color red */
}

四. 编辑器配置

将你的编辑器进行设置,可以避免常见的代码不一致和差异。
具体配置信息可查看这里

$flag 上一页 下一页

上一篇:C++ 实现B+树

下一篇:Mybatis代码实例