css编码规范.docx

css编码规范.docx

《css编码规范.docx》由会员分享，可在线阅读，更多相关《css编码规范.docx（12页珍藏版）》请在冰豆网上搜索。

css编码规范

目录

1CSS的框架2

1.1base层2

1.2common层3

1.3page层3

2CSS编写规范3

2.1使用外部样式3

2.2注释4

2.2.1文件注释4

2.2.2区域段注释4

2.2.3行注释4

2.3命名5

2.3.1文件命名5

2.3.2CSS命名5

2.4缩进6

2.5结尾分号6

2.6属性值前空格6

2.7避免使用CSS表达式7

2.8属性书写顺序7

2.9选择器7

2.10简化属性值8

2.11使用多重选择器8

2.12分隔选择器9

2.13多用组合，少用继承9

2.14避免使用“*”9

2.15兼容的属性9

2.16CSS代码压缩9

3CSS样式表中注意的小细节10

1CSS的框架

CSS的框架，重点是对CSS的组织，推荐组织方法：

base.css+common.css+page.css。

将系统中所有的样式，按照职能分成三大类：

base、common和page。

在一般情况下，任何一个网页的最终表现都是由这三者共同完成的，这三者不是并列结构，而是层叠结构，如图1-1所示。

图1-1

1.1base层

这一层位于三者的最底层，提供CSSreset功能和粒度最小的通用类—原子类。

这一层会被所有页面引用。

它与具体UI（用户界面）无关，具有高度可移植性，无论何种风格的设计都可以引用它，所以base层要力求精简和通用。

这一层的内容很少，可以简单地放在一个文件里，且相对稳定，基本上不需要维护。

通用原子类是一系列常用的基本类，包括：

文字、定位、长宽和边距。

除了极少数特殊类，绝大部分通用原子类都只包含一句CSS，如：

.f12{font-size:

12px}。

通用原子类具有两个特点：

＂通用性＂和＂原子性＂。

＂通用性＂表现在它们是网站最常用的类，任何页面都可以随意使用它们。

＂原子性＂表现在它们是最基础的样式，一个类只设置一个样式，不可再分。

由于它们具有通用性，所以在保证命名有语义的前提下，命名应尽量简短，方便调用。

CSSreset，HTML标签在浏览器里有默认的样式，例如P标签有上下边距，strong标签有字体加粗的样式，a标签未被访问的链接带有下划线而且是蓝的等

不同的浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而在Firefox下，它的缩进却是有padding实现的。

在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦。

现在流行的解决方法是一开始就将浏览器的默认样式全部去掉，更确切地说，应该通过重新定义标签的样式，“覆盖”掉浏览器提供的默认样式，这就是CSSreset。

参见YUI：

1.2common层

这一层位于中间，提供组件级的CSS类。

网站中高度重用的模块，我们把它们视为组件，放在common层。

＂模块化＂可以从样式和行为两个层面来考虑，与common层相关的是样式的模块化。

common层是系统级的，不同系统有不同的common层，同一个系统只有一个common层。

1.3page层

系统中非高度重用的模块，可以把它们放在page层。

page层位于最高层，提供页面级的样式，每个页面都会有自己的page层CSS。

在page层，代码可以由多人开发，如何避免冲突是个需要注意的问题。

通常我们通过命名规则来避免这种冲突。

2CSS编写规范

2.1使用外部样式

这个原则始终是一个很好的设计实践。

不但更易于维护修改，更重要的是使用外部文件可以提高页面速度。

因为CSS文件能在浏览器中产生缓存，内置在HTML文档中的CSS会在每次请求中随HTML文档重新下载。

所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：

#container{..}

#sidebar{..}

或

Arial,helvetica,sans-serif;color:

#666;">

2.2注释

2.2.1文件注释

在样式表开头添加一个注释块，用以描述这个样式表的创建日期、创建者、标记等备注信息。

如：

/**

Site:

 Site name 

Author:

 eliane

Updated:

 Date and time 

Updated by:

 Name 

**/ 

2.2.2区域段注释

在区域的前面加上注释，用以说明此段区域样式修饰的代码块等信息。

/*=S注释内容*/

.class{

...

}

.class{

...

}

/*=E注释内容*/

（注意：

注释信息统一写在区域标签开始之前和结束之后，并以“S”或“E”开始，表示区域注释的开始或结束。

）

2.2.3行注释

直接写于属性值后面，如：

.search{border:

1pxsolid#fff;/*定义搜索输入框边框*/

2.3命名

2.3.1文件命名

文件名称统一用小写的英文字母、数字和下划线的组合。

命名原则的指导思想是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。

2.3.2CSS命名

使用富有含义和通用的id和class名，尽量做到见名知意（例如某网站首页“免费注册”按钮上的class名称：

help_guest_regist），同时尽可能的短。

常见的书写方法：

有驼峰命名法、下划线命名法（不管用哪种，经量做到统一）。

常见命名规范有：

1直观命名

当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。

这种方法使得类以及id的名称如下面所示：

自上而下小组：

toppanel

横向：

horizontalnav

左面：

leftside

中心-栏目：

centercolumn

右面：

rightcol

这些是CSS以及XHTML类和id的有效命名方式。

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

2结构化命名

可以按照如下所示的结构化方式来对类以及id名称命名：

顶部抢眼部分：

branding

导航部分：

mainnav

主要内容部分：

maincontent

这些名字同直观命名方式一样非常易懂，但他们描述了页面元素的作用而非位置。

这使得代码更加符合使用纯粹的结构化标记（structuralmarkup）的初衷，即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。

3自定义命名

根据w3c网站上给出的,最好是用意义命名比如：

是重要的新闻高亮显示（像红色有两种）

.red{color:

red}

.important-news{color:

red}

很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自定义名字

4同类属性的命名

（1）颜色:

使用颜色16进制代码,如

.f60{color:

#f60;

}

.ff8600{color:

#ff8600;

}

（2）字体大小,直接使用"font+字体大小"作为名称,如

.font12px{font-size:

12px;

}

.font9pt{font-size:

9pt;

}

CSS命名时应注意事项:

1用英文字母。

2为了避免冲突，可以加上模块前缀。

3不允许使用中杠（—）连接符。

2.4缩进

对处在{}中的语句进行缩进（一个tab）。

2.5结尾分号

每个css属性声明后都要使用一个分号，即使是最后的那个。

2.6属性值前空格

属性名与属性值之间，间隔一个空格键。

2.7避免使用CSS表达式

表达式的问题就在于它的计算频率要比我们想象的多。

不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。

给CSS表达式增加一个计数器可以跟踪表达式的计算频率。

如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。

所以，非不得已，请避免使用CSS表达式。

2.8属性书写顺序

建议遵循布局定位属性–>自身属性–>文本属性–>其他属性。

此条可根据自身习惯书写,但尽量保证同类属性写在一起。

属性列举:

1显示属性（display、list-style、position、float、clear）。

2自身属性（width、height、margin、padding、border、background）。

3文本属性（color、font、text-decoration、text-align、vertical-align、white-space、othertext、content）。

4其他属性包括（list-style（列表样式）、cursor、z-index（层叠顺序）、zoom等）。

2.9选择器

避免出现多余的祖先选择器，尽量遵循“三无原则”。

即无ID，无层级，无标签。

为什么不要，有三大原因：

、限制重用：

使用层级（#test.test），或使用标签（ul.test），可能出于习惯，或是为了避免冲突。

但是限制越多，越抑制了CSS的重用性。

例如#test.test{}这种写法，无论里面的CSS重用性多大，完全限死在了id为test的元素下，没有重用性可言。

又如：

ul.test，同样的div却不能用。

、CSS文件大小

如：

.enu_dropdown.menu_itemullia.title{color:

#fcfcfc;}完全增大了CSS，从而影响了加载速度。

、降低了渲染效率

如：