命名规范
1、主要的、重要的、特殊的、最外层的盒子使用 ID 属性命名，其他的都使用 class 属性命名。
2、命名规则须以内容优先，表现为辅。首先根据所要呈现的内容、功能来命名，如果内容实在无法找到合适的命名，可以再根据表现命名。
3、大多数情况下，命名都使用英文单词，可以增加代码的可读性，但特殊情况下，实在找不到合适的单词时，可以使用拼音命名，但必须简明，结构清晰。
4、ID 和 Class 命名尽量全部都使用小写，多个单词可以使用连字符（-）链接，命名可以使用数字，但不能以数字开头。
5、命名可以使用单词缩写，但必须确保是有效的缩写，即别人能看懂，不能自定义缩写。
属性的书写顺序
属性的书写顺序对于浏览器来说没有区别，除了优先级覆盖之外。但是如果顺序保持一致的话，扫一眼可以很快地知道这个选择器有什么类型的属性影响了它，所以一般要把比较重要的属性放前面。比较建议的顺序是这样的：
CSS 常用命名
在前端开发中，规范使用 DIV+CSS 命名，可以增强团队合作提高开发效率，有利于页面后期的维护和优化。
页面结构 | |
|---|---|
| 命名 | 作用 |
| wrap | 外套、包裹，用于最外层 |
| wrapper | 外套，用于页面外围控制整体布局宽度 |
| box | 盒子，容器 |
| header | 头部，用于页头部分 |
| nav | 导航，主导航 |
| main | 主要区域，内容主体 |
| content/container | 内容，内容容器 |
| sidebar | 侧边栏 |
| footer | 底部，用于页脚部分 |
常用的文件命名 | |
|---|---|
| 命名 | 作用 |
| 全局样式 | global.css |
| 布局结构 | layout.css |
| 基本共用 | base.css |
| 综合样式 | style.css |
| 主要的 | master.css |
| 模块 | module.css |
| 表单 | forms.css |
| 主题/网页换肤 | themes.css |
| 字体 | font.css |
| 打印 | print.css |
| 补丁 | mend.css |
产品相关命名 | |
|---|---|
| 命名 | 作用 |
| keyword | 关键词。 |
| products | 产品。 |
| products-prices | 产品价格。 |
| products-description | 产品描述。 |
| products-review | 产品评论。 |
| editor-review | 编辑评论。 |
| news-products | 最新产品。 |
| publisher | 生产商。 |
| screenshot | 缩略图。 |
| faqs | 常见问题。 |
| barnding | 商标。 |
| pay | 充值。 |
| reputation | 信誉。 |
其他常用命名 | |
|---|---|
| 命名 | 作用 |
| title | 栏目标题。 |
| summary | 摘要。 |
| hot | 热门热点信息，推荐。 |
| msg | 提示信息。 |
| news | 新闻。 |
| list | 列表，文章列表。 |
| piclist | 图片列表。 |
| newslist | 新闻列表。 |
| search-output | 搜索输出。 |
| search-results | 搜索结果。 |
| drop/dropdown | 下拉。 |
| dropmenu/dorpdown-content | 下拉菜单。 |
| scroll | 滚动。 |
| homepage | 首页。 |
| subpage | 子页面，二级页面。 |
| tag | 标签。 |
| tab | 标签页。 |
| tips | 小技巧。 |
| ranking | 排行。 |
| vote | 投票。 |
| bth | 按钮。 |
| icon | 图标。 |
| arr/arrow | 箭头。 |
| status | 状态。 |
| note | 注释。 |
| skin | 皮肤。 |
| current | 当前的。 |
| active | 活跃的，有效的。 |
| download | 下载。 |
| friendLink | 友情链接。 |
| copyright | 版权信息。 |
| partner | 合作伙伴。 |
| joinus | 加入我们。 |
| sitemap | 网站地图。 |
| siteinfo | 网站信息。 |
| siteinfoLegar | 法律声明。 |
| announcement | 公告。 |
| guild | 指南。 |
| service | 服务。 |
| promotion | 推广。 |
| blog | 博客。 |
| forum | 论坛。 |
功能区块 | |
|---|---|
| 命名 | 作用 |
| left center right | 左中右 |
| main-left | 左侧主要布局 |
| main-right | 右侧主要布局 |
| logo | 网站 LOGO 标志。 |
| search | 搜索输入框。 |
| loginbar | 登录条。 |
| regsiter | 注册模块。 |
| banner | 广告，用于横幅广告条。 |
| menu | 菜单。 |
| submenu | 子菜单，二级菜单。 |
| top | 顶部。 |
| topnav | 顶导航。 |
| mainnav | 主导航。 |
| subnav | 子导航，二级导航。 |
| leftsideBar | 左导航。 |
| rightsideBar | 右导航。 |
| topbar | 顶部工具/菜单。 |
| bottom | 底部。 |
| bottombar | 底部工具栏。 |
| tool | 工具条。 |
| shop | 功能区，如购物车、收银台。 |