co css规范

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规范的更多相关文章

Scoped CSS规范草案
原文链接:https://github.com/AlloyTeam/AlloyTouch/wiki/Scoped-CSS 写在前面问:什么是Scoped CSS规范? Scoped CSS规范是We ...
Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
前端CSS规范整理_转载、、、
一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...
瞬间从IT屌丝变大神——CSS规范
CSS规范主要包括以下内容: CSS Reset用YUI的CSS Reset. CSS采用CSSReset+common.css+app.css的形式. app.css采用分工制,一个前端工程师负责一 ...
[转]前端CSS规范整理
一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用 ...
新手不得不注意HTML CSS 规范
作为一名新进的程序菜鸟,根本不知道从哪里开始学起好,前辈都说HTML CSS 规范是一个十分需要注意的点,要我记下,特地转来保存一下,大家相互学习 //总论本规范既然一个开发规范,也是一个脚本语言参 ...
前端CSS规范大全
一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用 ...
Web前端开发中的各种CSS规范
Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和 ...
前端开发规范：命名规范、html 规范、css 规范、js 规范
上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...
CSS规范 - 分类方法
CSS文件的分类和引用顺序通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型 ...

随机推荐

appium testcase2
自己跑的两个case都在盘里,可以直接解压后放到workspace,加载工程就能跑,前提是你的环境没有问题 http://pan.baidu.com/s/1bnHCyn1 eclipse-File-i ...
github Mac端的使用案例
1. 本地有一个仓库,是和网页版的github连接在一起的,平时用Terminal来控制的,怎么放在github的客户端呢? 解决办法: 1.1 点击左上角的+ 号,在弹出框中选择Add,然后choo ...
配置maven环境
第一步:安装maven,安装maven最简单,直接将maven的解压文件放入本地某目录下即可,无需手动安装第二步:eclipse中导入maven项目后,会后错,或maven无法使用,则需要进行mav ...
包含Blob字段的表无法Export/Import
最近一直用MySQL-Front的导出导出工具完成数据库的备份,确实比较方便快捷. 后来增加了一张表,其中有blob字段,上传几个文件后,发现导出不好用了,进度条长期处于停滞状态. 想想也是,要把bl ...
typedef 和 const
1. typedef 允许你为各种数据类型定义新名字 #include <stdio.h>typedef char *ptr_to_char; //这让我看起来,好奇怪,不好读void m ...
JavaScript：文本域事件处理
文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:onkeydown.onkeypress.onkeyup. 范例一:观察文本域的键盘事件处理代码如下: 效果图如下: 默认状态: ...
django中嵌入百度editor插件
一.安装和配置步骤: 1.先下载百度ueditor插件,并安装pip install DjangoUeditor 2.把下载好的ueditor插件放到自己的项目中 3.配置setting INSTAL ...
[MySQL] 变量（参数）的查看和设置
类似于Oracle的参数文件,MySQL的选项文件(如my.cnf)用于配置MySQL服务器,但和Oracle叫法不一样,在MySQL里, 官方叫变量(Varialbes),但其实叫参数也是可以的,只 ...
指向函数的指针与iOS-Block相关知识
指向函数的指针与iOS-Block相关知识一. 函数指针的定义和调用: 关于函数指针的知识详细可参考:http://www.cnblogs.com/mjios/archive/2013/03/19/ ...
第十二篇 Integration Services：高级日志记录
本篇文章是Integration Services系列的第十二篇,详细内容请参考原文. 简介在前一篇文章我们配置了SSIS内置日志记录,演示了简单和高级日志配置,保存并查看日志配置,生成自定义日志消息 ...

co css规范

CSS 编码规范

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

1.1 CSS 与 HTML

1.2 CSS 定义结构

2. 命名规范

2.1 选择器命名

2.2 通用样式命名规则

3. 书写规范

3.1 属性规范

3.2 推荐的样式书写顺序

3.3 推荐的注释格式：

4.1 属性值缩写

4.2 避免耗性能的属性

4.3 选择器的合并

4.4 图片优化合并

4.5 文件压缩

co css规范的更多相关文章

随机推荐

热门专题