css规范化命名

好吧，我的代码虽然实现了和设计一样的界面，但是还是太臭了，类的命名都是特别的差劲。。找了命名规范，，拿来共享一下，警告自己，，代码不仅要实现功能，更要优美，华丽。。

刚才超哥也讲了很多规则，赶紧记录下来，

认真去看代码大全  认真去看代码大全  认真去看代码大全

重要的事情说三遍。

1：原则上，符合人的阅读常识与习惯，用{}来分隔的时候要，排版对齐，让人看到名字，往左可以看到起始符号，然后从名字立着往下可以看到结束符合，

2：减少嵌套层数，防止代码出现大三角型。每次写之前写之后都想办法精简代码，

3：阅读的习惯是一眼能看完，整个结构和内容，上下太长则每一行多放一些，左右太长则分行，

4：命名上，要体现层级关系，例如  主层idcade，内层idcade-left，idcade-right，这样可以体现出左右id卡的同级关系。

5：针对逻辑，需要把相关的放置在一起，并且大的逻辑块用空行分割，

6：针对每一个小块，要避免可能出现的逻辑问题，例如应该让内容和样式分离，并且，要防止出现重复。

7：写代码就要写出规范的代码，让别人 看得舒服，自己用得也舒服。反复省视代码，看能否更精简。

CSS命名规范（规则） 常用的CSS命名规则

头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签：tags 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guide 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partner

注释的写法:

/* Header */ 内容区 /* End Header */

id的命名:

1)页面结构

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

(2)导航

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

(3)功能

标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：register 搜索：search 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标籤页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright

四、注意事项::

1.一律小写; 2.尽量用英文; 3.不加中槓和下划线; 4.尽量不缩写，除非一看就明白的单词。

五、CSS样式表文件命名

主要的 master.css 模块 module.css 基本共用 base.css 布局、版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css