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

命名规则

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

1. 基于功能命名

   
   

   
   

   编码规范

   
   

   今天的内容是编码规范，讲师
   
   

   
   

   编码规范

   
   

   今天的内容是编码规范
   

2. 基于功能命名

   
   

   
   
   

3. 基于内容命名

   
   
   
   

4. 基于表现命名

   
   

   
   
   

5. 简略，明了，无后患

   
   

   ...

   
   

   ...

   
   
   

   ...

   
   

   ...

命名技巧

1. 使用英文小写

   推荐：

   
   不推荐：

2. 用引号包裹命名

   推荐：

   
   不推荐：

3. 用中横线连接

   推荐：

   
   不推荐：

4. 命名体现功能，但不表现样式（颜色，字体，边框，背景等）

   推荐：

   
   不推荐：

常见的命名

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