伪元素实现三角
编码规范
命名技巧
1.语义化标签优先
2.基于功能命名、基于内容命名、基于表现命名
3.简略、明了、无后患
tips：
- 大声叫出它的名字
- 翻译成英文
一、命名范例
1.所有命名都使用英文小写
推荐：<div class="main"></div>
不推荐：<div class="Main"></div>
2.命名用引号包裹
推荐：<div id="header"></div>
不推荐： <div id=header></div>
3.用中横线连接
推荐：<div class="mod-modal"></div>
不推荐： <div class="modModal"></div>
4.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)
推荐：<div class="text-lesser"></div>
不推荐： `<div class="light-grey"></div>
二、常见命名
-
.wrap或.wrapper-- 用于外侧包裹 -
.container或.ct-- 包裹容器 -
.header-- 用于头部 -
.body-- 页面 body -
.footer-- 页面尾部 -
aside、sidebar-- 用于侧边栏 -
.content-- 和headerfooter对应，用于主要内容 -
.navigation-- 导航元素 -
.pagination-- 分页 -
.tabs > .tab-- tab 切换 -
.breadcrumbs-- 导航列表、面包屑 -
.dropdown-- 下拉菜单 -
.article-- 文章 -
.main-- 用于主体 -
.thumbnail-- 头像，小图像 -
.media-- 媒体资源 -
.panel-- 面板 -
.tooltip-- 鼠标放置上去的提示 -
.popup-- 鼠标点击弹出的提示 -
.button、.btn-- 按钮 -
.ad-- 广告 -
.subnav-- 二级导航 -
.menu-- 菜单
24.tag-- 标签 -
.message或者.notice-- 提示消息 -
.summary-- 摘要 -
.logo-- logo -
.search-- 搜索框 -
.login-- 登录 -
.register-- 注册 -
.username-- 用户名 -
.password-- 密码 -
.banner-- 广告条
34.copyright-- 版权 -
.modal或者.dialog-- 弹窗
书写规范
- tab用两个空格表示
- CSS的
:后与{前加个空格 - 每条声明后都加上
; - 换行，不要放在同一行
- 颜色用小写，用缩写，
#fff - 小数不用写前缀，
0.5->.5；0不用加单位 - 尽量缩写，
margin: 5px 10px 5px 10px;->margin: 5px 10px;
参考
