二、Css命名规范

1.考虑到团队合作，因此CSS命名必须规范，避免开发中造成命名冲突等。

2.Css命名语义化，如：

常用名称：

头： header　　尾： footer 　Logo： logo 　版权： copyright　　内容块： content(A)　栏目块：column 　结构左： left　结构中： center

结构右：right　矩阵导航：matrixNav　首页导航：indexNav　频道二级：channelNav　导航文字：navText　内容导航：nav　下拉：drop

内容主导航：mainNav　子内容导航：subNav　边导航：sidebar　左导航：leftsidebar　右导航：rightsidebar　广告：ad　按钮：btn

搜索：search　关键字：keyWord　标签：tag　菜单：menu　滚动：scroll　列表：list　打印：print 地图：map　博客：blog 视频：video

登陆：login 登录条：loginbar 注册：reg 提示信息：msg　功能区：shop Flash：flash　标题：title　更多：more　热点：hot　评论：review

媒体：media 新闻：news　合作：cooperate　联系：contact　加入我们：joinUs　合作伙伴：partner　友情链接：link 论坛社区：club

投票：vote 摘要：summary　服务：service 指南：guild 描述：description 信息：info　下载：download 价格：price　状态：status 注释：note

地址：address 产品：products 跳转：jump 条：bar　线：line 小技巧：Tips 外套：wrap

这基本上是每个网站常用的模块化命名。

3.针对我们网站的命名：

1. 网站通用模块组件使用：使用fn-开头来命名,例如：翻页模块命名：class=”fn-page”菜单模块命名：class=”fn-menu”

2. 针对网站头部，尾部，内容部分这样框架化的层可以采用ID命名方式 例如：id=”header” id=”footer” id=”content”

3. 针对为JS预留的接口，JS组件使用如下方式：Id=“Js_show” class=“Js_hide”等方式

4. (共同)针对模块 我们采用如下方式：模块+功能的命名方式 如：Class=”page” class=”page-tips” class=”page-list-news”或者class=”pageTips”驼峰式命名

5. 对我们常用的一些css采用如下命名：p-clear p-clearfix p-font12的方式命名

6. 避免 css hack ， 考虑使用特定浏览器前缀表示：.ks-ie6 p {margin: 1em 0;}以上是大体结构上的命名方式，在一些命名的细节中我们还应该注意一些问题：

7. id和class使用，ID为唯一的，因此我们在大的结构上才采用ID，一般就是使用class来命名，也易于通用。

8. 我们为class命名的时候还应该注意语义化，简明化。尽量使用一些英文单词的组合(类别+功能；属性+值等) 如：font24 width990 header footer js-show .ff60cc等命名，一看就很明了，知道是什么意思。避免使用英文拼音命名。

总结：这样的css命名规范，为我们了解网站和后期维护 新同事的加入学习提供了很大的便利。如通用模块命名 fn-XXX 看到这个就知道这个是整个网站通用的css 放在global里面的 js-XX一看到这个就知道这是为JS预留的。这样就对整个网站有个很清晰的了解，通过css命名等细节问题，使开发者更有利的了解网站，维护等。较现在比较混乱无序的命名来说，在各方面都提高了不少。

三、Css代码书写规范

1.css的缩写规则

• 不同类有相同属性及属性值的书写，如.a,.b,#c,.d{height:20px;width:20px;border:1px solid #ccc;}

• 同一属性的缩写，如：.font{border:1px solid #ccc;margin:0 4px;background:#fff url(imae/i.jpg);}等等。

2.选择器的使用：

• 避免使用ID来写全局样式 如 #main a{color:#666;} （不可取）因为ID的优先级高于class这样定全局样式，使得里面的样式没办法重置。

• 最后一级才可以使用标签来作为选择器；如:.header p a{color:#fff;}(不可取) 应该.header .news a{color:#fff;}

• 尽量使用标签作为选择器 减少id class(但是遵循第2条):如：.menu ul{}等

• 书写代码前, 考虑并提高样式重复使用率

• 杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8;

• 在css中避免使用滤镜_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png影响css执行速度

• 避免使用css表达式：top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); 影响css执行速度

• 使用css sprite来优化页面,减少http请求数，加快网站加载。

3.css hack的编写在平时的开发中，我们经常遇到一些浏览器直接的差异问题，可能针对这类问题需要针对某类浏览器写兼容样式。

• ie6 7 8 firefox的兼容写法

• Ie都能认识 \0

• Ie 8不认识 \9

• Ie 67认识*

• Ie6认识_

• Css hack尽量避免使用，不符合w3c标准的。

4.Css的优先级问题：！important（尽量少使用）>Id >class > 标签选择器，书写css的时候特别注意优先级问题，css按照此规则来重置。