konvensyen am

Komen yang baik adalah sangat penting. Sila berikan masa untuk menerangkan cara komponen berfungsi, hadnya dan cara membinanya. Jangan serahkan kepada ahli pasukan anda yang lain untuk meneka tujuan sekeping kod yang tidak umum atau jelas.

Petua: Dengan mengkonfigurasi editor, kekunci pintasan boleh disediakan untuk mengeluarkan corak ulasan yang dipersetujui.

• /* ==========================================================================
     组件块
   ============================================================================ */
  
  /* 子组件块
   ============================================================================ */
  .selector {
    padding: 15px;
    margin-bottom: 15px;
  }
  
  /* 子组件块
   ============================================================================ */
  .selector-secondary {
    display: block; /* 注释*/
  }
  
  .selector-three {
    display: span;
  }

Kelas dan ID
• Gunakan penamaan semantik dan universal 组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
• 如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；

良好的注释是非常重要的。请留出时间来描述组件（component）的工作方式、局限性和构建它们的方法。不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的。

提示：通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

/* Not recommended */
.red {}
.box_green {}
.page .header .login #username input {}
ul#example {}

/* Recommended */
#nav {}
.box-video {}
#username input {}
#example {}

Class 和 ID

• 使用语义化、通用的命名方式；
• 使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；
• 避免选择器嵌套层级过多，尽量少于 3 级；
• 避免选择器和 Class、ID 叠加使用；

出于性能考量，在没有必要的情况下避免元素选择器叠加 Class、ID 使用。

元素选择器和 ID、Class 混合使用也违反关注分离原则。如果HTML标签修改了，就要再去修改 CSS 代码，不利于后期维护。

/*  Not recommended  */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Recommended */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

声明块格式

• 选择器分组时，保持独立的选择器占用一行；
• 声明块的左括号 { 前添加一个空格；
• 声明块的右括号 } 应单独成行；
• 声明语句中的 : 后应添加一个空格；
• 声明语句应以分号 ; 结尾；
• 一般以逗号分隔的属性值，每个逗号后应添加一个空格；
• rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格；
• 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替-0.5px）；
• 十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
• 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;
Gunakan tanda sempang - sebagai pembatas nama ID dan Kelas, jangan gunakan penamaan dan garis bawah

Elakkan terlalu banyak peringkat bersarang daripada 3 tahap;

Elakkan penggunaan pemilih bertindih dengan Kelas dan ID

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box model */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

  /* Typographic */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;

  /* Other */
  cursor: pointer;
}

/* Not recommended */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

/* Recommended */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}

.selector[type="text"] {

}

.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (max-width: 768px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}