css命名规范

 1.1 公共部分和经常要用到的样式

    整个容器：container

外围整体布局： wrap

页头部分：head/header/top

内容：content

   页脚部分：foot/footer/bottom

   栏目：column

   主体部分：main

   左/中/右三栏：main_left/main_mid/main_right或者 main_l/main_m/main_r

  侧栏：sidebar

  左右两栏：siderbar_l/sidebar_r或者leftsidebar/rightsidebar

  左中右：left/center/right

  侧导航：sidenav

  左/右导航：leftsidenav/rightsidenav

  子导航：subnav

  菜单：menu

  子菜单：submenu

  标题：title

  摘要：summary

  下拉：drop

  下拉菜单：dropmenu

  搜索：search

  热门搜索：hotsearch

  关键字：keyword

  搜索输入框：search_input

  搜索条：searchbar

  友情链接：friendlink/link

  版权信息：copyright

  投票：vote

  合作伙伴：partner

  服务：service

  指南：guid

  网站信息：siteinfo

  网站地图：sitemap

  网站帮助：sitehelp

  法律声明：siteinfolegal

  信誉：siteinfocredits

  加入我们：joinus

  关于我们：aboutus

  联系我们：contactus

  小技巧：tips

  注释：note

   当前的：current

   标签页：Tab

   文章列表：List

   提示信息：Msg

   滚动：scroll

   工具条：toolbar/tool

   时间：time

   日期：data

   热点：hot

   新闻：news

  注册：Regsiter

  状态：Status

  按钮：Btn

  下载：download

  产品：products/pro

 缩略图：screenshot

等等...

1.2 私有样式命名规范：

为了避免出现样式私有样式的名称和公有样式重复的想象，私有样式采用：”前缀_位置缩写” 的规则。如：该模块是属于产品就可以用product 为前缀。上中下就可以依次是。product_h,product_m,product_b. 中间又分为左右结构，那就是product_m_l,product_m_r

1.3区域块：box/area

   区域块样式类别+box/area,比如新闻区域块：newsbox/newsarea，产品区域块：probox/proarea

 标题栏：bar  (newsbar/probar)

列表：list   (newslist/prolist)

2 id与class:

id一个页面只可以使用一次，class可以多次引用。id和class好像没什么区别，在页面中用了多个id在IE中显示也正常，第一影响就是不能通过W3的校验。在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。

因此：样式最好以class为主，不用id

3 css属性书写顺序

 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin＆padding＆float（包括clear）＆position（相应的 top,right,bottom,left）＆display＆visibility＆overflow等； 自身属性主要包括: width & height & background & border; 文本属性主要包括：font＆color＆text-align＆text-decoration＆text-indent等；其他属性包括: list-style(列表样式)＆vertical-vlign＆cursor＆z-index(层叠顺序) 　＆zoom等. 

 3.1 避免使用CSS表达式（Expression） 

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

 3.2 *{} , #zishu *{} 尽量避开    

由于不同浏览器对HTML标签的解释有差异，所以最终的网页效果在不同的浏览器中可能是不一样的，为了消除这方面的风险，设计者通常会在CSS的一个始就把所有标签的默认属性全部去除，以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签；这样写的问题是：

1)遍历会消耗很多的时间，如果你的HTML代码写的不规范或是某一签标没有必合，这个时间可能还会更长；

2)很多的标签本来就没有这个属性或属性本身就是统一的，那么更给设置一次，也有时间的开消；

4一些注意事项

1)尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名

   2）一律小写字母

  3）尽量用英文

 4）css注释 /* fff */  注意要加空格，不然在jsp读取下会忽略掉注释下得第一个css

 5）css文件最好用utf-8

 6）页面啊居中：margin:0 auto;居右： margin:0 0 0 auto;居左：margin:0 auto 0

7）不要去使用生僻的标签，因为这些标签往往在不同浏览器中解释出来的效果不一样；所以你要尽可能的去使用那些常用的标签；

8)不要使用*；而是把你常用到的这些标签进行处理；例如：body,li,p,h1{margin:0; padding:0}

9) 必须为大区块样式添加注释, 小区块适量注释;

10) 代码缩进与格式: 建议单行书写