class与id命名规则

2022-07-31 07:01:14 文档大全网 [ 字体：小中大 ] [ 阅读： ]

【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《class与id命名规则》，欢迎阅读！
命名,规则,class
采用英文字母、数字以及”-“命名，以小写字母开头，不能以数字和”-“开头

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{}

√