19楼论坛的前端CSS代码规范介绍

所属分类: 网页制作 / CSS 阅读数: 1052
收藏 0 赞 0 分享
1、申明及注释
1.1、文件头部必须加上文件申明信息,必须包括文件描述、作者、最后更新(更新人+时间)
1./*
2.*@Description: public common css (可写中文)
3.*@Author: sev7n
4.*@Update: sev7n(2011-08-09 17:22)
5.*/
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结构:
1.<ul class=“post-bd”>
2.<li class=“post-to”>
3.<div class=“post-tag”></div>
4.<div class=“post-add”></div>
5.</li>
6.<li class=“post-editor”></li>
7.<li class=“post-app”></li>
8.</ul>
(N)
1..post-to {z-index:999;}
2..post-tag {z-index:99;}
3..post-add {z-index:9;}
4..post-editor {z-index:99;}
5..post-app {z-index:9;}
(Y)
1..post-to {z-index:90;}
2..post-tag {z-index:99;}
3..post-add {z-index:98;}
4..post-editor {z-index:80;}
5..post-app {z-index:70;}
5.5、保持代码的可读性与可维护性,代码必须缩进,CSS结构同html结构 (但不建议缩进太多,能大概看出结构即可),选择器与{}之间必须有一个空格分隔,{}里不要出现多余的空格、换行
(N)
1..post-to{z-index:999 ; }
2..post-tag{z-index:99; }
3..post-add{z-index:9 ;}
(Y)
1..post-to {z-index:999;}
2..post-tag {z-index:99;}
3..post-add {z-index:9;}
5.6、在保证选择器准确的情况下尽量简化选择器 (尽量不超过4级),不写多余的选择器(如class/id前的标签选择器、li上一级的的ul/ol、dt/dd上一级的dl等,在保证准确的前提下能去掉的都去掉)
(N)
1.div#post-to {}
2..post-app dl dt {}
3..post-app ul li.post-xxx {}
(Y)
1.#post-to {}
2..post-app dt {}
3..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)
1..post-tag {margin:2px;margin-right:5px;font-weight: bold;font-size:14px;line-height:24px;font-family:”黑体”;}
(Y)
1..post-tag { margin:2px 5px 2px 2px; font: 700 14px/24px ” 黑体”; }
5.9、去掉0后面的单位(禁止出现如0px等多余的单位)、颜色值不要出现red/blue等颜色名词(一律采用#加16进制来表示,CSS3的rgb除外),不强制颜色值的大小写、不强制将6个字母的#颜色值缩写为3个。
(N)
1..post-tag {margin:0px 0px 1px 1px;color:rgb(255,255,255);background: white;}
(Y)
1..post-tag {margin:0 0 1px 1px;color:#FFFFFF;background:#fff;}
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多