当前位置: 首页 > 科技观察

[翻译]GoogleHTML-CSSSpecification

时间:2023-03-13 23:57:03 科技观察

背景本文定义了HTML和CSS的格式和代码规范,旨在提高代码质量和协作效率。通用样式规范协议省略了图像、样式表、脚本和其他媒体文件URL的协议部分(http:、https:),除非文件在任一协议下都不可用。这种方案称为协议相对URL。好处是无论使用HTTPS还是HTTP访问页面,浏览器都会以相同的协议请求页面中的资源,同时可以节省一些字节。/*Notrecommended*/.example{background:url(https://www.google.com/images/example);}/*推荐*/.example{background:url(//www.google.com/images/example);}一般格式规范缩进一次2个空格,不要使用制表符或混用制表符和空格进行缩进。

  • Fantastic
  • Great
.example{color:blue;}以下大小写应为小写:HTML元素名称、属性、属性值(除非是text/CDATA)、CSS选择器、属性、属性值。Home/*Notrecommended*/color:#E5E5E5;/*推荐*/color:#e5e5e5;尾随空格尾随空格不仅多余,而且比较代码时更麻烦。

什么?_

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

  • Apples
  • Oranges
HTML样式规范DocTypeHTML文档应使用HTML5文档类型:.孤立的标签不需要自己关闭,
不应该写成
。HTML正确性尽可能使用正确的HTML。测试
Thisisonly测试。测试
Thisisonlytest.
语义根据使用场景选择正确的HTML元素(有时被错误地称为“标签”)。例如,使用h1元素创建标题,使用p元素创建段落,使用a元素创建链接,等等。正确使用HTML元素对于可访问性、可重用性和编码效率很重要。Allrecommendations
Allrecommendations多媒体元素为事物降级像图像、视频、画布动画和其他多媒体元素,以确保额外的可访问内容。替代文本(alt)可用于图像,文本版本可用于视频和音频。重点是标记分离,样式和脚本分离以确保相互耦合最小化。实体引用如果团队中的文件和编辑器使用相同的编码方式,则不需要使用实体引用,如—、"、?,除了一些在HTML中有特殊含义的字符(如<和&)和不可见字符(如空格)。ThecurrencysymbolfortheEurois“&eur;”.ThecurrencysymbolfortheEurois“”.typeattribute在引用样式表和脚本时,不要指定type属性,除非它不是CSS或JavaScript。因为在HTML5中,默认指定样式变化的类型为text/css,脚本的类型为text/javascript。HTML用双引号标准化HTML引用属性值。登录登录CSS样式规范ID和Class命名使用有意义的id和类名。/*不推荐:无意义*/#yee-1901{}/*不推荐:演示*/.button-green{}.clear{}/*推荐:具体*/#gallery{}#login{}.video{}/*Recommended:generic*/.aux{}.alt{}ID和Class的命名风格id和class在容易理解的前提下尽量简短。/*Notrecommended*/#navigation{}.atr{}/*Recommended*/#nav{}.author{}选择器除非需要,否则不要在id或class前加上元素名称。/*Notrecommended*/ul#example{}div.error{}/*Recommended*/#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;/*推荐*/border-top:0;font:100%/1.6palatino,georgia,serif;padding:01em2em;0和unit值为0不需要加单位.保证金:0;填充:0;font-size:.8em;当开头的0的值在-1到1之间时,不需要加0。十六进制表示法/*Notrecommended*/color:#eebbcc;/*Recommended*/color:#ebc;Prefix使用带前缀的命名空间可以防止命名冲突并提高代码的可维护性。.adw-help{}/*AdWords*/#maia-note{}/*Maia*/在ID和类名称分隔符选择器中使用连字符以提高可读性。/*不推荐:不分开单词“demo”和“image”*/.demoimage{}/*不推荐:使用下划线代替连字符*/.error_status{}/*推荐*/#video-id{}.ads-sample{}CSS格式规范书写SequenceCSS按照属性的字母顺序编写,便于阅读和维护,排序时忽略带有浏览器前缀的属性。背景:紫红色;边框:1pxsolid;-moz-边框半径:4px;-webkit-边框半径:4px;边框半径:4px;颜色:黑色;文本对齐:居中;文本缩进:2em;块级内容缩进为了反映层次关系和提高可读性,块级内容应该缩进。@mediascreen,projection{html{background:#fff;color:#444;}}声明结束CSS的每一行都应以分号结尾。/*Notrecommended*/.test{display:block;height:100px}/*Recommended*/.test{display:block;height:100px;}属性名和末尾的值之间要有一个空格属性名称。/*Notrecommended*/h3{font-weight:bold;}/*Recommended*/h3{font-weight:bold;}声明式样式块由选择器和{}之间的空格分隔。/*不推荐:missingspace*/#video{margin-top:1em;}/*不推荐:unnecessarylinebreak*/#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;}规则分隔规则为由空行分隔。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;}CSSmeta-rulesSegmentedcomments使用注释将CSS分成几个部分。/*Header*/#adw-header{}/*Footer*/#adw-footer{}/*Gallery*/.adw-gallery{}结论坚持遵循代码规范。写代码之前先看看身边同事的代码,再决定代码风格。代码规范的意思是提供一个参考。这里提供了一个全局的规范,但是你也必须参考公司内部的规范,否则看你代码的人会很痛苦。