关于前端页面开发CSS规范(样式、命名、书写规范、兼容性)

1.根据新建样式的适用范围分为三级：全站级、产品级、页面级

全站级： 需要放在所有CSS引用的最前面，它包括：标签reset、常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式等。

           注：不要轻易改动全站级CSS。改动后，要经过全面测试

页面级： 指仅在一个或少量几个页面中用到。

           如果仅在一个页面中用到的采用内联方式嵌入于页面head里；

           多于两个页面的放到外联的CSS文件中，该文件再放到相应的产品目录下。

产品级： 仅作用于单一产品，具体规范参照页面级即可。

附：常用复位CSS代码

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding:0;margin:0; }

table{ border-collapse:collapse;border-spacing:0; }

fieldset,img{ border:0; }

address,caption,cite,code,dfn,em,strong,th,var{ font-weight:normal;font-style:normal; }

ol,ul{ list-style:none; }

caption,th{ text-align:left; }

h1,h2,h3,h4,h5,h6{ font-weight:normal;font-size:100%; }

abbr,acronym{ border:0; }

2.调用样式

采用link方式不能使用@import

<link href="css/core.css" rel="stylesheet" type="text/css" />

3.单条CSS规则的书写格式要求

a. 属性和属性值全部采用小写，每项定义成一行, 属性的冒号后面要加空格, 每项定义后面要加分号。

.selector {

property:value;
      property:value;
}

b、多个selector每个占一行：

.selector1,

.selector2,

.selector3 {
property:value;
property:value;
}

c、兼容多个浏览器时，将标准属性写在后面，如：

-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;

4.将作用于不同模块的CSS规则集中放在一起时要用注释说明

注释的格式：

/* mod: doulist */

通用规则同样分类放在一起。通用规则在具体模块规则的前面。

例如：

/* button */

.btn_xxx1,

.btn_xxx2,

.btn_xxx3 { property:value;property:value; }

/* mod */

...

/* nav */

...

/* mod: events album */

5.ID和Class命名

命名不要用缩写，单词间用"-"做为连接符

a、ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。如：#db-list。注：不要滥用ID。

b、Class是用来标识某一类型的元素，命名要简洁表意清楚。如：.list。

命名示例：

#nav-main

.infobox

.item

推荐使用的class名：

表示状态	.on 在其上		.active 活动		.selected 选中		.hover 悬浮
表示位置	.first		.last		.main		.side
表示结构	.section
通用元素	.info 信息	.tb 表格	.frm 表单	.nav 导航	.list 列表	.item 项	.tag 标签	.pic 图片

6.尽量避免使用CSS Hack

区别属性：

IE6	_property:value
IE6/7	*property:value
IE6/7/8/9	property:value\9
非IE6	property//:value

区别规则：

IE6	* html selector { ... }
IE7	*:first-child+html selector { ... }
非IE6	html>body selector { ... }
firefox only	@-moz-document url-prefix() { ... }
safari3+/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) { ... }

7.尽量使用overflow方式清浮动，特殊情况下可以使用after清浮动

8.内联和外联的CSS都必须放在页面的head里。

顺序是：全站级CSS，产品级CSS，页面级(外联)CSS，页面级(内联)CSS，内联CSS

9.避免使用低效的选择器

如：

body > * {...}

ul > li > a {...}

#footer > h3 {...}

ul#top_blue_nav {...}

#searbar span.submit a { ... }

10.尽量避免使用filter

11.不要直接修改标签的样式

如：

 div { ... }

12.不要在标签上直接写样式

如：

<div style="margin-bottom:30px;">http://www.google.com/”

13.所有的装饰性的背景图片要写入css中，背景图片使用css sprite

      考虑到多个开发人员协作开发，故Sprite按照模块制作；

14.尽量减少使用影响性能的属性

如：

<position: absolute; float: lieft; folat: right;

15.尽量简写代码

如：

body{font:italic bold 12px/20px

}

input{padding:2px 3px;

    border:1px solid #999

}

16.除特殊情况，杜绝使用以下方式兼容 ie8

如：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

17.不要在CSS中使用 expression

18.不要在CSS中使用 @import

      与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

       1.使用多个 <link> 元素

         2.通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

         3.通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

19.非迫不得已情况下不要在CSS中使用 !important

20.绝对不要在CSS中使用 "*" 选择符

21.书写代码前，考虑并提高样式重复使用率

22.测试完成后压缩合并css文件，力求降低http请求

23.书写规范

■ 将常用的布局方法和常用颜色等写成全局类选择符

■ 尽量使用类选择符(.class)、适当的使用ID选择符（#element）、包含选择符(#element span) 、选择符分组(#element,.class,span)

■ CSS hack的原理：由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。可以根据这个来针对不同的浏览器来写不同的CSS。浏览器优先级别：FF < IE7 < IE6。书写顺序一般是将识别能力强的浏览器的CSS写在后面

■ 每个属性占一行，而不要将全部属性写在一行。

■ 选择器较多的时候可以按照 a-z 的顺序排列，方便修改的时候更快找到所需的属性和避免多写。

24.尽可能的通过继承和层叠重用已有样式

 

附：常用命名表

名称	命名	名称	命名	名称	命名
页头	header	登录条	loginbar	标志	logo
侧栏	sidebar	广告条	banner	导航	nav
子导航	subNav	菜单	menu	子菜单	submenu
下拉菜单	dropMenu	工具条	toolbar	表单	form
栏目	column	箭头	arrow	搜索	search
搜索按钮	btnSearch	滚动条	scroll	内容	content
标签页	tab	文章列表	list	提示信息	msg
小技巧	tips	栏目标题	title	链接	links
页脚	footer	服务	service	热点	Hot
新闻	news	下载	download	注册	register
状态	status	按钮	btn	投票	Vote
合作伙伴	partner	版权	copyright	网站地图	sitemap