[翻译]GoogleHTML-CSSSpecification

时间：2023-04-02 13:00:08 HTML

原创GoogleHTML/CSSStyleGuide背景本文定义了HTML和CSS的格式和代码规范，旨在提高代码质量和协作效率。一般样式规范协议图片、样式表、脚本等媒体文件尽量使用HTTPS协议，除非文件不支持HTTPS。/*不推荐：省略协议*/@import'//fonts.googleapis.com/css?family=Open+Sans';/*不推荐：使用HTTP协议*/@import'http://fonts.googleapis.com/css?family=Open+Sans';/*推荐*/@import'https://fonts.googleapis.com/css?family=Open+Sans';一般格式规范一次缩进2个空格，不要使用制表符或混用制表符和空格缩进。

Fantastic
Great

.example{color:blue;}以下大小写应为小写：HTML元素名称、属性、属性值（除非text/CDATA）、CSS选择器、属性、属性值。主页/*不推荐*/颜色：#E5E5E5；/*推荐*/颜色：#e5e5e5；尾随空格尾随空格不仅多余，而且比较代码时更麻烦。

什么？_

是的。通用元规范编码通过在HTML中指定，不需要在CSS中指定，因为默认为UTF-8。注释使用注释来解释代码：包括了哪些模块，它们做了什么，它们做了什么。任务项使用TODO来标记待办事项，而不是使用其他一些标签，如@@。

Apples
Oranges

HTML样式规范文档类型HTML文档应使用HTML5文档类型：。孤立的标签不需要自己关闭，
不应该写成
。HTML正确性尽可能使用正确的HTML。测试

这只是测试。

测试

这只是一个测试。

语义根据使用场景选择正确的HTML元素（有时被错误地称为“标签”）。例如，使用h1元素创建标题，使用p元素创建段落，使用a元素创建链接，等等。正确使用HTML元素对于可访问性、可重用性和编码效率非常重要。所有推荐

所有推荐多媒体元素降级对于图像、视频、画布动画等多媒体元素，请确保提供其他可访问的内容。替代文本(alt)可用于图像，文本版本可用于视频和音频。专注于分离标记、样式脚本分离确保相互耦合最小化。实体引用如果团队中的文件和编辑器使用相同的编码，则不需要使用实体引用，例如—、"、?，除了一些在HTML中具有特殊含义的字符（例如<和&）和不可见字符，例如空格。欧元的货币符号是“&eur;”。欧元的货币符号是“”。样式表和脚本中引用了type属性，除非不是CSS或JavaScript，否则不要指定type属性。因为在HTML5中，默认指定样式变化的类型为text/css，脚本的类型为text/javascript。linkrel="stylesheet"href="//www.google.com/css/maia.css">HTML格式规范HTML用双引号引用属性值。

SigninCSS样式规范ID和类命名使用有意义的id和类名。/*不推荐：无意义*/#yee-1901{}/*不推荐：表现形式*/.button-green{}.clear{}/*推荐：具体*/#gallery{}#login{}.video{}/*推荐：generic*/.aux{}.alt{}ID和Class的命名风格id和class尽量简短易懂。/*不推荐*/#navigation{}.atr{}/*推荐*/#nav{}.author{}选择器除非需要，否则不要在id或class前加上元素名称。/*不推荐*/ul#example{}div.error{}/*推荐*/#example{}.error{}属性缩写尽量使用CSS中可以缩写的属性（比如font），可以提高编码效率和代码可读性。/*不推荐*/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.6palatino,georgia,serif;padding:01em2em;0andunitvalueis0withoutaddingunits.边距：0；填充：0；当初始0值在-1和1之间时，不需要加0。font-size:.8em;十六进制表示法/*不推荐*/color:#eebbcc;/*推荐*/color:#ebc;Prefix使用带前缀的命名空间可以防止命名冲突并提高代码的可维护性。.adw-help{}/*AdWords*/#maia-note{}/*Maia*/在ID和类名称分隔符选择器中使用连字符以提高可读性。/*不推荐：不分隔单词“demo”和“image”*/.demoimage{}/*不推荐：使用下划线代替连字符*/.error_status{}/*推荐*/#video-id{}.ads-sample{}CSS格式规范书写顺序按照属性首字母的顺序书写CSS，便于阅读和维护，排序时忽略带有浏览器前缀的属性。背景：紫红色；边框：1px实心；-moz-边框半径：4px；-webkit-边框半径：4px；边框半径：4px；颜色：黑色；文本对齐：居中；文本缩进：2em；块级别内容缩进为了反映层次关系和提高可读性，块级内容应该缩进。@mediascreen,projection{html{背景：#fff;颜色：#444；}}EndofstatementCSS的每一行都应该以分号结束。/*不推荐*/.test{display:block;height:100px}/*推荐*/.test{display:block;height:100px;}属性名和属性名末尾的值之间要有一个空格。/*不推荐*/h3{font-weight:bold;}/*推荐*/h3{font-weight:bold;}声明样式块的分隔符由选择器和{}之间的空格分隔。/*不推荐：缺少空格*/#video{margin-top:1em;}/*不推荐：不必要的换行符*/#video{margin-top:1em;}/*推荐*/#video{margin-top:1em;}选择器将每个选择器分隔在一个新行上。/*不推荐*/a:focus,a:active{position:relative;top:1px;}/*推荐*/h1,h2,h3{font-weight:normal;line-height:1.2;}Ruleseparation规则之间用空行分隔。html{background:#fff;}body{margin:auto;width:50%;}CSS引用属性选择器和属性值使用单引号，URI值不需要引号。/*不推荐*/@importurl("//www.google.com/css/maia.css");html{font-family:"opensans",arial,sans-serif;}/*推荐*/@importurl(//www.google.com/css/maia.css);html{font-family:'opensans',arial,sans-serif;}CSS元规则分段注释使用注释将CSS分隔成多个部分./*Header*/#adw-header{}/*Footer*/#adw-footer{}/*Gallery*/.adw-gallery{}Epilogue坚持遵循代码规范。写代码之前先看看身边同事的代码，再决定代码风格。代码规范的意思是提供一个参考。这里提供了一个全局的规范，但是你也必须参考公司内部的规范，否则看你代码的人会很痛苦。

上一篇：为什么有的系统的事务码BSP_WD_CMPWB看不见Enhance Component这个按钮

下一篇：建筑-房屋-编辑组件功能实现总结

[翻译]GoogleHTML-CSSSpecification相关文章