Skip to content

Latest commit

 

History

History
271 lines (198 loc) · 5.42 KB

css.md

File metadata and controls

271 lines (198 loc) · 5.42 KB

CSS 编码规范

此为前端开发团队遵循和约定的 CSS 编码规范，意在提高代码的规范性和可维护性。

说明

文档中使用的关键字「MUST」,「MUST NOT」,「REQUIRED」,「SHALL」,「SHALL NOT」,「SHOULD」,「SHOULD NOT」,「RECOMMENDED」,「MAY」和「OPTIONAL」在RFC2119中被说明。

  • 所有带「MUST」说明的规则将提供检测工具检测。
  • 所有带「SHOULD」说明的规则将提供格式化工具自动排班。

还未定稿，对规范中提及的点有不赞同的欢迎提出 issues(请添加 CSS 标签)讨论。

目录

代码风格

  • 代码应该「SHOULD」符合 CSS 语法有效性，可以使用 W3C CSS validator 工具来验证。

  • ID 和 Class 应该「SHOULD」按照元素功能命名，不应该「SHOULD NOT」按照元素表现命名，命名应该「SHOULD」含义清晰。

    /* bad: 含义不清 */
#yee-1901 {}

/* bad: 表现化 */
.button-green {}
.clear {}

/* good: 功能化 */
#gallery {}
#login {}
.video {}

  • ID 和 Class 命名应该「SHOULD」在保持含义清晰的前提下尽可能简短。

    /* bad */
#navigation {}
.atr {}

/* good */
#nav {}
.author {}

  • ID 和 Class 命名中单词应该「SHOULD」全部小写，单词之间使用 - 作为分隔符。

    /* bad */
#videoId {}
.demoimage {}
.error_status {}

/* good */
#video-id {}
.ads-sample {}

  • 不能「MUST NOT」把 ID 和 Class 选择符作为类型选择符的限定符，这样做没必要，反而还影响性能。

    /* bad */
ul#example {}
div.error {}

/* good */
#example {}
.error {}

  • CSS 属性应该「SHOULD」尽可能使用简化方式书写，需注意简写时默认值的副作用，详细参考 Shorthand properties。

    /* bad */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* good */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

  • CSS 属性中的 0 值不应该「SHOULD NOT」带单位。

    /* bad */
margin: 0px;
padding: 0px;

/* good */
margin: 0;
padding: 0;

  • CSS 属性中数值介于-1到1之间的小数应该「SHOULD」忽略开头的 0。

    /* bad */
font-size: 0.8em;

/* good */
font-size: .8em;

  • CSS 的色值应该「SHOULD」尽可能使用简化写法。

    /* bad */
color: #eebbcc;

/* good */
color: #ebc;

⬆ Top

组织格式

  • 必须「MUST」采用 4 个空格为一次缩进。

  • CSS 属性声明应该「SHOULD」按字母升序排列。

    /* good */
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

  • CSS 每个代码块相对于父代码库必须「MUST」有缩进。

    /*good*/
@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

  • CSS 属性声明必须「MUST」以分号结尾。

  • CSS 属性名冒号后必须「MUST」有一个空格。

    /* bad */
color:#eebbcc;

/* good */
color: #ebc;

  • CSS 中的属性名建议「RECOMMENDED」按照字母顺序排列，可以使用 Sublime Text 的 F5 命令来自动格式化。

  • 最后的选择符与 { 之间必须「MUST」有一个空格。

    /* bad */
#video{
  margin-top: 1em;
}
.author
{
  margin-top: 1em;
}

/* good */
#video {
  margin-top: 1em;
}

  • 多个并列的选择符必须「MUST」换行。

    /* bad */
a:focus, a:active {
  position: relative; top: 1px;
}

/* good */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

  • CSS 规则之间必须「MUST」以空白行分隔。

    /* good */
html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

  • CSS 属性值中所有使用到引号的位置必须「MUST」使用单引号。

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

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

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

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

⬆ Top

代码注释

  • CSS规则段落之前应该「SHOULD」添加注释说明。

    /* good */
/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

⬆ Top

样式重置

  • 应该「SHOULD」使用推荐的 normalize.css 进行样式重置。

⬆ Top