css规范大全

1. /*  
2. * @description: 中文说明  
3. * @author: name  
4. * @update: name (2013-04-13 18:32)  
5. */  

1. /* module: module1 by 张三 */  
2. …  
3. /* module: module2 by 张三 */  

1. /* this is a short comment */  

1. /*  
2. * this is comment line 1.  
3. * this is comment line 2.  
4. */  

1. /* TODO: xxxx by name 2013-04-13 18:32 */  
2. /* BUGFIX: xxxx by name 2012-04-13 18:32 */  

1. /* Header */  
2. /* Footer */  
3. /* Gallery */  

三、命名规范 

使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。 

• /* 不推荐: 无意义 */ #yee-1901 {}
• /* 不推荐: 与样式相关 */ .button-green {}.clear {}
• /* 推荐: 特殊性 */ #gallery {}#login {}.video {}
• /* 推荐: 通用性 */ .aux {}.alt {}

常用命名（多记多查英文单词）：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等。 

ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。 

• /* 不推荐 */ #navigation {}.atr {}
• /* 推荐 */ #nav {}.author {}

类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。 

• /* 不推荐 */ul#example {}div.error {}
• /* 推荐 */#example {}.error {}

使用类选择器，放弃ID选择器

ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS，就无法重用。

NEC特殊字符："-"连字符

"-"在本规范中并不表示连字符的含义。

她只表示两种含义：分类前缀分隔符、扩展分隔符，详见以下具体规则。

分类的命名方法：使用单个字母+"-"为前缀

布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。

对以上的解释详情参见：分类方法中的“CSS内部的分类及其顺序”。

注：在你样式中的选择器总是要以上面前五类开头，然后在里面使用后代选择器。

　　如果这五类不能满足你的需求，你可以另外定义一个或多个大类，但必须符合单个字母+"-"为前缀的命名规则，即 .x- 的格式。

　　特殊：.j-将被专用于JS获取节点，请勿使用.j-定义样式。

后代选择器命名

• 约定不以单个字母+"-"为前缀且长度大于等于2的类选择器为后代选择器，如：.item为m-list模块里的每一个项，.text为m-list模块里的文本部分：.m-list .item{}.m-list .text{}。
• 一个语义化的标签也可以是后代选择器，比如：.m-list li{}。
• 不允许单个字母的类选择器出现，原因详见下面的“模块和元件的后代选择器的扩展类”。

通过使用后代选择器的方法，你不需要考虑他的命名是否已被使用，因为他只在当前模块或元件中生效，同样的样式名可以在不同的模块或元件中重复使用，互不干扰；在多人协作或者分模块协作的时候效果尤为明显！

后代选择器不需要完整表现结构树层级，尽量能短则短。

注：后代选择器不要在页面布局中使用，因为污染的可能性较大；

命名应简约而不失语义

相同语义的不同类命名

方法：直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。

其他举例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。

模块和元件的扩展类的命名方法

当A、B、C、...它们类型相同且外形相似区别不大，那么就以它们中出现率最高的做成基类，其他做成基类的扩展。

方法：+“-”+数字或字母（如：.m-list的扩展类为.m-list-1、.m-list-2等）。

补充：基类自身可以独立使用（如：class="m-list"即可），扩展类必须基于基类使用（如：class="m-list m-list-2"）。

如果你的扩展类是表示不同状态，那么你可以这样命名：u-btn-dis，u-btn-hov，m-box-sel，m-box-hov等等，然后像这样使用：class="u-btn u-btn-dis"。

如果你的网站可以不兼容IE6等浏览器，那么你标识状态的方法也可以采取独立状态分类（.z-）方法：.u-btn.z-dis，.m-box.z-sel，然后像这样使用：class="u-btn z-dis"。

模块和元件的后代选择器的扩展类

有时候模块内会有些类似的东西，如果你没有把它们做成元件和扩展，那么也可以使用后代选择器和扩展。

后代选择器：.m-login .btn{}。

后代选择器扩展：.m-login .btn-1{}，.m-login .btn-dis{}。

同样也可以采取独立状态分类（.z-）方法：.m-login .btn.z-dis{}，然后像这样使用：class="btn z-dis"。

注：此方法用于类选择器，直接使用标签做为选择器的则不需要使用此命名方法。

注：为防止后代选择器的扩展类和大类命名规范冲突，后代选择器不允许使用单个字母。

　　比如：.m-list .a{}是不允许的，因为当这个.a需要扩展的时候就会变成.a-bb，这样就和大类的命名规范冲突。

分组选择器有时可以代替扩展方法

有时候虽然两个同类型的模块很相似，但是你希望他们之间不要有依赖关系，也就是说你不希望使用扩展的方法，那么你可以通过合并选择器来设置共性的样式。

使用本方法的前提是：相同类型、功能和外观都相似，写在同一片代码区域方便维护。

防止污染和被污染

当模块或元件之间互相嵌套，且使用了相同的标签选择器或其他后代选择器，那么里面的选择器就会被外面相同的选择器所影响。

所以，如果你的模块或元件可能嵌套或被嵌套于其他模块或元件，那么要慎用标签选择器，必要时采用类选择器，并注意命名方式，可以采用.m-layer .layerxxx、.m-list2 .list2xxx的形式来降低后代选择器的污染性。

命名时需要注意的点： 

• 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _
• 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
• 命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则
• 不允许通过1、2、3等序号进行命名
• 避免class与id重名
• id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id
• class用于标识某一个类型的对象，命名必须言简意赅。
• 尽可能提高代码模块的复用，样式尽量用组合的方式
• 规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名。
• 属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"
• 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
• 空元素要有结束的tag或于开始的tag后加上"/"
• 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
• <h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
• 给每一个表格和表单加上一个唯一的、结构标记id
• 给图片加上alt标签
• 尽量使用英文命名原则
• 尽量不缩写，除非一看就明白的单词

1．文件命名规范

　　全局样式：global.css；
　　框架布局：layout.css；
　　字体样式：font.css；
　　链接样式：link.css；
　　打印样式：print.css；

　　主要的 master.css
　　模块 module.css
　　基本共用 base.css
　　主题 themes.css
　　专栏 columns.css
　　表单 forms.css
　　补丁 mend.css

2．常用类/ID命名规范

(1) 页面结构 

• 容器: container
• 页头：header
• 内容：content/container
• 页面主体：main
• 页尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column
• 页面外围控制整体布局宽度：wrapper
• 左右中：left right center

(2) 导航 

• 导航：nav
• 主导航：mainbav
• 子导航：subnav
• 顶导航：topnav
• 边导航：sidebar
• 左导航：leftsidebar
• 右导航：rightsidebar
• 菜单：menu
• 子菜单：submenu
• 标题: title
• 摘要: summary

(3) 功能 

• 标志：logo
• 广告：banner
• 登陆：login
• 登录条：loginbar
• 注册：regsiter
• 搜索：search
• 搜索输入框：searchInput
• 搜索输出和搜索结果相似:search_output
• 搜索条:searchBar
• 搜索结果:search_results
• 功能区：shop
• 标题：title
• 加入：joinus
• 合作伙伴：partner
• 状态：status
• 按钮：btn
• 滚动：scroll
• 标签页：tab
• 文章列表：list
• 提示信息：msg
• 当前的: current
• 小技巧：tips
• 图标: icon
• 箭头:arr/arrow
• 注释：note
• 指南：guild
• 服务：service
• 热点：hot
• 新闻：news
• 商标:branding
• 下载：download
• 投票：vote
• 合作伙伴：partner
• 友情链接：link
• 版权：copyright
• 信誉：siteinfoCredits
• 法律声明：siteinfoLegal
• 网站信息：siteinfo
• 首页:homepage
• 二级页面子页面:subpage
• 工具条:#tool, #toolbar
• 下拉:drop
• 下拉菜单:dorpmenu
• 产品:products
• 产品价格: products_prices
• 产品描述: products_description
• 产品评论：products_review
• 编辑评论：editor_review
• 最新产品: news_release
• 生产商:publisher
• 缩略图:screenshot
• 常见问题:faqs
• 关键词:keyword
• 博客:blog
• 论坛:.forum

3、常用class的命名： 
(1) 颜色:使用颜色的名称或者16进制代码，如 

• .red { color: red; }
• .f60 { color: #f60; }
• .ff8600 { color: #ff8600; }

(2) 字体大小,直接使用”font+字体大小”作为名称，如 

• .font12px { font-size: 12px; }
• .font9pt {font-size: 9pt; }

(3) 对齐样式,使用对齐目标的英文名称，如 

• .left { float:left; }
• .bottom { float:bottom; }

(4) 标题栏样式,使用”类别+功能”的方式命名，如 

• .barnews { }
• .barproduct { }

四、书写规范 
1、排版规范 
(1) 使用4个空格，而不使用tab或者混用空格+tab作为缩进； 
(2) 规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一； 
单行形式书写风格的排版约束： 

• 如果是在html中写内联的css，则必须写成单行；
• 每一条规则的大括号 { 前后加空格 ；
• 每一条规则结束的大括号 } 前加空格；
• 属性名冒号之前不加空格，冒号之后加空格；
• 每一个属性值后必须添加分号; 并且分号后空格；
• 多个selector共用一个样式集，则多个selector必须写成多行形式 ；

多行形式书写风格的排版约束： 

• 每一条规则的大括号 { 前添加空格；
• 多个selector共用一个样式集，则多个selector必须写成多行形式；
• 每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐；
• 属性名冒号之前不加空格，冒号之后加空格；
• 属性值之后添加分号；

2、属性编写顺序 

• 显示属性：display/list-style/position/float/clear …
• 自身属性（盒模型）：width/height/margin/padding/border
• 背景：background
• 行高：line-height
• 文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
• 其他：cursor/z-index/zoom/overflow
• CSS3属性：transform/transition/animation/box-shadow/border-radius
• 如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后。
• 链接的样式请严格按照如下顺序添加： a:link -> a:visited -> a:hover -> a:active

3、规则书写规范 

• 使用单引号，不允许使用双引号;
• 每个声明结束都应该带一个分号，不管是不是最后一个声明;
• 除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写;
• 除了重置浏览器默认样式外，禁止直接为html tag添加css样式设置;
• 每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性;

4、代码性能优化 

• 合并margin、padding、border的-left/-top/-right/-bottom的设置，尽量使用短名称。
• 选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。
• 注意选择器的性能，不要使用低性能的选择器。
• 禁止在css中使用*选择符。
• 除非必须，否则，一般有class或id的，不需要再写上元素对应的tag。
• 0后面不需要单位，比如0px可以省略成0，0.8px可以省略成.8px。
• 如果是16进制表示颜色，则颜色取值应该大写。
• 如果可以，颜色尽量用三位字符表示，例如#AABBCC写成#ABC 。
• 如果没有边框时，不要写成border:0，应该写成border:none 。
• 尽量避免使用AlphaImageLoader 。
• 在保持代码解耦的前提下，尽量合并重复的样式。
• background、font等可以缩写的属性，尽量使用缩写形式 。

5、CSS Hack的使用 
请不用动不动就使用浏览器检测和CSS Hacks，先试试别的解决方法吧！考虑到代码高效率和易管理，虽然这两种方法能快速解决浏览器解析差异，但应被视为最后的手段。在长期的项目中，允许使用hack只会带来更多的hack，你越是使用它，你越是会依赖它！ 
推荐使用下面的： 

6、字体规则 

• 为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei，几个单词中间有空格组成的必须加引号)
• 字体粗细采用具体数值，粗体bold写为700，正常normal写为400
• font-size必须以px或pt为单位，推荐用px（注：pt为打印版字体大小设置），不允许使用xx-small/x-small/small/medium/large/x-large/xx-large等值
• 为了对font-family取值进行统一，更好的支持各个操作系统上各个浏览器的兼容性，font-family不允许在业务代码中随意设置

• 为保证不同浏览器上字号保持一致，字号用点数pt和像素px来定义。

  （注：中文宋体的9pt和11pt和中文宋体12px 和14.7px 这是经过优化的字号建议考虑，另外黑体字或

  者宋体字加粗时，建议选用11pt和14.7px 的字号比较合适。）

• 禁止在页面中出现 <font size=?> 标记，需要对字体设计时可使用标签的style属性或直接在样式表中实现。

7、选择DOCTYPE

XHTML 1.0 提供了三种DTD声明可供选择：

　　过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写

法)。完整代码如下：

　　<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

　　严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：

　　<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

　　框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种

DTD。完整代码如下：

　　<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

　　理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML

1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现

层的标识、元素和属性，也比较容易通过W3C的代码校验。

　　网页必须调用w3c规范

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<html xmlns="http://www.w3.org/1999/xhtml">

    (解释:  DTD是词汇表, CSS是数据的表现形式)

8、 指定语言及字符集

为文档指定语言：

　　<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

　　为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；

如：
　　常用的语言定义：

　　<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
　　标准的XML文档语言定义：
　　<?xml version=”1.0″ encoding=” utf-8″?>
　　针对老版本的浏览器的语言定义：
　　<meta http-equiv=”Content-Language” content=” utf-8″ />
　　为提高字符集，建议采用“utf-8”。

(解释: 如果网页格式是utf-8 ,最简单的方法就是在写样式表之前将这个css文件用记事本打开,然后另存为utf-8格式。

9、调用方法 

方法1: <link rel="stylesheet" rev="stylesheet" href="css/52css_page.css" type="text/css" media="all" />

       每个页面调用全局css和这个页面用单独用到的css

说明：（1）rel="stylesheet"和 rev="stylesheet" 为设置或获取对象和链接目的的关系。用来告诉浏览器

你link进来的是个样式表文件，（只写一个就可以了,由于目前的CSS还不能抓取rel与rev的属

性值，所以没有办法给不同关系的链接提供不同的样式，所以现在rel与rev只是用来使得网页的

语义性更为完善。）
              （2）media="all" 所有媒体类型的样式;media="screen"设置显示器的样式;media=" print"设置打印的样式。

方法2: <link rel="stylesheet" rev="stylesheet" href="css/common.css" type="text/css" media="all" />

       将整个项目的css 都先用common.css引用,这样每个页面只需调用common.css即可

(解释: common.css 写法 : @import url("style.css"); @import url("header.css");  依次排列。

注:@import引用的CSS会等到页面全部被下载完再被加载,速度相对会较慢。)

10、表格

建议：用百分比控制表格，并利用css的从属关系控制表格

解释：这里定义一个样式为div ，控制这个区域的表格为

.div table{width:100%; border-collapse:collapse;}

.div td{ height:20px;  text-align:center;  border:solid #000000 1px;}

11、空格

a)  不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码）。

b)  转意符号&nbsp，也要尽量少使用，火狐和IE效果不一样

（解决：空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。）

12、缩进

排版中遇到需要进行首行缩进的时候，处理做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记。注意，不要省略 </p> 结束标记 。

13、行距 

行距建议用百分比来定义，通常为120%或150%

14、 浏览器兼容

制作的代码应对以下浏览器兼容：

1.IE6 

2.IE7

3.firefox2.0

在不同的浏览器中界面显示一致，不能出现错位及效果不一的结果。

15、目录命名

在网站根目录中开设images、common 、temp 三个子目录，根据需要再开设media 子目录。

1.       images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等，可以根据需要开设子目录；

2.       common 子目录中放css、js,、include 等公共文件；

3.       temp 子目录放演示内容和样例，比如车型演示图片等等；(因temp文件过多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。)

4.     media 子目录中放flash, avi, quick time 等多媒体文件。

建议: “media”子目录放在“images” 子目录方便CDN加速。

16、鼠标手势

在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，

即“cursor:pointer;”

17、基本全局样式

style.css 中的内容

*{ margin:0; padding:0;}

body{ font-family:"宋体",arial; font-size:12px; background:#fff; color:#000; }

img,a img{ border:0px;}

a img{ vertical-align:middle;}

div,form,img,ul,li,dl,dt,dd{padding:0px; margin:0px; }

td,p,div,li,select,input,textarea{font-family:"宋体";font-size:12px;}

td,p,div,li,input,textarea {word-break:break-all;} 

select,input{vertical-align:middle;}

table,tr,td,th{ font-size:12px;}

ol,li{list-style-type:none;}

ul,li{list-style-type:none;}

h1,h2,h3,h4,h5,h6{ padding:0px; margin:0px;}

.css2007 { color: #333; }         

* html .css2007 { color: #00ffff; }   

*+html .css2007 { color: #999; }   

a:link{ color:#000000; text-decoration: none;}   

a:visited{color:#000000; text-decoration: none;}    

a:hover{color:#ff0000; text-decoration: underline;}   

a:active{ color:#999999; text-decoration: none;}    

.clear { clear:both;}

.hidden { display: none;}

.nobreak {white-space:nowrap;} 

.alpha {filter:alpha(opacity=30); -moz-opacity:0.3;}

.bgalpha {background:transparent;}

五、测试规范 
1、了解浏览器特效支持 
为了页面性能考虑，如果浏览器不支持CSS3相关属性的，则该浏览器的某些特效将不再支持，属性的支持情况如下表所示（Y为支持，N为不支持）： 

2、 设定浏览器支持标准 

• A级－交互和视觉完全符全设计的要求
• B级－视觉上允许有所差异，但不破坏页面的整体效果
• C级－可忽略设计上的细节，但不防碍使用