广州web培训
达内广州五羊中心

18087159764

热门课程

谷歌CSS 风格规范和格式规范

  • 时间:2016-09-30
  • 发布:广州前端开发培训
  • 来源:phpxs.com

这篇文章请大家跟着达内广州web培训来学习谷歌公司CSS的风格规范和格式规范。

ID 和 Class 命名

使用有含义的 id 和 class 名称。

/* Not recommended: meaningless */ #yee-1901 {} /* Not recommended: presentational */ .button-green {} .clear {}

/* Recommended: specific */ #gallery {} #login {} .video {} /* Recommended: generic */ .aux {} .alt {}

ID 和 Class 命名风格

id 和 class 应该尽量简短,同时要容易理解。

/* Not recommended */ #navigation {} .atr {}

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

选择器

达内广州web培训要提醒大家的是,除非需要,否则不要在 id 或 class 前加元素名。

/* Not recommended */ ul#example {} div.error {}

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

属性简写

尽量使用 CSS 中可以简写的属性 (如 font),可以提高编码效率以及代码可读性。

/* Not recommended */ 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;

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

0 和单位

值为 0 时不用添加单位。

margin: 0; padding: 0;

开头的 0

值在 -1 和 1 之间时,不需要加 0。

font-size: .8em;

16进制表示法

/* Not recommended */ color: #eebbcc;

/* Recommended */ color: #ebc;

前缀

达内广州web培训提示,使用带前缀的命名空间可以防止命名冲突,同时提高代码可维护性。

.adw-help {} /* AdWords */ #maia-note {} /* Maia */

ID 和 Class 命名分隔符

选择器中使用连字符可以提高可读性。

/* Not recommended: does not separate the words “demo” and “image” */ .demoimage {} /* Not recommended: uses underscore instead of hyphen */ .error_status {}

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

CSS 格式规范

书写顺序

按照属性首字母顺序书写 CSS 易于阅读和维护,排序时忽略带有浏览器前缀的属性。

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

块级内容缩进

为了反映层级关系和提高可读性,块级内容都应缩进。

@media screen, projection { html { background: #fff; color: #444;

}

}

声明结束

每行 CSS 都应以分号结尾。

/* Not recommended */ .test { display: block; height: 100px }

/* Recommended */ .test { display: block; height: 100px;

}

属性名结尾

属性名和值之间都应有一个空格。

/* Not recommended */ h3 { font-weight:bold;

}

/* Recommended */ h3 { font-weight: bold;

}

声明样式块的分隔

在选择器和 {} 之间用空格隔开。

/* Not recommended: missing space */ #video{ margin-top: 1em;

} /* Not recommended: unnecessary line break */ #video { margin-top: 1em;

}

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

}

选择器分隔

每个选择器都另起一行。

/* Not recommended */ a:focus, a:active { position: relative; top: 1px;

}

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

}

规则分隔

规则之间都用空行隔开。

html { background: #fff;

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

}

CSS 引号

属性选择器和属性值用单引号,URI 的值不需要引号。

/* 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;

}

CSS 元规则

分段注释

用注释把 CSS 分成各个部分。

/* Header */ #adw-header {} /* Footer */ #adw-footer {} /* Gallery */ .adw-gallery {}

上一篇:Web前端难点讲解之全局变量的累加
下一篇:谷歌HTML风格规范和格式规范

达内广州web培训详解ES6循环:for-of

达内广州web培训详解ES5循环:forEach

达内广州web培训详解ES5简单for循环

达内广州web培训分享:CSS预处理器的缺点

选择城市和中心
贵州省

广西省

海南省