今天在制作网站404页面的时候给某个<div>标签类名取名为404Box，结果css样式加不上去，找了一会发现是404Box不符合class和id的取名规则，于是我就研究了一下class和id的取名法则。
采用英文字母、数字以及”-“命名，以小写字母开头，不能以数字和”-“开头
错误的命名：
.123abc{}
.-abc{}
.ABC{}
.ABCabc{}
正确的命名：
.icon{}
.icon01{}
.iconText{}
.moz-class{}
命名格式
/* 一个单词，采用全部小写方式 */
.wrapper{}
.sidebar{}
/* 多个单词，采用驼峰写法 */
.topBar{}
.floatBox{}
/* 使用前缀，采用”-“连接符 */
.goodsShowTitle{} /* 驼峰写法 */
.gs-title{} /* 使用连接符 */
命名要考虙复用,且符合语义化,要根据功能来命名,不要以表现来命名
错误的命名：
.boxLeft{} /* 侧边栏 */
.navLeft{} /* 侧导航 */
正确的命名：
.sidebar{} /* 侧边栏 */
.navSide{} /* 侧导航 */
预防命名冲突
添加名称前缀可以有效的预防命名冲突，针对某个功能模块添加前缀，比如，热门搜索模块的列表表头、内容、标题等等。
错误的命名：
.header{}/* 可能所有页面都有 */
.content{}/* 可能所有页面都有 */
.title{}/* 可能所有页面都有 */
正确的命名：
.hotSearch-header{}
.hotSearch-content{}
.hotSearch-title{}
命名尽量简短，但要保留基本语义，要能看懂
常用功能命名
| CSS样式命名 | 说明 |
|---|---|
| .wrapper | 页面外围控制整体布局宽度 |
| .container或.content | 容器,用于最外层 |
| .layout | 布局 |
| .head, .header | 页头部分 |
| .foot, .footer | 页脚部分 |
| .nav | 主导航 |
| .subnav | 二级导航 |
| .menu | 菜单 |
| .sideBar | 侧栏 |
| .sidebarLeft, .sidebarRight | 左边栏或右边栏 |
| .tag | 标签 |
| .friendlink | 友情链接 |
| .logo | 网站LOGO标志 |
| .copyright | 版权信息 |
| .toolBar | 工具条 |
| .partner | 合作伙伴 |
| .regsiter | 注册 |
| .homepage | 首页 |
如有遗漏或者更好的建议，欢迎留言。
网友评论