CSS 规范-阿里云开发者社区

开发者社区> waylau> 正文

CSS 规范

简介:
+关注继续查看

缩进

  • 使用 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>
    

    [↑]


参考

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

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9581 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9078 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13291 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7396 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4095 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22009 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7001 0
+关注
waylau
大道至简! https://waylau.com/
238
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载