css 命名规划

命名规范

前言中略微描述了 CSS 怎么使用；下面介绍一下 CSS 的一些代码规范；

CSS 命名一般采用小写英文单词或组合命名，单词与单词间以"-"分割；英文单词不缩写，除非一看就能明白的单词。

文本命名规范

1. index.css: 一般用于首页建立样式

2. head.css: 头部样式，当多个页面头部设计风格相同时使用。

3. base.css: 共用样式。

4. style.css: 独立页面所使用的样式文件。

5. global.css: 页面样式基础，全局公用样式，页面中必须包含。

6. layout.css: 布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中

7. module.css: 模块，用于产品类页，也可与其它样式配合使用。

8. master.css: 主要的样式表

9. columns.css: 专栏样式

10. themes.css: 主体样式

11. forms.css: 表单样式

12. mend.css: 补丁，基于以上样式进行的私有化修补。

页面结构命名：

1. page: 代表整个页面，用于最外层。

2. wrap: 外套，将所有元素包在一起的一个外围包，用于最外层

3. wrapper: 页面外围控制整体布局宽度，用于最外层

4. container: 一个整体容器，用于最外层

5. head, header: 页头区域，用于头部

6. nav: 导航条

7. content: 内容，网站中最重要的内容区域，用于网页中部主体

8. main: 网站中的主要区域（表示最重要的一块位置），用于中部主体内容

9. column: 栏目

10. sidebar: 侧栏

11. foot, footer: 页尾、页脚。网站一些附加信息放置区域，（或命名为 copyright）用于底部

导航命名：

1. nav, navbar, navigation, nav-wrapper: 导航条或导航包，代表横向导航

2. topnav: 顶部导航

3. mainbav: 主导航

4. subnav: 子导航

5. sidebar: 边导航

6. leftsidebar 或 sidebar_a: 左导航

7. rightsidebar 或 sidebar_b: 右导航

8. title: 标题

9. summary: 摘要/li>

10. menu: 菜单，区域包含一般的链接和菜单

11. submenu: 子菜单

12. drop: 下拉

13. dorpmenu: 下拉菜单

14. links: 链接菜单

功能命名

1. logo: 标记网站logo标志

2. banner: 标语、广告条、顶部广告条

3. login: 登陆，（例如登录表单：form-login）

4. loginbar: 登录条

5. register: 注册

6. tool, toolbar: 工具条

7. search: 搜索

8. searchbar: 搜索条

9. searchlnput: 搜索输入框

10. shop: 功能区，表示现在的

11. icon: 小图标

12. label: 商标

13. homepage: 首页

14. subpage: 二级页面子页面

15. hot: 热门热点

16. list: 文章列表，（例如：新闻列表：list-news）

17. scroll: 滚动

18. tab: 标签

19. sitemap: 网站地图

20. msg 或 message: 提示信息

21. current: 当前的

22. joinus: 加入

23. status: 状态

24. btn: 按钮，（例如：搜索按钮可写成：btn-search）

25. tips: 小技巧

26. note: 注释

27. guild: 指南

28. arr, arrow: 标记箭头

29. service: 服务

30. breadcrumb: (即页面所处位置导航提示）

31. download: 下载

32. vote: 投票

33. siteinfo: 网站信息

34. partner: 合作伙伴

35. link, friendlink: 友情链接

36. copyright: 版权信息

37. siteinfoCredits: 信誉

38. siteinfoLegal: 法律信息