CSS代码开发规范
来源:互联网 发布:淘宝做什么产品赚钱 编辑:程序博客网 时间:2024/05/17 08:43
1. CSS浏览器支持标准
WinXPWin7OS XIE9CC IE8AA IE7AA IE6AA Chrome7CCCChrome6AAAChrome3BBBFirefox4CCCFirefox3.6AAAFirefox3.5CC Firefox3CC SafariBBBOperaCCC(注:根据2010年11月10日数据整理)
- A级-交互和视觉完全符全设计的要求
- B级-视觉上允许有所差异,不破坏页面整体效果
- C级-可忽视视觉上的问题,但不防碍使用
2. 尽可能的通过继承和层叠重用已有样式
3. 根据新建样式的适用范围分为三级:全站级、产品级、页面级
- 3-1. 目前全站级的CSS文件仅有core.css和douban.css(向全站级CSS文件中添加规则参见4和5)。
- 3-2. 产品级CSS是指作用于某一垂直产品(如音乐、读书、电台等),文件放在css/下相应目录下。
页面级指仅在一个或少量几个页面中用到。如果仅在一个页面中用到的采用内联方式嵌入于页面head里,多于两个页面的放到外联的CSS文件中,该文件再放到相应的产品目录下。
4. core.css是全站基本样式。它需要放在所有CSS引用的最前面。它包括:标签reset、常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式等
参见:http://img3.douban.com/css/packed_core1.css
5. 不要轻易改动全站级CSS。改动后,要经过全面测试
6. 单条CSS规则的书写格式要求
- 6-1. 属性需要写在一行。需要在“{“和”}”前后加空格。
.selector { property:value;property:value; }
- 6-2. 多个(>2)selector每个占一行:
.selector1,
.selector2,
.selector3 { property:value;property:value; }
- 6-3. 兼容多个浏览器时,将标准属性写在后面,如:
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
7. 将作用于不同模块的CSS规则集中放在一起,同时用注释说明
注释的格式:
/* mod: doulist */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如:
/* button */
…
/* mod */
…
/* nav */
…
/* mod: events album */
8. ID和Class命名。命名不要用缩写,单词间用”-”做为连接符
- 8-1. ID是用来标识具体模块,命名必须具体且唯一,由前缀和名字组成。不要滥用ID。如: #db-video-list。
- 8-2. Class是用来标识某一类型的元素,命名简洁表意清楚。如:.list。
- 8-3. 命名示例:
坏:
#rec
.gray-link
.broadsmr
.pl
好:
#db-nav-main
.infobox
.item
- 8-4. 推荐使用的class名:
9. 尽量避免使用CSS Hack
推荐使用下面的:
区别属性:
IE6_property:valueIE6/7*property:valueIE6/7/8/9property:value9非IE6property//:value区别规则:
IE6* html selector { … }IE7*:first-child+html selector { … }非IE6html>body selector { … }firefox only@-moz-document url-prefix() { … }saf3+/chrome1+@media all and (-webkit-min-device-pixel-ratio:0) { … }opera only@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { … }iPhone/mobile webkit@media screen and (max-device-width: 480px) { … }10. 使用after或overflow的方式清浮动
11. 内联和外联的CSS都必须放在页面的head里。顺序是:全站级CSS,产品级CSS,页面级(外联)CSS,页面级(内联)CSS,内联CSS
12. 避免使用低效的选择器
如:
body > * {…}
ul > li > a {…}
#footer > h3 {…}
ul#top_blue_nav {…}
#searbar span.submit a { … }
13. 尽量避免使用filter
14. 不要直接修改标签的样式
如: div { … }
15. 不要在标签上直接写样式
如:<div style=”margin-bottom:30px;”>
16. 不要在CSS中使用 expression
17. 不要在CSS中使用 @import
18. 不要在CSS中使用 !important
19. 绝对不要在CSS中使用 “*” 选择符
0 0
- CSS代码开发规范
- css代码缩写规范
- CSS规范 - 代码格式
- css代码规范
- css 代码规范
- CSS规范 - 代码格式
- css代码标准化规范
- CSS代码编码规范
- css 代码规范
- css 代码规范
- CSS代码规范
- css代码规范
- css代码规范
- Web前端开发代码规范HTML JAVASCRIPT CSS
- 开发灵活,稳定,可持续 HTML 和 CSS 代码的规范。
- Web代码规范【一、CSS代码规范】
- 豆瓣CSS开发规范
- CSS开发规范
- RequiredJs学习笔记
- maven package编译打包jar出错解决
- find function in matlab
- 春哥的nginx systemtap调试脚本简单介绍
- Android扫描SD卡中所有图片,获得图片的名称、路径、大小
- CSS代码开发规范
- Android 内存泄漏
- 警校妹子的别样青春
- Spark1.6.0 源码编译和部署包生成
- C程序中的段错误跟踪
- 把自己的功能某块,嵌入到其他PHP项目当中
- c++ 文件及文件夹操作(三)
- boost::smart_ptr之智能指针
- Web开发基础Tomcat的配置以及http协议概述