采用英文字母、数字以及”-“命名，以小写字母开头，不能以数字和”-“开头 1. 2. 3. 4. .123abc{} .-abc{} .ABC{} .ABCabc{} 1. 2. 3. 4. .icon{} .icon01{} .iconText{} .moz-class{} × 采用以下几种命名格式 1. 2. 3. 4. 5. 6. 7. 8. 9. .wrapper{} .sidebar{} √ /* 一个单词，采用全部小写方式 */{} /* 多个单词，采用驼峰写法 */{} .topBar{} .floatBox{} /* 使用前缀，采用”-“连接符 */{} .goodsShowTitle{} /* 驼峰写法 */ .gs-title{} /* 使用连接符 */ 命名要考虙复用,且符合语义化,要根据功能来命名,不要以表现来命名 1. 2. .boxLeft{} /* 侧边栏 */ .navLeft{} /* 侧导航 */ 1. 2. .sidebar{} /* 侧边栏 */ .navSide{} /* 侧导航 */ × 常用功能命名如下： CSS样式命名 网页公共命名 .wrapper .container或.content .layout .head, .header .foot, .footer .nav .subnav .menu .submenu .sideBar .main 说明 √ 页面外围控制整体布局宽度 容器,用于最外层 布局 页头部分 页脚部分 主导航 二级导航 菜单 子菜单 侧栏 页面主体 .sidebarLeft, .sidebarRight 左边栏或右边栏 .tag .msg .message .tips .vote .friendlink .title .summary .loginBar .searchInput .hot .search .searchOutput .searchBar .searchResults .copyright .branding .logo .siteinfo .siteinfoLegal .siteinfoCredits .joinus .partner .service .regsiter .guild .sitemap .list .homepage .subpage .tool, .toolbar .drop .dorpmenu .status .scroll .tab .left .right .center .news .download .toolBar 标签 提示信息 小技巧 投票 友情连接 标题 摘要 登录条 搜索输入框 热门热点 搜索 搜索输出和搜索结果相似 搜索条 搜索结果 版权信息 商标 网站LOGO标志 网站信息 法律声明 信誉 加入我们 合作伙伴 服务 注册 指南 网站地图 列表 首页 二级页面子页面 工具条 下拉 下拉菜单 状态 滚动 标签页 居左、中、右 新闻 下载 工具条 一个 id 在一个页面中,只能出现一次,不能出现多个同名 id 预防命名冲突 ( 添加名称前缀可以有效的预防命名冲突，针对某个功能模块添加前缀，比如，热门搜索模块的列表表头、内容、标题等等) 1. .header{}/* 可能所有页面都有 */ 1. 2. .content{}/* 可能所有页面都有 */ 2. 3. .title{}/* 可能所有页面都有 */ 3. × 命名尽量简短，但要保留基本语义，要能看懂 .hotSearch-header{} .hostSearch-content{} .hotSearch-title{} √ 本文来源：https://www.wddqw.com/doc/d0641253aa00b52acec7ca45.html