19UED前端CSS代码规范 V1.0
浏览:1607次 出处信息
1、申明及注释
- 1.1、文件头部必须加上文件申明信息,必须包括文件描述、作者、最后更新(更新人+时间)
- /*
- *@Description: public common css (可写中文)
- *@Author: sev7n
- *@Update: sev7n(2011-08-09 17:22)
- */
- 1.2、CSS代码注释规范请参考UED前端注释规范.docx 文件
2、 编码
目前19楼页面主要使用gb2312编码,请注意保持CSS文件编码与页面编码一致(不要将CSS文件设置为utf-8等其他编码)。
为了防止文件合并及编码转换时造成问题,建议将样式中文字体名字改成对应的英文名字,如:黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei,几个单词中间有空格组成的必须加引号)
3、 命名规范
- 3.1、采用通俗易懂的英文单词并按内容/功能命名,严禁出现如left、right等方向名词的class/id,严禁出现如xxx1、xxx2等的数字class/id
- 3.2、除布局、唯一独立模块外建议少用id,必须保证id唯一性
- 3.3、一律采用小写中划线方式命名,如 xxx-yyy,禁止出现大写字母
- 3.4、尽可能提高代码模块的复用,复用模块、独立模块可按xxx-mod命名(-mod可不写),mod下面再取xxx-hd(头部)、xxx-bd(内容)、xxx-ft(底部)命名
- 3.5、常用命名(多记多查英文单词):page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等
4、 书写顺序
CSS书写建议按以下顺序:
- 4.1、显示属性
display | position | float | clear | cursor … - 4.2、盒模型
margin | padding | width | height - 4.3、文本属性
vertical-align | white-space | text-decoration | text-align | color | font | content … - 4.4、边框背景
border | background - 4.5、内容管理、层级
overflow | z-index | zoom
5、 其他
- 5.1、禁止使用expression表达式
- 5.2、禁止滥用!important(使用前必须讨论确认不会造成其他BUG或者维护问题)
- 5.3、尽量少的使用滤镜,尽量减少hack数,能不hack的坚决不hack
- 5.4、层级(z-index)必须清晰明确,页面弹窗、气泡为最高级(最高级为999,如showWin、pop等),不同弹窗气泡之间可在三位数之间调整;普通区块为10-90内10的倍数;区块展开、弹出为当前父层级上个位增加,禁止层级间盲目攀比,如以下html结构:
- <ul class=“post-bd”>
- <li class=“post-to”>
- <div class=“post-tag”></div>
- <div class=“post-add”></div>
- </li>
- <li class=“post-editor”></li>
- <li class=“post-app”></li>
- </ul>
(N)
- .post-to {z-index:999;}
- .post-tag {z-index:99;}
- .post-add {z-index:9;}
- .post-editor {z-index:99;}
- .post-app {z-index:9;}
(Y)
- .post-to {z-index:90;}
- .post-tag {z-index:99;}
- .post-add {z-index:98;}
- .post-editor {z-index:80;}
- .post-app {z-index:70;}
- 5.5、保持代码的可读性与可维护性,代码必须缩进,CSS结构同html结构 (但不建议缩进太多,能大概看出结构即可),选择器与{}之间必须有一个空格分隔,{}里不要出现多余的空格、换行
- .post-to{z-index:999 ; }
- .post-tag{z-index:99; }
- .post-add{z-index:9 ;}
(Y)
- .post-to {z-index:999;}
- .post-tag {z-index:99;}
- .post-add {z-index:9;}
- 5.6、在保证选择器准确的情况下尽量简化选择器 (尽量不超过4级),不写多余的选择器(如class/id前的标签选择器、li上一级的的ul/ol、dt/dd上一级的dl等,在保证准确的前提下能去掉的都去掉)(N)
- div#post-to {}
- .post-app dl dt {}
- .post-app ul li.post-xxx {}
(Y)
- #post-to {}
- .post-app dt {}
- .post-app .post-xxx {}
- 5.7、字体粗细采用具体数值,粗体bold写为700,正常normal写为400
- 5.8、能缩写的尽量缩写,如margin、padding、font(font-style font-variant font-weight font-size/line-height font-family)、border(border-width border-style border-color)、background(background-color background-image background-repeat background-attachment background-position)等(N)
- .post-tag {margin:2px;margin-right:5px;font-weight: bold;font-size:14px;line-height:24px;font-family:”黑体”;}
(Y)
- .post-tag { margin:2px 5px 2px 2px; font: 700 14px/24px ” 黑体”; }
- 5.9、去掉0后面的单位(禁止出现如0px等多余的单位)、颜色值不要出现red/blue等颜色名词(一律采用#加16进制来表示,CSS3的rgb除外),不强制颜色值的大小写、不强制将6个字母的#颜色值缩写为3个。(N)
- .post-tag {margin:0px 0px 1px 1px;color:rgb(255,255,255);background: white;}
(Y)
- .post-tag {margin:0 0 1px 1px;color:#FFFFFF;background:#fff;}
原文:http://blog.19ued.com/?p=1507
建议继续学习:
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:HTML5实战之本地存储(2)
后一篇:html Meta >>
文章信息
- 作者:simondai 来源: 流金岁月
- 标签: 代码规范
- 发布时间:2011-08-14 15:47:47
建议继续学习
近3天十大热文
- [41] 界面设计速成
- [35] Oracle MTS模式下 进程地址与会话信
- [33] 如何拿下简短的域名
- [32] IOS安全–浅谈关于IOS加固的几种方法
- [32] 程序员技术练级攻略
- [32] 视觉调整-设计师 vs. 逻辑
- [31] 图书馆的世界纪录
- [30] 【社会化设计】自我(self)部分――欢迎区
- [30] android 开发入门
- [27] 读书笔记-壹百度:百度十年千倍的29条法则