参考

Google：https://google.github.io/styleguide/htmlcssguide.html
airbnb：https://github.com/airbnb/css

airbnb

建议使用行注释 (//) 代替块注释。

建议注释独占一行。避免行末注释。

在定义无边框样式时，使用 0 代替 none。

Google

尽可能使用简写的属性书写方式。

  1. /* 不推荐 */
  2. border-top-style: none;
  3. font-family: palatino, georgia, serif;
  4. font-size: 100%;
  5. line-height: 1.6;
  6. padding-bottom: 2em;
  7. padding-left: 1em;
  8. padding-right: 1em;
  9. padding-top: 0
  11. /* 推荐 */
  12. border-top: 0;
  13. font: 100%/1.6 palatino, georgia, serif;
  14. padding: 0 1em 2em;

省略 “0” 后的单位。

  1. flex: 0px; /* This flex-basis component requires a unit. */
  2. flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */
  3. margin: 0;
  4. padding: 0;

省略前导 “0” 值。

  1. font-size: .8em;

在可能的情况下使用3个字符的十六进制表示法。

  1. /* 不推荐 */
  2. color: #eebbcc;
  4. /* 推荐 */
  5. color: #ebc;

用连字符分隔 id 和 class 名中的单词。

  1. /* 不推荐: 单词未分开 */
  2.   .demoimage {}
  4. /* 不推荐：使用下划线而不是连字符 */
  5. .error_status {}
  7. /* 推荐 */
  8. #video-id {}
  9. .ads-sample {}

缩进块内容。

  1. @media screen, projection {
  3.   html {
  4.     background: #fff;
  5.     color: #444;
  6.   }
  8. }

每个属性后使用分号结束。

  1. /* 推荐 */
  2. .test {
  3.   display: block;
  4.   height: 100px;
  5. }

属性名称的冒号后有一个空格。

  1. /* 推荐 */
  2. h3 {
  3.   font-weight: bold;
  4. }

在选择器和后面的声明块之间使用一个空格。

  1. /* 推荐 */
  2. #video {
  3.   margin-top: 1em;
  4. }

每个选择器和声明独立成行。

  1. /* 推荐 */
  2. h1,
  3. h2,
  4. h3 {
  5.   font-weight: normal;
  6.   line-height: 1.2;
  7. }

使用新空行分离规则。

  1. html {
  2.   background: #fff;
  3. }
  5. body {
  6.   margin: auto;
  7.   width: 50%;
  8. }

补充

使用变量命名常用的数字和颜色

  1. color: var(--primary-color）

css calc 尽可能不使用 flex 在大部分下可以满足需求

  1. //bad
  2. width: calc(100% - 200px);
  4. //good
  5. flex: 1;

兼容性的-webkit 不需要手写..有 postcss 的插件帮你处理:如: -webkit-transition

z-index 无必要不要超过 100, 最好不要超时 10, 一般 1, 9 都够用

避免使用!important

  1. //bad
  2. color: red!important;

避免给 width, height, top, left等添加animate，使用transform（https://github.com/amfe/article/issues/47）

除非使用rgba()，否则使用十六进制颜色代码#000

避免使用内联样式

  1. //bad
  2. <div style={{
  3.   color: ...
  4.   fontSize: ...
  5. }}> ...</div>