无双

博学善思，自强不息

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

google的html、css代码规范

看了一下google的html、css代码规范,简单的作下记录。

一、省略ur地址中的 http: 或 https: 的部分  , 在引用样式表文件、脚本文件、图片以及其它媒体文件时，都可以这样做，除非使用这两种协议都无法获取到资源，也就是说必须使用其它协议才能获取到资源的，就不能省略啦，只有http:和https:是可以省略的。这样做的好处是能减少文件的体积，而且还能避免一些相对url中混乱问题的产生。

?
1
2
3
4
5
6
7
8
9
10
11
<!-- 不推荐 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script><!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推荐 */
.example {
  background: url(http://www.google.com/images/example);
}
/* 推荐 */
.example {
  background: url(//www.google.com/images/example);
}

二、通用代码风格

  1、每次缩进两个空格，不要使用tab键进行缩进，也不要把tab键以及空格混合起来进行缩进。单纯的使用空格进行缩进就好了。

?
1
2
3
4
5
6
7
8
<ul>
  <li>Fantastic
  <li>Great
</ul>
 
.example {
  color: blue;
}

  2、只使用小写，包括标签名、属性名、属性值（一些可以自定义的字符串属性值除外）

?
1
2
3
4
5
<!-- 不推荐 -->
<A HREF="/">Home</A>
 
<!-- 推荐 -->
<img src="google.png" alt="Google">

三、通用Meta规则

  1、确保你的IDE使用的是UTF-8编码来保存文件的，且不要带上BOM。在定义页面的编码时使用<meta charset="utf-8"> 就好了。在样式表文件里不用去声明UTF-8编码什么的。

  2、在需要地地方进行注释。

  3、用 TODO 来标志代码中需要完善的地方

?
1
2
3
4
5
<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

四、HTML书写规则

   1、文档类型。HTML5的文档类型对所有的html文档都适用：<!doctype html>。另外，最好使用html,而不是xhtml.

   2、使用规范化的html，并使用W3C HTML validator之类的工具来进行检测。

?
1
2
3
4
5
6
7
8
9
<!-- 不规范 -->
<title>Test</title>
<article>This is only a test.
 
<!-- 规范 -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

3、使用语义化的html标签，根据用途来选择标签。

?
1
2
3
4
5
<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
 
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>

4、把多媒体元素可知化。像图片、视频、动画等多媒体元素，要有相关的文字来体现其内容，比如<img> 可以使用alt属性来说明图片内容。

?
1
2
3
4
5
<!-- 不推荐 -->
<img src="spreadsheet.png">
 
<!-- 推荐 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

5、确保页面的 结构、样式、行为三者相分离。确保文档或模板中只包含html，把用到的样式都写到样式表文件中，把脚本都写到js文件中。这在多人协作时非常重要。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- Not recommended -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
  <u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
  my website without doing everything all over again!</center>
 
<!-- Recommended -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>It’s awesome!

6、优化标签。有些标签是不需要用到的，能少就少。可以参考HTML5 specification来知道哪些标签是必须的，哪些又是多余的。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>
 
<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

7、省略<style>和<script>的type属性

 

五、HTML代码的格式化。

  1、为每个块级元素或表格元素标签新起一行，并且对每个子元素进行缩进

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
  <li>Moe
  <li>Larry
  <li>Curly
</ul>
<table>
  <thead>
    <tr>
      <th scope="col">Income
      <th scope="col">Taxes
  <tbody>
    <tr>
      <td>$ 5.00
      <td>$ 4.50
</table>

六、css书写规则

   1、使用合法、规范的css,可以通过W3C CSS validator来进行验证。

   2、ID和class的命名尽可能短，并符合语义。

?
1
2
3
4
5
6
/* Not recommended */
#navigation {}
.atr {}
/* Recommended */
#nav {}
.author {}

   3、尽量少用多重选择器或后代选择器，因为这会影响性能。

?
1
2
3
4
5
6
/* Not recommended */
ul#example {}
div.error {}
/* Recommended */
#example {}
.error {}

   4、使用组合属性。css中提供了不少的能进行组合属性连写的地方。比如font,margin,padding等。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 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;

5、如果css属性的值为0,则后面不要带上单位。除非真的是需要。

?
1
2
margin: 0;
padding: 0;

6、省略小数前面的0。比如 0.8 可以写成 .8

7、在URI类型的值里不要加上引号。比如 @import url(//www.google.com/css/go.css);

8、如果有可能，尽量使用3个字符的十六进制数。

?
1
2
3
4
/* Not recommended */
color: #eebbcc;
/* Recommended */
color: #ebc;

9、使用特定的前缀

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

10、在ID和class中使用 - 来作为连字符。

?
1
2
3
4
5
6
7
8
/* 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 {}

11、避免使用css hack，首先考虑使用另一种写法来解决。

 

七、css格式化规则

  1、按字母的先后顺序来进行css属性的声明，但某些浏览器的私有前缀可以不算进来。

?
1
2
3
4
5
6
7
8
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

2、对处在{}中的语句进行缩进。

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

3、每个css属性声明后都要使用一个分号，即使是最后的那个。

?
1
2
3
4
5
6
7
8
9
10
/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}

4、在紧跟属性名的冒号后使用一个空格

?
1
2
3
4
5
6
7
8
/* Not recommended */
h3 {
  font-weight:bold;
}
/* Recommended */
h3 {
  font-weight: bold;
}

5、每一个css选择器或是属性声明都要新起一行。

?
1
2
3
4
5
6
7
8
9
10
11
/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

6、在每一个css规则之间应该空一行

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

 

个人认为，代码规范这种东西是见仁见智的，目的就是为了更好的进行团队合作以及保证代码的质量，在实际运用途中还是要结合实际情况。

posted on   无双  阅读(8852)  评论(0)  编辑  收藏  举报

编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛