命名规范

**CSS 命名一般采用小写英文单词或组合命名，单词与单词间以”-“分割；英文单词不缩写，除非一看就能明白的单词。

文本命名规范

  1. index.css: 一般用于首页建立样式
  2. head.css: 头部样式，当多个页面头部设计风格相同时使用。
  3. base.css: 共用样式。
  4. style.css: 独立页面所使用的样式文件。
  5. global.css: 页面样式基础，全局公用样式，页面中必须包含。
  6. layout.css: 布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中
  7. module.css: 模块，用于产品类页，也可与其它样式配合使用。
  8. master.css: 主要的样式表
  9. columns.css: 专栏样式
  10. themes.css: 主体样式
  11. forms.css: 表单样式
  12. mend.css: 补丁，基于以上样式进行的私有化修补。

页面结构命名：

  1. page: 代表整个页面，用于最外层。
  2. wrap: 外套，将所有元素包在一起的一个外围包，用于最外层
  3. wrapper: 页面外围控制整体布局宽度，用于最外层
  4. container: 一个整体容器，用于最外层
  5. head, header: 页头区域，用于头部
  6. nav: 导航条
  7. content: 内容，网站中最重要的内容区域，用于网页中部主体
  8. main: 网站中的主要区域（表示最重要的一块位置），用于中部主体内容
  9. column: 栏目
  10. sidebar: 侧栏
  11. foot, footer: 页尾、页脚。网站一些附加信息放置区域，（或命名为 copyright）用于底部

导航命名：

  1. nav, navbar, navigation, nav-wrapper: 导航条或导航包，代表横向导航
  2. topnav: 顶部导航
  3. mainbav: 主导航
  4. subnav: 子导航
  5. sidebar: 边导航
  6. leftsidebar 或 sidebar_a: 左导航
  7. rightsidebar 或 sidebar_b: 右导航
  8. title: 标题
  9. summary: 摘要/li>
  10. menu: 菜单，区域包含一般的链接和菜单
  11. submenu: 子菜单
  12. drop: 下拉
  13. dorpmenu: 下拉菜单
  14. links: 链接菜单

功能命名

  1. logo: 标记网站logo标志
  2. banner: 标语、广告条、顶部广告条
  3. login: 登陆，（例如登录表单：form-login）
  4. loginbar: 登录条
  5. register: 注册
  6. tool, toolbar: 工具条
  7. search: 搜索
  8. searchbar: 搜索条
  9. searchlnput: 搜索输入框
  10. shop: 功能区，表示现在的
  11. icon: 小图标
  12. label: 商标
  13. homepage: 首页
  14. subpage: 二级页面子页面
  15. hot: 热门热点
  16. list: 文章列表，（例如：新闻列表：list-news）
  17. scroll: 滚动
  18. tab: 标签
  19. sitemap: 网站地图
  20. msg 或 message: 提示信息
  21. current: 当前的
  22. joinus: 加入
  23. status: 状态
  24. btn: 按钮，（例如：搜索按钮可写成：btn-search）
  25. tips: 小技巧
  26. note: 注释
  27. guild: 指南
  28. arr, arrow: 标记箭头
  29. service: 服务
  30. breadcrumb: (即页面所处位置导航提示）
  31. download: 下载
  32. vote: 投票
  33. siteinfo: 网站信息
  34. partner: 合作伙伴
  35. link, friendlink: 友情链接
  36. copyright: 版权信息
  37. siteinfoCredits: 信誉
  38. siteinfoLegal: 法律信息

样式顺序规范

建议相关的属性说明放在一组，提高代码的可读性。

  1. 布局方式、位置，相关属性（position, left, right, top, bottom, z-index）
  2. 盒模型，相关属性包括（display, float, width, height, margin, padding, border, border-radius）
  3. 文本排版，相关属性包括（font, color, background, line-height, text-align）
  4. 视觉外观，相关属性包括：(color, background, list-style, transform, animation)

由于定位可以从正常的文档流中移除元素，并且还能覆盖盒模型相关的样式，因此排在首位。而盒模型决定了组件的尺寸和位置，所以排第二位。文本和视觉外观对元素影响较小，所以放在第三，第四位；示例代码如下

  1. .box {
  2.   position: absolute;
  3.   top: 0;
  4.   left: 20%;
  5.   z-index: 99;
  6.   width: 100px;
  7.   height: 100px;
  8.   font-size: 20px;
  9.   color:red;
  10.   background-color: aqua;
  11. }

使用CSS缩写属性

对于 background, font, padding, margin 这些简写形式的属性声明，可以缩写的尽量缩写，这样既精简代码又提高用户的阅读体验

  1. .box {
  2.   width: 100px;
  3.   height: 100px;
  4.   margin: 0 10px 20px 30px;
  5.   font: italic bold 12px/30px arial,sans-serif;
  6. }

小数点和单位

值在 -1 和 1 之间时去掉小数点前的 “0”，如果属性值为数字 0，不加任何单位；

  1. .box {
  2.   width: 100px;
  3.   height: 100px;
  4.   margin: 0 10px 20px 0;
  5.   opacity: .5;
  6. }

颜色值十六进制表示法

6 个字符的十六进制表示法，并始终使用小写的十六进制数字；16进制表示法与rgb表示法混用的情况，优先使用 16 进制表示法

  1. .box {
  2.   color: #cccccc;
  3.   background-color: #efefef;
  4. }

引号

属性选择器或属性值用双引号 “” 括起来，而 URI 值 url() 不要使用任何引号

  1. .box {
  2.   font-family: "open sans", arial, sans-serif;
  3.   background-image: url(http://taobao.com/);
  4. }

内容缩进

为了反映层级关系和提高可读性，块级内容都应缩进，建议缩进使用两个空格；

  1. .box {
  2.   line-height: 1.5;
  3. }

空格

  1. 在每个声明块选择器与左花括号前添加一个空格；
  2. 声明块的右花括号应当单独成行；
  3. 每条声明语句的 : 后应该插入一个空格，前面无空格
  1. .box {
  2.   float: right;
  3.   width: 100px;
  4.   color: #333;
  5.   background-color: #f5f5f5;
  6.   text-align: center;
  7. }

媒体查询

将媒体查询放在尽可能相关规则的附近。如果分开了，可能会被遗忘。

媒体查询针对每一个种屏幕（大、中、小）的分别单独组织为一个文件

  1. .element {}
  2. .element-avatar {}
  3. .element-selected {}
  5. @media (min-width: 480px) {
  6.     .element {}
  7.     .element-avatar {}
  8.     .element-selected {}
  9. }

注释

在适当的位置给予代码正确的注释，让他人更容易理解。好的代码注释传达上下文和目标。不要简单地重申组件或者 class 名称。

  1. /* Wrapping element for .modal-title and .modal-close */
  2. .modal-header {
  3. }

如果是对整个文件做注释，最好放在文本头部，简要描述一下文中元信息以及作用

  1. /**
  2.  * 这里描述元信息
  3.  */
  4. html, body {
  5.   height:100%;
  6. }