web前端基础知识（三）——CSS编码规范

命名规则

CSS的命名需要尽可能实现语义化

1. 基于功能命名

   <!-- 不好 -->
<div class="article">
<div class="article_title">编码规范</div>
<div class="the_content">今天的内容是编码规范，讲师
<!-- 好 -->
<article>
<h1>编码规范</h1>
<p>今天的内容是编码规范
</article>

2. 基于功能命名

   <!-- 不好 -->
<div class="left"></div>
<!-- 好 -->
<div class="success"></div>

3. 基于内容命名

   <!-- 不好 -->
<a class="link" href="#"></a>
<!-- 好 -->
<a class="login" href="#"></a>

4. 基于表现命名

   <!-- 不好 -->
<div class="s"></div>
<!-- 好 -->
<div class="theme-color"></div>

5. 简略，明了，无后患

   <!-- 好 -->
<article class="movies">...</article>
<article class="news">...</article>
<!-- 不好 -->
<article class="blue">...</article>
<article class="redBg mt30 bigText">...</article>

命名技巧

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. .wrapper或者.wrap–用于外侧包裹；
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 – 标签
25. .message或者.notice – 提示消息
26. .summary – 摘要
27. .logo – logo
28. .search – 搜索框
29. .login – 登录
30. .register – 注册
31. .username – 用户名
32. .password – 密码
33. .banner – 广告条
34. .copyright – 版权
35. .modal或者 .dialog – 弹窗

CSS书写规范

1. tab 用两个空格表示
2. css的 :后加个空格， {前加个空格
3. 每条声明后都加上分号
4. 换行，而不是放到一行
5. 颜色用小写，用缩写, #fff
6. 小数不用写前缀, 0.5s -> .5s；0不用加单位
7. 尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px

一些关于CSS编码规范的网站参考

https://google.github.io/styleguide/htmlcssguide.xml
http://codeguide.bootcss.com/
https://seesparkbox.com/foundry/naming_css_stuff_is_really_hard