CSS 编码规范

1. 文件组织 (建议试试LESS)

1.1 CSS 与 HTML

  • CSS 一律写在 CSS 文件中，原则上不写内联样式。

  • CSS 文件命名由小写字母、下划线（_）组成。

  • CSS 文件通过 标签引入 HTML 文件，并放在文档头部即 <head> 标签中，不使用 @import。

1.2 CSS 定义结构

  • 三层结构：

    • 基础框架（reset.css/ 栅格系统等）
    • 通用模块（网页主题/ 通用组件等）
    • 页面样式（布局/ 覆盖等）

    第一层一般是浏览器默认样式重置文件、栅格系统等基础样式；第二层一般是基于基础框架开发的通用模块样式或主题；第三层一般是针对网页布局、根据具体情况书写的或对通用模块进行覆盖的样式。

  • CSS 文件的引入顺序遵从“三层结构”，先引入基础框架，再引入通用模块，最后引入页面样式。

<!-- Recommended -->

<link href="assets/css/reset.css" rel="stylesheet" type="text/css"/>

<link href="assets/css/grid.css" rel="stylesheet" type="text/css"/>

<link href="assets/css/theme.css" rel="stylesheet" type="text/css"/>

<link href="assets/css/common.css" rel="stylesheet" type="text/css"/>

<link href="assets/css/page.css" rel="stylesheet" type="text/css"/>

2. 命名规范

2.1 选择器命名

  • CSS 对大小写敏感，规则命名采用小写字母加中划线（-）的方式。
/* Recommended */

.m-list {}

.u-btn {}

/* Not Recommended */

.mList {} /* 不采用驼峰式命名 */

.u_btn {} /* 不使用下划线 */

  • ID 选择器效率高但唯一，Class 选择器可重用，根据具体的需要进行选择。原则上不直接为标签添加样式（reset 除外），一般推荐使用 Class 选择器。

  • 选择器命名必须有意义，使用英文单词或组合，能够明确地反映元素的模块或功能，不用抽象晦涩的命名。避免使用中文拼音，适当使用英文缩写。

/* Recommended */

.m-table {}

.u-chk {}

/* Not Recommended */

.biaoge {} /* 不用中文拼音 */

.u-abc {} /* 不使用没有语义的命名 */
  • 不允许使用具体的样式名称命名，也不应包含颜色、位置等与现实效果相关的信息。
/* Not Recommended */

.black {} /* 不使用表现相关的命名 */
  • 为 ID 和 Class 加上适当的命名空间（前缀），以避免命名冲突。命名空间不使用单个字母，以免与通用样式冲突。
/* Recommended */

.reg-user {}

.reg-psw {}

.login-user {}

.login-psw {}

2.2 通用样式命名规则

  • 布局（grid） .g-：用于网页布局，如头部、尾部、主体、侧边栏、主栏等。

  • 模块（module） .m-：用于定义可重用的整体，如列表、表格、选项卡、面板等。

  • 元件（unit） .u-：用于定义可重用的个体，如按钮、输入框、图标等。

  • 功能（function） .f-：定义一些常用的、有固定功能的样式，如清除浮动等。

  • 状态 .z-：用于标识状态的样式，通常要与其他选择器配合使用，不单独定义。

  • 皮肤（skin） .s-：定义皮肤型的样式，如背景色（图）、边框色、文字色等，一般只应用于换肤型网站。

  • 特殊用途 .j-：该命名作为JS中的选择器使用，不允许用来定义CSS样式。

/* Recommended */

/* 通用表格模块 */

.m-tbl {}

.m-tbl-hd {}

.m-tbl-bd {}

.m-tbl-ft {}

/* 定制企业表样式 */

.co-tbl .col1 {}

.co-tbl .col2 {}

/* 定制员工表样式 */

.stf-tbl .col1 {}

.stf-tbl .col2 {}

.u-btn {} /* 通用按钮原件 */

.u-btn.z-dis {} /* 不可操作的按钮样式 */

3. 书写规范

3.1 属性规范

  • 采用多行书写格式。

    • 选择器顶格，左大括号与选择器在同一行，与选择器相间一个空格；
    • 每个属性单独占一行，缩进四个空格，以分号结尾；
    • 属性名后紧跟冒号，属性值与冒号相间一个空格；
    • 右大括号单独占一行结尾，顶格。
/* Recommended */

.m-box {

    width: 200px;

    height: 100px;

    border: 1px solid #DDD;

}

  • 使用属性缩写，提高代码执行效率和易读性。（详细查看性能优化 CSS 属性值缩写）

  • 属性值为 0 时，单位可以省略。

/* Recommended */

.m-box {

    margin: 0;

    padding: 0;

}
  • 属性值为小数时，小数点之前的 0 不可以省略。
/* Recommended */

.m-box {

    margin: 0.8em;

}
  • 省略 url 中的引号，其他需要引号的地方使用单引号。
/* Recommended */

.m-box {

    background: url(bg.png);

}

.m-box:after {

    content:'.';

}
  • 颜色值采用十六进制的方式书写，可缩写的需要缩写，需透明度的使用 rgba()。
/* Recommended */

.m-box {

    /* 对于不支持 rgba() 的如 IE8 及以下版本浏览器，按情况使用透明图片背景或 IE Filter */

    background: rgba(0,0,0,0.5);

    color: #FFF;

}

3.2 推荐的样式书写顺序

  • 先是定位布局类等显示属性，再是盒模型等自身属性，然后是文本类及其它修饰类属性，最后是 CSS3 相关属性。其中，浏览器私有属性在前，W3C 标准属性在后。

    | 显示属性 | display, visibility, position, float, clear, list-style, top 等 |
    | 自身属性 | width, height, margin, padding, border, overflow 等 |
    | 文本及修饰属性 | font, text-align, text-decoration, vertical-align, white-space, color, background 等 |
    | CSS3 属性 | border-radius, box-shadow, gradients, transforms, animations 等 |

  • 链接的样式书写顺序遵从 LoVe HAte 规则：

a:link -> a:visited -> a:hover -> a:active

3.3 推荐的注释格式：

  • 文件注释
/*

 * @description: xxxxx

 * @author: erinxu

 * @update: erinxu (2014-10-22 14:00)

 */
  • 模块注释
/* module: xxxxx by erinxu */
  • 单行注释
/* comments */
  • 多行注释
/*

 * comments line 1

 * comments line 2

 */
  • 特殊注释
/* TODO: xxxxx by erinxu 2014-10-22 14:10 */

/* BUGFIX: xxxxx by erinxu 2014-10-22 14:10 */

3.4 Hack使用

原则上不使用 Hack，通过合理的结构和样式避免出现兼容性问题。若无法避免，则要适当使用并统一规则。

/* IE7会显示灰色#888，IE6会显示白色#fff，其他浏览器显示黑色#000 */

.m-list {

    color:#000;

    *color:#888;

    _color:#fff;

}

4. 性能优化

4.1 属性值缩写

  • margin/padding
margin: 1px 2px 3px 4px;  /* 上边距1px、右2px、下3px、左4px */

margin: 1px 2px 3px;  /* 上1px、右2px、下3px、左2px*/(不建议三个值的写法)

margin: 1px 2px;  /* 上1px、右2px、下1px、左2px*/

margin: 1px;
  • border
/* border-width, border-style, border-color */

border: 1px solid #000;
  • background
/* background-color, background-image, background-repeat, background-attachment, background-position */

background: #FFF url(img_tree.png) no-repeat right top;
  • font
/* font-style, font-variant, font-weight, font-size, line-height, font-family */

font: italic small-caps bold 12px/30px Georgia, serif;
  • color
color: #FFF; /* #FFFFFF缩写 */

color: #ABC; /* #AABBCC缩写 */
  • list-style
/* list-style-type, list-style-position, list-style-image */

list-style: square outside url(bullet.gif);

4.2 避免耗性能的属性

/* expression */

.class {

    width: expression(this.width>100?'100px':'auto');

}

/* filter */

.class{

    filter: alpha(opacity=50);

}

4.3 选择器的合并

将定义了相同或大部分相同属性的CSS选择器合在一起声明，以缩小文件大小。

/* 将调用统一背景图片的选择器合在一起声明 */

.u-icon1,

.u-icon2,

.u-icon3 {

    background:url(../images/sprite.png) no-repeat;

}

.u-icon1 {

    background-position: 0 0;

} 

.u-icon2 {

    background-position: 10px 10px;

} 

.u-icon3 {

    background-position: 10px 50px;

}

4.4 图片优化合并

  • 在不影响显示效果的情况下，压缩图片大小。色彩丰富且有透明要求，采用 png24 格式；色彩丰富无透明要求，采用 jpg 格式；色彩不丰富可采用 png24 格式；动态图片采用 gif 格式。

  • 根据图片大小、颜色、模块等因素，对图片进行综合分类，将同类图片合并成一张。合并后图片大小不宜超过 50K，建议大小在 20K-50K 之间。

4.5 文件压缩

借助工具对CSS进行压缩，去除不必要的空格和换行，减小文件体积。

co css规范的更多相关文章

  1. Scoped CSS规范草案

    原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Scoped-CSS 写在前面 问:什么是Scoped CSS规范? Scoped CSS规范是We ...

  2. Atitit.css 规范 bem  项目中 CSS 的组织和管理

    Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

  3. 前端CSS规范整理_转载、、、

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

  4. 瞬间从IT屌丝变大神——CSS规范

    CSS规范主要包括以下内容: CSS Reset用YUI的CSS Reset. CSS采用CSSReset+common.css+app.css的形式. app.css采用分工制,一个前端工程师负责一 ...

  5. [转]前端CSS规范整理

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core  通用 ...

  6. 新手不得不注意HTML CSS 规范

    作为一名新进的程序菜鸟,根本不知道从哪里开始学起好,前辈都说HTML CSS 规范是一个十分需要注意的点,要我记下,特地转来保存一下,大家相互学习 //总论 本规范既然一个开发规范,也是一个脚本语言参 ...

  7. 前端CSS规范大全

    一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用 ...

  8. Web前端开发中的各种CSS规范

    Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和 ...

  9. 前端开发规范：命名规范、html 规范、css 规范、js 规范

    上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...

  10. CSS规范 - 分类方法

    CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型 ...

随机推荐

  1. ubuntu 12.04安装jdk1.8

    转自http://blog.chinaunix.net/uid-26404477-id-3471246.html 在安装之前,系统没有任何jdk软件,也就是说在终端执行 java -version 将 ...

  2. 终于有人把P2P、P2C、O2O、B2C、B2B、C2C 的区别讲透了

    http://news.mbalib.com/story/88506 P2P.P2C .O2O .B2C.B2B. C2C,每天看着这些常见又陌生的名词,如果有人跟你说让你解释它的含义,金融的小伙伴们 ...

  3. 注意SQLServer2012中带参数的XP_ReadErrorLog

    --15:26 2014-6-10数据库错误日志通知其中有一部分是检测ERRORLOG中若有用户登录失败信息时,会记录到Errorlog表,并邮件提醒.当时直接从同事那拿过来的脚本(08),按理说版本 ...

  4. MongoDB固定集合

    固定集合 MongoDB 固定集合(Capped Collections)是性能出色且有着固定大小的集合,对于大小固定,我们可以想象其就像一个环形队列,当集合空间用完后,再插入的元素就会覆盖最初始的头 ...

  5. mysql修改表名，列名，列类型，添加表列，删除表列

    alter table test rename test1; --修改表名 ); --添加表列 alter table test drop column name; --删除表列 ) --修改表列类型 ...

  6. hadoop wordcount

    Mapper // map的数量与数的分片有关系 public class WCMapper extends Mapper<LongWritable, Text, Text, LongWrita ...

  7. App上架审核指南翻译

    App Store Review Guidelines APP审核指南:https://developer.apple.com/app-store/review/guidelines/ 本文是自主翻译 ...

  8. 自动检查点(Automatic Checkpointing)

    自动检查点(Automatic Checkpointing)在oracle10g,支持自动检查点调优,这样可以提高系统可用性.自动检查点调优需要开启参数fast_start_mttr_target. ...

  9. php基础语法学习汇总

    常量学习: <?php # function demo function sum($x,$y){ $z=$x+$y; return $z; } echo sum(1,2); #define de ...

  10. PostgreSQL Replication之第十三章 使用PL/Proxy扩展（2）

    13.2 设置 PL/Proxy 简短的理论介绍之后,我们可以继续前进并运行一些简单的PL/Proxy设置.要做到这一点,我们只需安装PL/Proxy并看看这是如何被使用的. 安装PL/Proxy是一 ...