一:语义化:
1.语义化标签优先
2.基于功能命名,基于内容命名,基于表现命名
3简略,明了,无后患
二:命名范例
1所有命名使用英文小写
比如:class="Main"改为class="main"
2命令用引号包裹
比如:class=header改为class="header"
3用中横线链接
比如:class="headertitle"改为class="header-titile"
4:命名提现功能,不涉及表现样式(颜色,字体,边框,背景等)
比如:使用class="text-lesser"而不是class="light-gray"
三:常见命名
1:
.wrap或.wrapper--用于外侧包裹
.container--包裹容器
.header--用于头部
.body--用于body
.footer--页面尾部
adide,sidebar--侧边栏
.content--用于主要内容
.navigation--导航元素
.pagination--分页
2:
.breadcrumbs--导航列表
.dropdown--下拉菜单
.article--文章
.main--用主体
.thumbnail--头像,小图像
.media--媒体资源
.panel--面板
.toopltip--鼠标放置上去的提示
.popup--鼠标点击弹出的提示
3:
.button--按钮
.ad--广告
.subnav--二级导航
.menu--菜单
.tag--标签
.message或者.notice--提示信息
.summary--摘要
.logo--logo
.search--搜索框
.login--登录
4:
.register--注册
.username--用户名
.password--密码
.banner--广告条
.copyright--版权
.modal或者.dialog--弹窗
四:css书写规范
1tab用两个空格表示
2css的{前加个空格
3每条声明后都加上分号
4换行,而不是放到一行
5颜色统一用小写,用缩写
6小数不写前缀,0不加单位
7尽量缩写
