前言中略微描述了 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: 法律信息