css 命名规划

命名规范

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

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

文本命名规范

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

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

1. base.css: 共用样式。

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

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

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

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

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

1. columns.css: 专栏样式

1. themes.css: 主体样式

1. forms.css: 表单样式

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

页面结构命名：

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

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

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

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

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

1. nav: 导航条

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

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

1. column: 栏目

1. sidebar: 侧栏

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

导航命名：

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

1. topnav: 顶部导航

1. mainbav: 主导航

1. subnav: 子导航

1. sidebar: 边导航

1. leftsidebar 或 sidebar_a: 左导航

1. rightsidebar 或 sidebar_b: 右导航

1. title: 标题

1. summary: 摘要/li>

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

1. submenu: 子菜单

1. drop: 下拉

1. dorpmenu: 下拉菜单

1. links: 链接菜单

功能命名

1. logo: 标记网站logo标志

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

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

1. loginbar: 登录条

1. register: 注册

1. tool, toolbar: 工具条

1. search: 搜索

1. searchbar: 搜索条

1. searchlnput: 搜索输入框

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

1. icon: 小图标

1. label: 商标

1. homepage: 首页

1. subpage: 二级页面子页面

1. hot: 热门热点

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

1. scroll: 滚动

1. tab: 标签

1. sitemap: 网站地图

1. msg 或 message: 提示信息

1. current: 当前的

1. joinus: 加入

1. status: 状态

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

1. tips: 小技巧

1. note: 注释

1. guild: 指南

1. arr, arrow: 标记箭头

1. service: 服务

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

1. download: 下载

1. vote: 投票

1. siteinfo: 网站信息

1. partner: 合作伙伴

1. link, friendlink: 友情链接

1. copyright: 版权信息

1. siteinfoCredits: 信誉

1. siteinfoLegal: 法律信息