伪元素实现三角

预览链接

编码规范

命名技巧

1.语义化标签优先
2.基于功能命名、基于内容命名、基于表现命名
3.简略、明了、无后患

tips：

1. 大声叫出它的名字
2. 翻译成英文

一、命名范例

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>

二、常见命名

1. .wrap或.wrapper -- 用于外侧包裹
2. .container或.ct -- 包裹容器
3. .header -- 用于头部
4. .body -- 页面 body
5. .footer -- 页面尾部
6. aside、sidebar -- 用于侧边栏
7. .content -- 和header footer 对应，用于主要内容
8. .navigation -- 导航元素
9. .pagination -- 分页
10. .tabs > .tab-- tab 切换
11. .breadcrumbs -- 导航列表、面包屑
12. .dropdown -- 下拉菜单
13. .article -- 文章
14. .main -- 用于主体
15. .thumbnail -- 头像，小图像
16. .media -- 媒体资源
17. .panel -- 面板
18. .tooltip -- 鼠标放置上去的提示
19. .popup -- 鼠标点击弹出的提示
20. .button、.btn -- 按钮
21. .ad -- 广告
22. .subnav -- 二级导航
23. .menu -- 菜单
    24 .tag -- 标签
24. .message或者.notice -- 提示消息
25. .summary -- 摘要
26. .logo -- logo
27. .search -- 搜索框
28. .login -- 登录
29. .register -- 注册
30. .username -- 用户名
31. .password -- 密码
32. .banner -- 广告条
    34 .copyright -- 版权
33. .modal或者.dialog -- 弹窗

书写规范

1. tab用两个空格表示
2. CSS的:后与{前加个空格
3. 每条声明后都加上;
4. 换行，不要放在同一行
5. 颜色用小写，用缩写，#fff
6. 小数不用写前缀，0.5->.5；0不用加单位
7. 尽量缩写，margin: 5px 10px 5px 10px;->margin: 5px 10px;
   参考

google html css编码规范
bootstrap 编码规范
命名这货真难