资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/[译]谷歌 HTML/CSS 规范

[译]谷歌 HTML/CSS 规范

whinc / 3210人阅读

摘要：通用格式规范缩进一次缩进个空格，不要使用或者混合和空格的缩进。语义化根据使用场景选择正确的元素有时被错误的称为标签。格式规范引号属性值用双引号。风格规范和命名使用有含义的和名称。和单位值为时不用添加单位。

</>复制代码 
  1. 原文 Google HTML/CSS Style Guide
背景

这篇文章定义了 HTML 和 CSS 的格式和代码规范，旨在提高代码质量和协作效率。

通用样式规范 协议

图片，样式表，脚本及其他媒体文件尽量使用 HTTPS 协议，除非该文件不支持 HTTPS。

</>复制代码 
</>复制代码 
</>复制代码 
  1. /* Not recommended: omits the protocol */
  2. @import "//fonts.googleapis.com/css?family=Open+Sans";
  3. /* Not recommended: uses the HTTP protocol */
  4. @import "http://fonts.googleapis.com/css?family=Open+Sans";
</>复制代码 
  1. /* Recommended */
  2. @import "https://fonts.googleapis.com/css?family=Open+Sans";
通用格式规范 缩进

一次缩进2个空格，不要使用 tab 或者混合 tab 和空格的缩进。

</>复制代码 
    •   
    • Fantastic
    •   
    • Great
</>复制代码 
  1. .example {
  2.   color: blue;
  3. }
大小写

以下都应该用小写：
HTML 元素名称，属性，属性值（除非 text/CDATA），CSS 选择器，属性，属性值。

</>复制代码 
  2. Home
</>复制代码 
  2. 。
  3. HTML 正确性
  4. 尽可能使用正确的 HTML。
  5. </>复制代码 
    1. Test
    2. This is only a test.
  6. </>复制代码 
    3. Test
    4. This is only a test.
  7. 语义化
  8. 根据使用场景选择正确的 HTML 元素（有时被错误的称为“标签”）。例如，使用  h1 元素创建标题，p 元素创建段落，a 元素创建链接等等。正确的使用 HTML 元素对于可访问性、可重用性以及编码效率都很重要。
  9. </>复制代码 
    1. All recommendations
  10. </>复制代码 
    1. All recommendations
  11. 多媒体元素降级
  12. 对于像图片、视频、canvas 动画等多媒体元素，确保提供其他可访问的内容。图片可以使用替代文本（alt），视频和音频可以使用文字版本。
  13. </>复制代码 
  14. </>复制代码 
    1. Spreadsheet screenshot.
  15. 关注分离
  16. 标记、样式和脚本分离，确保相互耦合最小化。
  17. 实体引用
  18. 如果团队中文件和编辑器使用同样的编码方式，就没必要使用实体引用，如 —， ”，☺，除了一些在 HTML 中有特殊含义的字符（如 < 和 &）以及不可见的字符（如空格）。
  19. </>复制代码 
    1. The currency symbol for the Euro is “&eur;”.
  20. </>复制代码 
    1. The currency symbol for the Euro is “€”.
  21. type 属性
  22. 在引用样式表和脚本时，不要指定 type 属性，除非不是 CSS 或 JavaScript。
    因为 HTML5 中已经默认指定样式变的 type 是 text/css，脚本的type 是 text/javascript。
  23. </>复制代码 
  24. </>复制代码 
  25. </>复制代码 
  26. </>复制代码 
  27. HTML 格式规范
  28. HTML 引号
  29. 属性值用双引号。
  30. </>复制代码 
    1. Sign in
  31. </>复制代码 
    1. Sign in
  32. CSS 风格规范
  33. ID 和 Class 命名
  34. 使用有含义的 id 和 class 名称。
  35. </>复制代码 
    1. /* Not recommended: meaningless */
    2. #yee-1901 {}
    3. /* Not recommended: presentational */
    4. .button-green {}
    5. .clear {}
  36. </>复制代码 
    1. /* Recommended: specific */
    2. #gallery {}
    3. #login {}
    4. .video {}
    5. /* Recommended: generic */
    6. .aux {}
    7. .alt {}
  37. ID 和 Class 命名风格
  38. id 和 class 应该尽量简短，同时要容易理解。
  39. </>复制代码 
    1. /* Not recommended */
    2. #navigation {}
    3. .atr {}
  40. </>复制代码 
    1. /* Recommended */
    2. #nav {}
    3. .author {}
  41. 选择器
  42. 除非需要，否则不要在 id 或 class 前加元素名。
  43. </>复制代码 
    1. /* Not recommended */
    2. ul#example {}
    3. div.error {}
  44. </>复制代码 
    1. /* Recommended */
    2. #example {}
    3. .error {}
  45. 属性简写
  46. 尽量使用 CSS 中可以简写的属性 (如 font)，可以提高编码效率以及代码可读性。
  47. </>复制代码 
    1. /* Not recommended */
    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;
  48. </>复制代码 
    1. /* Recommended */
    2. border-top: 0;
    3. font: 100%/1.6 palatino, georgia, serif;
    4. padding: 0 1em 2em;
  49. 0 和单位
  50. 值为 0 时不用添加单位。
  51. </>复制代码 
    1. margin: 0;
    2. padding: 0;
  52. 开头的 0
  53. 值在 -1 和 1 之间时，不需要加 0。
  54. </>复制代码 
    1. font-size: .8em;
  55. 16进制表示法
  56. </>复制代码 
    1. /* Not recommended */
    2. color: #eebbcc;
  57. </>复制代码 
    1. /* Recommended */
    2. color: #ebc;
  58. 前缀
  59. 使用带前缀的命名空间可以防止命名冲突，同时提高代码可维护性。
  60. </>复制代码 
    1. .adw-help {} /* AdWords */
    2. #maia-note {} /* Maia */
  61. ID 和 Class 命名分隔符
  62. 选择器中使用连字符可以提高可读性。
  63. </>复制代码 
    1. /* Not recommended: does not separate the words “demo” and “image” */
    2. .demoimage {}
    3. /* Not recommended: uses underscore instead of hyphen */
    4. .error_status {}
  64. </>复制代码 
    1. /* Recommended */
    2. #video-id {}
    3. .ads-sample {}
  65. CSS 格式规范
  66. 书写顺序
  67. 按照属性首字母顺序书写 CSS 易于阅读和维护，排序时忽略带有浏览器前缀的属性。
  68. </>复制代码 
    1. background: fuchsia;
    2. border: 1px solid;
    3. -moz-border-radius: 4px;
    4. -webkit-border-radius: 4px;
    5. border-radius: 4px;
    6. color: black;
    7. text-align: center;
    8. text-indent: 2em;
  69. 块级内容缩进
  70. 为了反映层级关系和提高可读性，块级内容都应缩进。
  71. </>复制代码 
    1. @media screen, projection {
    2.   html {
    3.     background: #fff;
    4.     color: #444;
    5.   }
    6. }
  72. 声明结束
  73. 每行 CSS 都应以分号结尾。
  74. </>复制代码 
    1. /* Not recommended */
    2. .test {
    3.   display: block;
    4.   height: 100px
    5. }
  75. </>复制代码 
    1. /* Recommended */
    2. .test {
    3.   display: block;
    4.   height: 100px;
    5. }
  76. 属性名结尾
  77. 属性名和值之间都应有一个空格。
  78. </>复制代码 
    1. /* Not recommended */
    2. h3 {
    3.   font-weight:bold;
    4. }
  79. </>复制代码 
    1. /* Recommended */
    2. h3 {
    3.   font-weight: bold;
    4. }
  80. 声明样式块的分隔
  81. 在选择器和 {} 之间用空格隔开。
  82. </>复制代码 
    1. /* Not recommended: missing space */
    2. #video{
    3.   margin-top: 1em;
    4. }
    5. /* Not recommended: unnecessary line break */
    6. #video
    7. {
    8.   margin-top: 1em;
    9. }
  83. </>复制代码 
    1. /* Recommended */
    2. #video {
    3.   margin-top: 1em;
    4. }
  84. 选择器分隔
  85. 每个选择器都另起一行。
  86. </>复制代码 
    1. /* Not recommended */
    2. a:focus, a:active {
    3.   position: relative; top: 1px;
    4. }
  87. </>复制代码 
    1. /* Recommended */
    2. h1,
    3. h2,
    4. h3 {
    5.   font-weight: normal;
    6.   line-height: 1.2;
    7. }
  88. 规则分隔
  89. 规则之间都用空行隔开。
  90. </>复制代码 
    1. html {
    2.   background: #fff;
    3. }
    4. body {
    5.   margin: auto;
    6.   width: 50%;
    7. }
  91. CSS 引号
  92. 属性选择器和属性值用单引号，URI 的值不需要引号。
  93. </>复制代码 
    1. /* Not recommended */
    2. @import url("//www.google.com/css/maia.css");
    3. html {
    4.   font-family: "open sans", arial, sans-serif;
    5. }
  94. </>复制代码 
    1. /* Recommended */
    2. @import url(//www.google.com/css/maia.css);
    3. html {
    4.   font-family: "open sans", arial, sans-serif;
    5. }
  95. CSS 元规则
  96. 分段注释
  97. 用注释把 CSS 分成各个部分。
  98. </>复制代码 
    1. /* Header */
    2. #adw-header {}
    3. /* Footer */
    4. #adw-footer {}
    5. /* Gallery */
    6. .adw-gallery {}
  99. 结语
  100. 坚持遵循代码规范。
    写代码前先看看周围同事的代码，然后决定代码风格。
    代码规范的意义在于提供一个参照物。这里提供了一份全局的规范，但是你也得参照公司内部的规范，否则阅读你代码的人会很痛苦。
               
  101.                
  102.                                            
  103.                        
  104.
云服务器 GPU云服务器 html css HTML+CSS html+css: 学完html css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50112.html

相关文章

  • [译]谷歌 HTML/CSS 规范

    摘要：通用格式规范缩进一次缩进个空格，不要使用或者混合和空格的缩进。语义化根据使用场景选择正确的元素有时被错误的称为标签。格式规范引号属性值用双引号。风格规范和命名使用有含义的和名称。和单位值为时不用添加单位。 原文 Google HTML/CSS Style Guide 背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范，旨在提高代码质量和协作效率。 通用样式规范 协议 图片，样...

    seasonley 评论0 收藏0

  • 即将立秋的《课多周刊》(第2期)

    摘要：即将立秋的课多周刊第期我们的微信公众号，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大的动力。课多周刊机器人运营中心是如何玩转起来的分享课多周刊是如何运营并坚持下来的。 即将立秋的《课多周刊》(第2期) 我们的微信公众号：fed-talk，更多精彩内容皆在微信公众号，欢迎关注。 若有帮助，请把 课多周刊 推荐给你的朋友，你的支持是我们最大...

    ruicbAndroid 评论0 收藏0

  • 即将立秋的《课多周刊》(第2期)

    摘要：即将立秋的课多周刊第期我们的微信公众号，更多精彩内容皆在微信公众号，欢迎关注。若有帮助，请把课多周刊推荐给你的朋友，你的支持是我们最大的动力。课多周刊机器人运营中心是如何玩转起来的分享课多周刊是如何运营并坚持下来的。 即将立秋的《课多周刊》(第2期) 我们的微信公众号：fed-talk，更多精彩内容皆在微信公众号，欢迎关注。 若有帮助，请把 课多周刊 推荐给你的朋友，你的支持是我们最大...

    MRZYD 评论0 收藏0

  • 【译】前端练级攻略

    摘要：由于系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章，，也涵盖了预处理器相关的知识。 译者：前端小智 原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

    wuyumin 评论0 收藏0

发表评论

登陆后可评论

0条评论

whinc

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<