代码规范

代码风格

代码格式化

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

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

一种是展开格式（Expanded）

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

团队约定

统一使用展开格式书写样式

代码大小写

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

  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. *{}
  8. #jdc {}
  9. .jdc div{}

代码缩进

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

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

分号

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

  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. .jdc,jdc_logo,.jdc_hd {
  2.     color: #ff0;
  3. }.nav{
  4.     color: #fff;
  5. }

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0

推荐：

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

不推荐：

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

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

推荐：

  1. .jdc {
  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.     border-radius: 10px;
  17. }

mozilla官方属性顺序推荐

CSS3浏览器私有前缀写法

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

  1. .jdc {
  2.     -webkit-border-radius: 10px;
  3.     -moz-border-radius: 10px;
  4.     -o-border-radius: 10px;
  5.     -ms-border-radius: 10px;
  6.     border-radius: 10px;
  7. }

更多关于浏览器私有前辍写法：#Vendor-specific extensions