CSS 编码规范
来源:互联网 发布:鱼子酱眼精华 知乎 编辑:程序博客网 时间:2024/06/06 01:33
层叠样式表(英语:Cascading Style Sheets,简写CSS)是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的内容与显示分隔开来。这样做的好处是:
1. 文件的可读性加强
2. 文件的结构更加灵活
3. 作者和读者可以自己决定文件的显示
4. 文件的结构简化了
另外,在HTML中:
1. 一个整个网站或其中一部分网页的显示信息被集中在一个地方,要改变它们很方便
2. 不同的读者可以有不同的样式,比如有的读者需要字体比较大
3. HTML文件本身的范围变小了,它的结构简单了,它不需要包含显示的信息
CSS还可以控制其他参数,例如声音(假如浏览器有阅读功能的话)或给视障者用的感受装置。
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进行压缩,去除不必要的空格和换行,减小文件体积。
- [css] CSS编码规范
- 编码规范系列:css规范
- CSS编码规范
- HTML CSS 编码规范
- CSS编码规范【整理】
- HTML&CSS编码规范
- CSS编码规范(二)
- css编码规范(一)
- CSS编码规范
- bootstrap css编码规范
- CSS编码规范
- HTML&&CSS编码规范
- CSS编码规范
- css编码规范
- 前端css编码规范
- CSS编码规范总结
- CSS(CS3)编码规范
- html/css 编码规范
- 测试注册页面不成功的解决方法
- 设计模式之迭代器模式
- MongoDB3.0集群安装和安全认证指南
- struts2 使用 modelDirven 在前台获取值后 在后台修改后再向前台传值时 传值对象未发生改变
- 库存系统难破题?且看京东到家如何破
- CSS 编码规范
- WebSocket使用之什么是WebSocket?
- 嵌入式软件经典字符串面试、笔试题(基础)
- 二叉树
- 简单聊聊 instanceof ,typeof
- TrustZone与TEE的发展历史、技术原理以及产业格局
- OpenGL ES2.0教程:编写自己的shader(2)
- Maven项目转换为javaWEB项目
- 选择排序(php代码实现)