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>

    [↑]

参考

时间： 2024-09-17 03:09:44

CSS 规范的相关文章

CSS规范 闭合浮动元素介绍

css|浮动|规范 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列.因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素.但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢.后来又有了一种新的方式,使用 :after 伪类

CSS规范学习：闭合浮动元素

css|浮动|规范 闭合浮动元素 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列.因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素.但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢. 后来又有了一种新的方式,使用 :

网易NEC项目的CSS规范

CSS规范 - 分类方法 CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成"公共型样式"."特殊型样式"."皮肤型样式",并以此顺序引用(按需求决定是否添加版本号). 公共型样式:包括了以下几个部分:"标签的重置和设置默认值"."统一调用背景图和清除浮动或其他需统一处理的长样式"."网站

[译]谷歌 HTML/CSS 规范

背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除非文件在两种协议下都不可用.这种方案称为 protocol-relative URL,好处是无论你是使用 HTTPS 还是 HTTP 访问页面,浏览器都会以相同的协议请求页面中的资源,同时可以节省一部分字节. <!-- Not recommended -->    <script src=&

DIV+CSS制作专业信息网站的制作规范

css|规范 专业信息网站制作规范 一. 导航要求 在此站点的每一个页面都出现 内容包括:主页,网站介绍,站点视图,联系方式,反馈,搜索工具,常见问题解答,实际内容栏目(包括相关站点链接.新闻页) 栏目如果采用图标,下面应附有文字说明,以避免图像表达不清. 无任何链接内容的不做成按钮的形式 纯文本like用常用颜色.避免在链接处使用特殊的颜色.应该使用标准.醒目的颜色. 屏幕上显示的页面所对应的按钮应该相应变成灰色.突出显示或以其它方式表示出来. 每个页面都应包括: 版权及网站管理员的E-mai

简明HTML CSS开发规范

css|规范|开发规范 //总论 本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通.但是,请大家千万不要随意更改规范.如果有任何问题,请及时与我联系,我会及时更改本规范的相关代码样例和文档. /基 本 要 求 1. 在网站根目录中开设images common temp 三个子目录,根据需要再开设media 子目录,images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志.banner 条.菜单.按钮等等:

网页制作 谈谈CSS样式表的命名规范

css|规范|网页|样式表 最近和一程序员合作项目.弄的我头都大了~埋怨我的CSS命名看不懂~得按照他的来.结果我打开他的页面,看了看,从头第一个开始就是contentCommon,下面全部是content****. 我说明了我的理由,过了半会,似乎是接受了,却突然来一句:"不要用H标签嘛!还有不要用UL来定义导航等".对于很多合作过的程序员,大多都是这样,命名规范大多是自成一派.对于制作标准更是视而不见.抱着只照顾IE正常浏览的态度叫嚣着"让FIREFOX和SAFARI见鬼

网页制作教程：CSS 命名规范

css|规范|教程|网页 XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离,代码中不涉及任何的表现元素,如style.font.bgColor.border等 <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询. 给每一个表格和表单加上一

DIV CSS网页布局规范的对CSS的类及id命名

css|规范|网页 Web开发者(也就是您)可以通过创建CSS类及id名称并使用这些名称来对div以及其他的页面元素.标签进行标识.对开发人员来说,在命名重新定义XHTML标记(tags)的CSS selectors时,必须保证其与预定义的标记准确匹配,但就类以及id选择器名称而言,则仁者见仁,智者见智.然而随心所欲的为这些类以及id命名则并不是个好的习惯.  在阅读了由Andy Clarke(of Stuff and Nonsense and All That Malarkey)以及Eric