备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

CSS 规范

2016-05-18 1551
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

缩进

  • 使用 soft tab（4个空格）。

    .element {
    position: absolute;
    top: 10px;
    left: 10px;

    border-radius: 10px;
    width: 50px;
    height: 50px;
}

    [↑]

分号

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

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

    background-color: red;
}

    [↑]

空格

  • 以下几种情况不需要空格：
    • 属性名后
    • 多个规则的分隔符,前
    • !important !后
    • 属性值中(后和)前
    • 行末不要有多余的空格
  • 以下几种情况需要空格：
    • 属性值前
    • 选择器>, +, ~前后
    • {前
    • !important !前
    • @else 前后
    • 属性值中的,后
    • 注释/*后和*/前
    /* not good */
.element {
    color :red! important;
    background-color: rgba(0,0,0,.5);
}

/* good */
.element {
    color: red !important;
    background-color: rgba(0, 0, 0, .5);
}

/* not good */
.element ,
.dialog{
    ...
}

/* good */
.element,
.dialog {

}

/* not good */
.element>.dialog{
    ...
}

/* good */
.element > .dialog{
    ...
}

/* not good */
.element{
    ...
}

/* good */
.element {
    ...
}

/* not good */
@if{
    ...
}@else{
    ...
}

/* good */
@if {
    ...
} @else {
    ...
}

    [↑]

空行

  • 以下几种情况需要空行：
    • 文件最后保留一个空行
    • }后最好跟一个空行，包括scss中嵌套的规则
    • 属性之间需要适当的空行，具体见属性声明顺序 
    /* not good */
.element {
    ...
}
.dialog {
    color: red;
    &:after {
        ...
    }
}

/* good */
.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

    [↑]

换行

  • 以下几种情况不需要换行：
    • {前
  • 以下几种情况需要换行：
    • {后和}前
    • 每个属性独占一行
    • 多个规则的分隔符,后
    /* not good */
.element
{color: red; background-color: black;}

/* good */
.element {
    color: red;
    background-color: black;
}

/* not good */
.element, .dialog {
    ...
}

/* good */
.element,
.dialog {
    ...
}

    [↑]

注释

  • 注释统一用/* */（scss中也不要用//），具体参照例子的写法；
  • 缩进与下一行代码保持一致；

  • 可位于一个代码行的末尾，与代码间隔一个空格。

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

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

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

    color: red; /* color red */
}

    [↑]

引号

  • 最外层统一使用双引号；
  • url的内容要用引号；

  • 属性选择器中的属性值需要引号。

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

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

    [↑]

命名

  • 类名使用小写字母，以中划线分隔
  • id采用驼峰式命名

  • scss中的变量、函数、混合、placeholder采用驼峰式命名

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

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

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

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

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

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

    [↑]

属性声明顺序

  • 相关的属性声明按例子的顺序做分组处理，组之间需要有一个空行。

    .declaration-order {
    display: block;
    float: right;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    border: 1px solid #e5e5e5;
    border-radius: 3px;
    width: 100px;
    height: 100px;

    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    text-align: center;

    color: #333;
    background-color: #f5f5f5;

    opacity: 1;
}
// 下面是推荐的属性的顺序
[    [        "display",        "visibility",        "float",        "clear",        "overflow",        "overflow-x",        "overflow-y",        "clip",        "zoom"    ],
    [        "table-layout",        "empty-cells",        "caption-side",        "border-spacing",        "border-collapse",        "list-style",        "list-style-position",        "list-style-type",        "list-style-image"    ],
    [        "-webkit-box-orient",        "-webkit-box-direction",        "-webkit-box-decoration-break",        "-webkit-box-pack",        "-webkit-box-align",        "-webkit-box-flex"    ],
    [        "position",        "top",        "right",        "bottom",        "left",        "z-index"    ],
    [        "margin",        "margin-top",        "margin-right",        "margin-bottom",        "margin-left",        "-webkit-box-sizing",        "-moz-box-sizing",        "box-sizing",        "border",        "border-width",        "border-style",        "border-color",        "border-top",        "border-top-width",        "border-top-style",        "border-top-color",        "border-right",        "border-right-width",        "border-right-style",        "border-right-color",        "border-bottom",        "border-bottom-width",        "border-bottom-style",        "border-bottom-color",        "border-left",        "border-left-width",        "border-left-style",        "border-left-color",        "-webkit-border-radius",        "-moz-border-radius",        "border-radius",        "-webkit-border-top-left-radius",        "-moz-border-radius-topleft",        "border-top-left-radius",        "-webkit-border-top-right-radius",        "-moz-border-radius-topright",        "border-top-right-radius",        "-webkit-border-bottom-right-radius",        "-moz-border-radius-bottomright",        "border-bottom-right-radius",        "-webkit-border-bottom-left-radius",        "-moz-border-radius-bottomleft",        "border-bottom-left-radius",        "-webkit-border-image",        "-moz-border-image",        "-o-border-image",        "border-image",        "-webkit-border-image-source",        "-moz-border-image-source",        "-o-border-image-source",        "border-image-source",        "-webkit-border-image-slice",        "-moz-border-image-slice",        "-o-border-image-slice",        "border-image-slice",        "-webkit-border-image-width",        "-moz-border-image-width",        "-o-border-image-width",        "border-image-width",        "-webkit-border-image-outset",        "-moz-border-image-outset",        "-o-border-image-outset",        "border-image-outset",        "-webkit-border-image-repeat",        "-moz-border-image-repeat",        "-o-border-image-repeat",        "border-image-repeat",        "padding",        "padding-top",        "padding-right",        "padding-bottom",        "padding-left",        "width",        "min-width",        "max-width",        "height",        "min-height",        "max-height"    ],
    [        "font",        "font-family",        "font-size",        "font-weight",        "font-style",        "font-variant",        "font-size-adjust",        "font-stretch",        "font-effect",        "font-emphasize",        "font-emphasize-position",        "font-emphasize-style",        "font-smooth",        "line-height",        "text-align",        "-webkit-text-align-last",        "-moz-text-align-last",        "-ms-text-align-last",        "text-align-last",        "vertical-align",        "white-space",        "text-decoration",        "text-emphasis",        "text-emphasis-color",        "text-emphasis-style",        "text-emphasis-position",        "text-indent",        "-ms-text-justify",        "text-justify",        "letter-spacing",        "word-spacing",        "-ms-writing-mode",        "text-outline",        "text-transform",        "text-wrap",        "-ms-text-overflow",        "text-overflow",        "text-overflow-ellipsis",        "text-overflow-mode",        "-ms-word-wrap",        "word-wrap",        "-ms-word-break",        "word-break"    ],
    [        "color",        "background",        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",        "background-color",        "background-image",        "background-repeat",        "background-attachment",        "background-position",        "-ms-background-position-x",        "background-position-x",        "-ms-background-position-y",        "background-position-y",        "-webkit-background-clip",        "-moz-background-clip",        "background-clip",        "background-origin",        "-webkit-background-size",        "-moz-background-size",        "-o-background-size",        "background-size"    ],
    [        "outline",        "outline-width",        "outline-style",        "outline-color",        "outline-offset",        "opacity",        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",        "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",        "-ms-interpolation-mode",        "-webkit-box-shadow",        "-moz-box-shadow",        "box-shadow",        "filter:progid:DXImageTransform.Microsoft.gradient",        "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",        "text-shadow"    ],
    [        "-webkit-transition",        "-moz-transition",        "-ms-transition",        "-o-transition",        "transition",        "-webkit-transition-delay",        "-moz-transition-delay",        "-ms-transition-delay",        "-o-transition-delay",        "transition-delay",        "-webkit-transition-timing-function",        "-moz-transition-timing-function",        "-ms-transition-timing-function",        "-o-transition-timing-function",        "transition-timing-function",        "-webkit-transition-duration",        "-moz-transition-duration",        "-ms-transition-duration",        "-o-transition-duration",        "transition-duration",        "-webkit-transition-property",        "-moz-transition-property",        "-ms-transition-property",        "-o-transition-property",        "transition-property",        "-webkit-transform",        "-moz-transform",        "-ms-transform",        "-o-transform",        "transform",        "-webkit-transform-origin",        "-moz-transform-origin",        "-ms-transform-origin",        "-o-transform-origin",        "transform-origin",        "-webkit-animation",        "-moz-animation",        "-ms-animation",        "-o-animation",        "animation",        "-webkit-animation-name",        "-moz-animation-name",        "-ms-animation-name",        "-o-animation-name",        "animation-name",        "-webkit-animation-duration",        "-moz-animation-duration",        "-ms-animation-duration",        "-o-animation-duration",        "animation-duration",        "-webkit-animation-play-state",        "-moz-animation-play-state",        "-ms-animation-play-state",        "-o-animation-play-state",        "animation-play-state",        "-webkit-animation-timing-function",        "-moz-animation-timing-function",        "-ms-animation-timing-function",        "-o-animation-timing-function",        "animation-timing-function",        "-webkit-animation-delay",        "-moz-animation-delay",        "-ms-animation-delay",        "-o-animation-delay",        "animation-delay",        "-webkit-animation-iteration-count",        "-moz-animation-iteration-count",        "-ms-animation-iteration-count",        "-o-animation-iteration-count",        "animation-iteration-count",        "-webkit-animation-direction",        "-moz-animation-direction",        "-ms-animation-direction",        "-o-animation-direction",        "animation-direction"    ],
    [        "content",        "quotes",        "counter-reset",        "counter-increment",        "resize",        "cursor",        "-webkit-user-select",        "-moz-user-select",        "-ms-user-select",        "user-select",        "nav-index",        "nav-up",        "nav-right",        "nav-down",        "nav-left",        "-moz-tab-size",        "-o-tab-size",        "tab-size",        "-webkit-hyphens",        "-moz-hyphens",        "hyphens",        "pointer-events"    ]
]

    [↑]

颜色

  • 使颜色16进制用小写字母；

  • 颜色16进制尽量用简写。

    /* not good */
.element {
    color: #ABCDEF;
    background-color: #001122;
}

/* good */
.element {
    color: #abcdef;
    background-color: #012;
}

    [↑]

属性简写

  • 属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰；
  • margin 和 padding 相反，需要使用简写；
  • 常见的属性简写包括：
    • font
    • background
    • transition
    • animation
    /* not good */
.element {
    transition: opacity 1s linear 2s;
}

/* good */
.element {
    transition-delay: 2s;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
}

    [↑]

媒体查询

  • 尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。

    .element {
    ...
}

.element-avatar{
    ...
}

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

    .element-avatar {
        ...
    }
}

    [↑]

杂项

  • 不允许有空的规则；
  • 元素选择器用小写字母；
  • 去掉小数点前面的0；
  • 去掉数字中不必要的小数点和末尾的0；
  • 属性值0后面不要加单位；
  • 同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照右边的写法；
  • 无前缀的标准属性应该写在有前缀的属性后面；
  • 不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；
  • 不要在一个文件里出现两个相同的规则；
  • 用 border: 0; 代替 border: none;；
  • 选择器不要超过4层（在scss中如果超过4层应该考虑用嵌套的方式来写）；

  • 尽量少用*选择器。

    /* not good */
.element {
}

/* not good */
LI {
    ...
}

/* good */
li {
    ...
}

/* not good */
.element {
    color: rgba(0, 0, 0, 0.5);
}

/* good */
.element {
    color: rgba(0, 0, 0, .5);
}

/* not good */
.element {
    width: 50.0px;
}

/* good */
.element {
    width: 50px;
}

/* not good */
.element {
    width: 0px;
}

/* good */
.element {
    width: 0;
}

/* not good */
.element {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;

    background: linear-gradient(to bottom, #fff 0, #eee 100%);
    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background: -moz-linear-gradient(top, #fff 0, #eee 100%);
}

/* good */
.element {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;

    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background:    -moz-linear-gradient(top, #fff 0, #eee 100%);
    background:         linear-gradient(to bottom, #fff 0, #eee 100%);
}

/* not good */
.element {
    color: rgb(0, 0, 0);
    width: 50px;
    color: rgba(0, 0, 0, .5);
}

/* good */
.element {
    color: rgb(0, 0, 0);
    color: rgba(0, 0, 0, .5);
}

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

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

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

    [↑]

参考

文章标签：
前端开发
关键词：
CSS规范
waylau
目录
相关文章
小周sir
|
22天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
小周sir
41 4
武汉-郑昊
|
前端开发 Go C++
CSS命名规则规范整理
大家在写css的时候，经常会遇到关于命名的问题。页面上成百甚至上千的class或者id，我们就会越来越感到困扰。 所以，这样我们就很有必要整理自己的一套命名规范。
武汉-郑昊
6797 0
CSS命名规则规范整理
YiShier
|
6月前
|
前端开发 JavaScript 程序员
CSS规范-1
CSS规范
YiShier
39 0
讓丄帝愛伱
|
5月前
|
前端开发 JavaScript 编译器
前端开发规范：命名规范、html规范、css规范、js规范（四）
前端开发规范：命名规范、html规范、css规范、js规范
讓丄帝愛伱
144 0
讓丄帝愛伱
|
5月前
|
前端开发 JavaScript
前端开发规范：命名规范、html规范、css规范、js规范（三）
前端开发规范：命名规范、html规范、css规范、js规范
讓丄帝愛伱
81 0
讓丄帝愛伱
|
5月前
|
数据采集 前端开发 JavaScript
前端开发规范：命名规范、html规范、css规范、js规范（二）
前端开发规范：命名规范、html规范、css规范、js规范
讓丄帝愛伱
62 0
讓丄帝愛伱
|
5月前
|
移动开发 前端开发 JavaScript
前端开发规范：命名规范、html规范、css规范、js规范（一）
前端开发规范：命名规范、html规范、css规范、js规范
讓丄帝愛伱
189 0
YiShier
|
6月前
|
前端开发 容器
CSS规范-2
CSS规范-2
YiShier
22 0
汪末末
|
6月前
|
前端开发 JavaScript 程序员
CSS 样式书写顺序及规范
CSS 样式书写顺序及规范
汪末末
57 0
chengfengpolang
|
前端开发 JavaScript
CSS的命名是规范的吗？应该如何优化？底层原理是什么？
CSS的命名是规范的吗？应该如何优化？底层原理是什么？
chengfengpolang
89 0