IT忍者神龟之css规范

CSS按照层级不同，分为公用级>产品级>页面级三部分，三者之间为继承关系，公用级定义了重置样式、布局结构、和一些常用的组件等，一般是在各个页面统一加载的; 产品级为不同产品线自有的样式，定义了不同产品线各自的风格，一般在各个app统一加载; 页面级为各产品中重用度不高的内容，单独作为样式文件加载。

1.书写规范

1.页面统一utf-8编码。可用 @charset "utf-8"; 指定页面编码。

2.用<link>而不用@import导入外部样式文件，因为@import在ie6下初始瞬间会无法加载，导致页面变形，并且不能并行加载，不利于优化。

3.不要用个性化字体，导致用户不能正常浏览，正文建议用宋体。

4.CSS书写符合浏览器兼容标准，确保页面在浏览器中的兼容性。

5.全部小写，保持CSS写法结构一致。

6.CSS命名规则，以英文单词为单位，多个单词使用小横线-连接(例：class="app-list-info")，不使用拼音。

7.命名不要自造缩写，请使用约定俗成的单词缩写，也可参照html规范里的class和id命名参考。

8.将作用于不同模块的CSS规则集中放在一起，同时用注释说明。通用规则放在具体模块规则的前面。

9.遵从个人习惯属性可写在一行，也可以分开多行书写，多个selector每个占一行，每个属性值后必须以；结尾：

     .selector1,.selector2,.selector3 { property:value;property:value; }

10.注释的格式：

      /*header*/

注释中间不要加---。

11.尽量保持结构与样式分离，便于管理。只使用一次的样式，可以直接加在元素上。

12.尽量不要使用 !important 打乱CSS继承关系。

13.绝对不要使用低效的 * 选择符。

14.清除内容浮动用.clearfix样式，避免用overflow属性造成页面其它兼容问题。

15.尽可能调用系统中现有的样式。

16.所有装饰性的图片（如背景图），要定义在CSS中。bundle目录中的图片，发布后会自动合并为一张图片。

17.每个页面的ID必须是唯一的，且用在结构的定义中。

18.CSS中不要使用expression。

19.CSS中尽量不要使用滤镜。

20.尽量不要设置容器的高度，保持容器高度可自适应，height:100%可能会遇到兼容性问题。

2.CSS属性

2.1 常用属性

显示属性 display position float clear cursor …
盒模型 width height margin padding
排版 vertical-align white-space text-decoration text-align
文字 font color border background

把border和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来方便。

2.2 属性一览下表顺序为从上到下，从左到右：

display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border: border-width || border-color || border-style || border-radius
background: background-color || background-image || background-repeat || background-attachment || background-position
color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor

3.CSS命名参考

3.1 常用的class命名规则：

头	header	内容	content/container	尾	footer	导航	nav
侧栏	sidebar	栏目	column	整体宽度	wrapper/wrap	左右中	left right middle
登录条	login	标志	logo	广告	banner	页面主体	main/body
热点	hot	新闻	news	下载	download	子导航	subnav
菜单	menu	子菜单	submenu	标题	title/ttl/	摘要	summary
搜索	search	友情链接	friendlink	页脚	footer	版权	copyright
滚动	scroll	标签页	tab	文章列表	list	提示信息	msg
小技巧	tips	栏目标题	title	指南	guild	服务	service
注册	regsiter	投票	vote	加入我们	joinus	状态	status/status-bar
按钮	btn-	图标	ico-/icon-	滚动	scroll	标签页	tab
文章列表	list	提示信息	msg/message/message-box	当前的	current/curr/active/act/selected/on	小技巧	tips
注释	note/notice	指南	guide	服务	service	-	-

3.2 直观命名当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示：

自上而下小组：toppanel
横向：horizontalnav
左面：leftside
中心-栏目：centercolumn
右面：rightcol

这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义，因此满足了标识页面元素以及相应的CSS样式的需要。

4.CSS缩写参考

1.对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。

2.同一属性系列根据它的属性值也可以进行简写。如：

list-style，outline，font，background

3.在 CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写。如：

margin，padding，border

4.如果RGB三个颜色值数值两两相同，理论上不可缩写颜色值代码。

5.CSS hack书写规范

注意：在非必要的情况下，最好不要写hack来进行调整，避免因为 hack而导致页面出现问题或因为浏览器升级导致hack失效。IE6、IE7、IE8、Firefox、Chrome之间的兼容写法：写法一：

IE都能识别 *;标准浏览器 (如 FF)不能识别 *；
IE6能识别 *，但不能识别  !important,
IE7能识别 *，也能识别 !important;
FF不能识别 *，但能识别 !important;

根据上述表达，同一类 /ID下的 CSS hack可写为：

.searchInput {background-color:#333;/*三者皆可 */*background-color:#666  !important; /*仅 IE7*/*background-color:#999; /*IE6及 IE6以下 */}

一般三者的书写顺序为： FF、 IE7、 IE6.

写法二：IE6可识别“_”，而 IE7及 FF皆不能识别，所以当只针对 IE6与 IE7及 FF之间的区别时，可这样书写：

.searchInput {
background-color:#333;/*通用 */
background-color:#ccc\0;/* IE8可识别 */
*background-color:#999;/*IE7 及 IE6可识别 */
_background-color:#666;/*仅 IE6可识别 */
}

写法三：（推荐）

*+html 与 *html 是 IE特有的标签，Firefox 暂不支持。

.searchInput {background-color:#333;}
*+html .searchInput {background-color:#555;}/*仅 IE7*/
*html .searchInput {background-color:#666;}/*仅 IE6*/

此方法符合标准规范，推荐使用此方法。另：

body:nth-of-type(1) .CH{
color: #FF0000;/* 这是专门针对Chrome和Safari的CSS hack */
}

6.CSS bug排查方法

6.1. 检查 CSS是否正确

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用 CleanCSS来检查 CSS的拼写错误。CleanCSS本是为 CSS减肥的工具，但也能检查出拼写错误。

6.2 确定错误发生的位置

如果错误影响了整体布局，则可以逐个删除 div块，直到删除某个 div块后显示恢复正常，即可确定错误发生的位置。

6.3 利用 border属性确定出错元素的布局特性

使用 float属性布局一不小心就会出错。这时为元素添加 border属性确定元素边界或添加background属性，错误原因即水落石出。

6.4 利用IETEST等IE测试工具测试各IE版本中的效果

6.5 利用第三方测试工具调试。

IETEST自带debugbar，IE6、IE7可以安装IE developetoolbar V2,Microsoft有script Editor等。基本上都可以查看目标元素，查看css、查看源代码。

6.6 利用浏览器自带的调试工具

E7以上版本及FF、chrome等浏览器都自带调试工具（FF要装Firebug)，在IE9中可以模拟IE8-IE7的效果，再加上window 7的XP mode（需自行安装）自带IE6，基本上可以覆盖所有主流浏览器。