CSS 开发规范

一. 规范概述

规范是明文规定或约定俗成的标准，规范的制定，表明我们选择一种标准来完成某些事情，这个标准可能更好、更快、更简单等等。而CSS规范的制定，目的在于： ​

  • 形成固定的代码风格
  • 选择合适的CSS解决方案 ​
  • 提高协同开发的便捷性​​​​​​

二. CSS书写规范

格式与排版

  • 缩进

    使用4个空格代替tab来进行缩进，类似Atom的编辑器可以设置。以保证在所有环境下获得一致展现。

  • 小写

    所有的样式及规则必须小写。统一使用小写易于识别。

  • 空格

    • 删除行尾空格
    • 选择器与大括号{之间保留一个空格
    • 声明语句的:后保留一个空格
    • 逗号,之后保留一个空格

  • 换行

    • 所有规则需要换行
    • 多组选择器之间需要换行

  • 分号

    每条规则结束后都必须加上分号;。

/* bad css */
.selector, .selector-secondary, .selector[type=text]{
    padding:15px;margin:0px 0px 15px;background-color:rgba(0, 0, 0, 0.5)
}

/* good css */
.selector,
.selector-secondary,
.selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
}

格式与编排的规范主要是统一代码风格，提高代码易读性。

属性与值

  • 属性顺序

    相关的属性声明应该归组，并按照合适的顺序排列。完整顺序参考：Recess

    • Positioning
      位置，​position, top, right, z-index等。
    • Box-model
      盒模型，display,float,width,height等。
    • Typography & Visual
      排版与视效，​font,line-height,text-align等。
    • Misc
      其他，opacity,animation, transition等。
    .declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography & Visual*/
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
}

  • 私有属性

    私有属性在前标准属性在后。 带私有前缀的属性由长到短排列。​

    • -webkit-
    • -moz-
    • -ms-
    • -o-
    • -khtml-
      基本都没有用了，被-webkit-取代。
    /* Prefixed properties */
.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
    -ms-box-shadow: 0 1px 2px rgba(0,0,0,.15);
    -o-box-shadow: 0 1px 2px rgba(0,0,0,.15);
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

    如何快速添加 Vendor prefixes
    使用 Emmet 可以简写上诉代码为-wmso-bxsd。

    • w: webkit
    • m: moz
    • s: ms
    • o: o

  • 属性简写
    在需要显示地设置所有值的情况下，应当尽量使用简写形式的属性声明。
    CSS简写属性有：

    • background

      /* example */
.selector {
    background: #f00 url(example.jpg) no-repeat center top;
}

    • font

      /* example */
.selector {
    font: italic bold .8em/1.2 Arial, sans-serif;
}

    • margin

      /* example */
.selector {
    margin: 0 auto;
}

    • padding

      /* example */
.selector {
    padding: 10px 20px 5px;
}

    • border

      • border-top
      • border-right
      • border-bottom
      • border-left
      • border-width
      • border-color
      • border-style
      /* example */
.selector {
    border: 1px solid #000;
}

    • border-radius

      /* example */
.selector {
    border-radius: 3px 3px 0 0;
}

    • transition

    • transform

    • list-style

      参考文档：Shorthand properties

  • 属性值分组

    对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。

    /* example */
.selector {
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.04, rgb(88,94,124)),
        color-stop(0.52, rgb(115,123,162))
    );
}

  • 数字

    • 0
      如果属性值为0，则不需要为0加单位。

      /* bad css */
.selector {
    padding: 0px 20px;
}
/* good css */
.selector {
    padding: 0 20px;
}

    • 小数
      如果是0开始的小数，前面的0可以省略不写。

      /* bad css */
.selector {
    width: 0.4rem;
    margin-top: -0.1rem;
}
/* good css */
.selector {
    width：.4rem;
    margin-top: -.1rem;
}

  • 引用

    不要在url()里对引用资源加引号。

    /* bad css */
.selector {
    background:url("example.jpg") ;
}
/* good css */
.selector {
    background:url(example.jpg) ;
}

  • 文本

    文本内容必须用双引号包围。文本类型的内容可能在选择器、属性值等内容中。

    /* bad css */
html[lang|=zh] q:before {
    font-family: 'Microsoft YaHei', sans-serif;
    content: '“';
}

/* good css */
html[lang|="zh"] q:before {
    font-family: "Microsoft YaHei", sans-serif;
    content: "“";
}

  • 颜色

    RGB颜色值必须使用十六进制记号形式。将所有的颜色值小写。可以缩写的缩写至3位。

    /* bad css */
.selector {
    background: rgb(255, 0, 0) ;
    color: #00FF00;
}
/* good css */
.selector {
    background: #f00 ;
    color: #0f0;
}

三. CSS命名规范

组成

  • 单词组合

    避免使用拼音。
    不依据表现形式来命名。
    根据内容来命名。
    根据功能来命名。​
    使用业界熟知的或者约定俗成的。
    避免选择器命名过长时可选择使用缩写，保证缩写后还能较为清晰保持原单词所能表述的意思。

    /* bad css name */
.left, .right, .center, .red, .black

/* good css name */
.nav, .aside, .news, .type, .search

    常用命名：

    • 结构
      • 外壳：wrapper (wrap)
      • 头：header (hd)
      • 内容：content / container (cont)
      • 尾：footer (ft)
      • 导航：navigation (nav)
      • 侧栏：sidebar
      • 栏目：column
      • 页面主体：main
      • 子导航：subnav
      • 菜单：menu
      • 子菜单：submenu
      • 列表：list
    • 功能
      • 登录条：loginbar (login)
      • 热点：hot
      • 下载：download
      • 搜索：search
      • 滚动：scroll
      • 加入：joinus
      • 指南：guide
      • 服务：service
      • 注册：regsiter
      • 状态：status
      • 投票：vote
      • 合作伙伴：partner
    • 内容
      • 标志：logo
      • 广告：banner
      • 新闻：news
      • 友情链接：friendlink
      • 版权：copyright
      • 标签：tags
      • 小技巧：tips
      • 提示信息：msg
      • 栏目标题：title

  • 中划线

    输入的时候少按一个shift键。
    浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）。
    能良好区分JavaScript变量命名（JS变量命名是用_）。

  • 数字

前缀

CSS选择器使用前缀能够较好的控制样式在项目间的影响。

  • g-

    全局通用样式命名，前缀g全称为global，一旦修改将影响全站样式​。

  • m-

    模块命名方式。

  • ui-

    组件命名方式。

  • js-

    所有用于纯交互的命名，不涉及任何样式规则。JSer拥有全部定义权限。

四. CSS其他规范

目录

  • styles

    • lib
      基础库
      • core
        Reset、全局设置、全局方法、全局​​​函数、全局变量​。
      • element
        元素样式。
      • widget
        公用组件。
      • layout
        全局布局。
      • ani
        公用动效。
      • font
        公用字体。
    • usage
      具体实现。
      • project
        项目名
        • core
          桥接lib中的core，进行项目级扩展，制定项目样式默认尺寸、颜色等​。
        • widget
          项目组件，扩展于lib中widget。
        • module
          项目模块。
        • page
          页面特殊样式。
        • theme
          主题。
        • mend
          补丁。
        • export
          样式打包输出。
文件

  • 命名

    • 模块样式的文件名应与模块名保持一致
    • 页面样式的文件名应与页面名保持一致

  • 协议

    省略图像、媒体文件、样式表和脚本等URL协议头部声明(http:,https:)。如果不是这两个声明的URL则不省略。

  • 引用

    一般情况下，在页面中只允许使用<link />标签来引用CSS文件。
    避免在页面中使用<style>块。
    避免在<style>块中使用 @import。
    避免使用style属性写行内样式。​

编码

以UTF-8无BOM编码作为文件格式。
HTML中文档中用 <meta charset="utf-8" /> 来指定编码。
CSS文档显示的定义编码，在文档首行定义 @charset "utf-8"​​。
统一编码，避免编译错误​。

模块化

每个模块对应同名文件，模块样式以模块名开头，子节点继承模块名开头，孙节点无需再带模块名。

.m-detail {
    background: #fff;
    color: #333;
}
.m-detail-hd {
    padding: 5px 10px;
    background: #eee;
}
.m-detail-hd .title {
    background: #eee;
}
选择器

重构工程师只允许使用class。
择器的嵌套层级尽量不大于3级。
避免使用低效率选择器。具体详见：CSS选择器。

注释

尽可能的为代码添加注释，CSS注释可以区分样式模块、解释作用、问题描述。

  • 文件注释

    /**
 * @​Description: 中文说明 ​
 * @Author: name ​
 * @Update: name (2013-04-13 18:32) ​
 */

  • 普通注释

    /* 普通注释 */

  • 模块注释

    /**
* Module: m-detail
* ​Description: 中文说明
*/

  • 特殊注释

    /* TODO: xxxx by name 2013-04-13 18:32 */
/* BUGFIX: xxxx by name 2012-04-13 18:32 */

  • 区块注释

    /* Header */
​/* Footer */
​/* Gallery */
Hack

尽避免使用Hack，如果一定要使用，可以使用以下方式：

  • 属性与值

    • \9
      For all IE
    • \0
      For IE8 and later, Opera without Webkit
    • \9\0
      For IE8 and later
    • \0/
      For IE8 and later
    • *
      For IE7 and earlier
    • _
      For IE6 and earlier
    .test {
　　　color: #000;    
　　　color: #111\9;  
　　　color: #222\0;  
　　　color: #333\9\0;
　　　color: #444\0/;
　　　*color: #666;   
　　　_color: #777;   
}

  • 条件注释

    <!--[if <keywords>? IE <version>?]>
<link rel="stylesheet" href="*.css" />
<![endif]-->

    • 空：指定是否IE或IE某个版本
    • gt(greater than): 大于IE某个版本
    • gte(greater than or equal to): 大于等于IE某个版本
    • lt(less than): 小于IE某个版本
    • gt(less than or equal to): 小于IE某个版本
图像

  • 压缩

    所有图片必须经过一定的压缩和优化才能发布。
    在线压缩：online image optimizer

  • 格式

    不透明图像使用JPEG。
    ​透明图像使用PNG。
    需要兼容IE6时，使用PNG8​。

  • 合成

    使用CSS Sprite减少http请求。

五.总结

附

CSS开发规范

参考文档
posted @ 2017-01-10 20:35  Ciimoo  阅读(199)  评论(0)    收藏  举报