CSS代码规范

@charset

样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 UTF-8 。

@charset "UTF-8";

• UTF-8 编码：为世界统一编码，可以兼容全世界的操作系统，不会出现乱码情况。缺点是体积稍大点。

• gb2312 编码：国外的浏览者可能会出现乱码，获提示安装语言包。一般，网站提供给全球看的一般用UTF-8，仅仅针对国内的用gb2312 就可以了。体积稍小点，因为程序产生的网页文本使用 ANSI 编码格式，会比 UTF-8 文本编码节省一些体积，访问速度会稍微快一点点。

• 使用 UTF-8 编码有 2 个要注意：

  • 网页的 meta 必须有这句：<meta charset="UTF-8">。
  • 网页的文本格式必须保存为 UTF-8 格式。

代码风格

• class用"-"连接，id用驼峰命名。
• 使用展开格式书写样式，即一个属性一行，每个属性声明末尾都要加分号。
• 选择器：尽量少用通用选择器 *。
• 不使用 ID 选择器。
• 不使用无具体语义定义的标签选择器。
• 代码缩进：统一使用两个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）。
• 左括号与类名之间一个空格，冒号与属性值之间一个空格。
• 逗号分隔的取值，逗号之后一个空格。
• 为单个css选择器或新申明开启新行。
• 十六进制数值能用简写的尽量用简写，例如使用 #fff 替代 #ffffff。
• 不要为 0 指明单位。
• 去掉小数点前面的 0。
• css属性值需要用到引号时，统一使用单引号。
• 图片引入不需要引号。

属性书写顺序

• 布局定位属性：display、position、float、clear、visibility、overflow。

• 自身属性：width、height、margin、padding、border、background。

• 文本属性：color、font、text-decoration、text-align、vertical-align、white- space、break-word。

• 其他属性（CSS3）：content、cursor、border-radius、box-shadow、text-shadow、background: linear-gradient …。

  body {
      /* 定位属性 */
      display: flex;
      position: absolute;
      float: left;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      clear: both;
      z-index: 100;
      content: '';
      list-style: square;
      visibility: visible;
  
      /* 自身属性 */
      width: 100px;
      height: 100px;
      border: 10px solid #fff;
      padding: 10px;
      margin: 10px;
      background: #fff;
  
      /* 文字样式 */
      color: white;
      font-family: '微软雅黑';
      font-size: 14px;
      font-style: normal;
      font-weight: bold;
      font-varient: normal;
  
      /* 文本属性 */
      text-align: center;
      vertical-align: middle;
      text-transform: none;
      text-indent: 2px;
      text-decoration: underline;
      letter-spacing: 10px;
      word-spacing: 10px;
      white-space: 10px;
      text-overflow: ellipsis;
  }
  

• 有浏览器前缀的属性在前，标准属性在后。

  .border-radius {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -o-border-radius: 10px;
      -ms-border-radius: 10px;
      border-radius: 10px;
  }