当样式出现在其它文档，如 HTML 的 STYLE 标签或标签属性 “style”，样式的编码由文档的决定。

文档外链样式表编码

文档外链样式表的编码可以由以下各项按照由高到低的优先级顺序决定：

  1. HTTP “Content-Type” 字段参数 “charset”（或其它协议相似的参数）
  2. BOM（byte-order mark）和（或）
  3. Link 中的元数据设置（如果有的话）
  4. 引用样式表字符集或文档编码（如果有的话）
  5. 假定为 UTF-8 编码

样式表编码

  • @charset规则一定要在样式文件的第一行首个字符位置开始，否则的话就会有机会让 BOM 设置生效（如果有设置 BOM 的话）而优于 作为样式表的编码
  • 一定要写上，并且用小写字母，不能出现转义符

团队约定

  • 样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”
  • 字符 “”; 都用小写字母，不能出现转义符，编码名允许大小混写
  • 考虑到在使用“UTF-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM。（更多关于 BOM 可参考 BOM的介绍 和 ）

推荐：

不推荐：

  1. /**
  2.  * @desc File Info
  3.  * @author Author Name
  4.  * @date 2015-10-10
  5.  */
  7. /* @charset规则不在文件首行首个字符开始 */
  8. @charset "UTF-8";
  10. .jdc{}
  1. @CHARSET "UTF-8";
  2. /* @charset规则没有用小写 */
  4. .jdc{}
  1. /* 无@charset规则 */
  2. .jdc{}

更多关于样式编码：CSS style sheet representation

代码风格

样式书写一般有两种：一种是紧凑格式 (Compact)

  1. .jdc{ display: block;width: 50px;}

一种是展开格式（Expanded）

  1. .jdc{
  2.     width: 50px;
  3. }

团队约定

代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

  1. /* 推荐 */
  2. .jdc{
  3.     display:block;
  4. }
  6. /* 不推荐 */
  7. .JDC{
  8.     DISPLAY:BLOCK;
  9. }

选择器

  • 尽量少用通用选择器 *
  • 不使用 ID 选择器
  • 不使用无具体语义定义的标签选择器
  1. /* 推荐 */
  2. .jdc {}
  3. .jdc li {}
  4. .jdc li p{}
  6. /* 不推荐 */
  7. *{}
  9. .jdc div{}

代码缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

每个属性声明末尾都要加分号；

  1. .jdc {
  2.     width: 100%;
  3.     height: 100%;
  4. }

代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

推荐：

  1. .jdc { 
  2.     width: 100%; 
  3. }

不推荐：

  1. .jdc{ 
  2.     width:100%;
  3. }

逗号分隔的取值，逗号之后一个空格

推荐：

  1. .jdc {
  2.     box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
  3. }

不推荐：

  1. .jdc {
  2.     box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
  3. }

为单个css选择器或新申明开启新行

推荐：

  1. .jdc, 
  2. .jdc_logo, 
  3. .jdc_hd {
  4.     color: #ff0;
  5. }
  6. .nav{
  7.     color: #fff;
  8. }

不推荐：

  1.     color: #ff0;
  2. }.nav{
  3.     color: #fff;
  4. }

推荐：

不推荐：

  1. .jdc {
  2.     color: rgba( 255, 255, 255, 0.5 );
  3. }

属性值十六进制数值能用简写的尽量用简写

推荐：

  2.     color: #fff;
  3. }

不推荐：

  1. .jdc {
  2.     color: #ffffff;
  3. }

不要为 0 指明单位

推荐：

  1. .jdc {
  2.     margin: 0 10px;
  3. }

不推荐：

  1. .jdc {
  2.     margin: 0px 10px;
  3. }

属性值引号

css属性值需要用到引号时，统一使用单引号

  1. /* 推荐 */
  2. .jdc { 
  3.     font-family: 'Hiragino Sans GB';
  4. }
  6. /* 不推荐 */
  7. .jdc { 
  8.     font-family: "Hiragino Sans GB";
  9. }

属性书写顺序

建议遵循以下顺序：

  1. 布局定位属性：display / position / float / clear / visibility / overflow
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
  1. .jdc {
  2.     display: block;
  3.     position: relative;
  4.     float: left;
  5.     width: 100px;
  6.     height: 100px;
  7.     margin: 0 10px;
  8.     padding: 20px 0;
  9.     font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  10.     color: #333;
  11.     background: rgba(0,0,0,.5);
  12.     -webkit-border-radius: 10px;
  13.     -moz-border-radius: 10px;
  14.     -o-border-radius: 10px;
  15.     -ms-border-radius: 10px;
  16. }

CSS3 浏览器私有前缀在前，标准前缀在后