我来打你脸啦,你别拿着 XHTML 团队规范写 HTML 5 代码还以为自己是对的

2017-02-26 13:32:45 +08:00
 FrankFang128

刚才我发了一篇 《那些前端程序员深信不疑的谣言( HTML 篇)》科普文,有人说我不懂团队规范,这些符号怎么能省呢?

那我来跟你扯一扯团队规范。

Google Style Guide 关于 HTML/CSS 的 Style Guide :

可忽略标签

For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.

(This approach may require a grace period to be established as a wider guideline as it ’ s significantly different from what web developers are typically taught. For consistency and simplicity reasons it ’ s best served omitting all optional tags, not just a selection.)

<!-- 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.
  1. html/head/body 标签写了么?
  2. p 标签闭合了吗?

注意这个团队规范有点激进,目前是 optional ,还在兼容 IE 的团队测试后再采用。

关于 <br />Style Guide

Although fine with HTML, do not close void elements, i.e. write <br>, not <br />.

以上。

6351 次点击
所在节点    HTML
52 条回复
shijingshijing
2017-02-26 14:07:42 +08:00
Google 自己的东西都喜欢变来变去,而且 Google 的就一定是最好的么,参考可以,迷信就算了吧。 Google 的访问量在那里,他 HTML 里面少一两个字符,这么大的访问量,能省不少流量,这个 argument 确实 make sense ,你自己做个站,有百万的访问量么? Google 是大户,可以不 care 小众客户,可以强迫用户升级,你自己做产品了怕是丢一个客户都伤心的要死吧。角色不同,地位不同,做事的方法当然不同,就跟 facebook 用 PHP 一样,自己有技术有人力有财力能够 overhaul 整个 PHP ,你能做么?
holyghost
2017-02-26 14:08:59 +08:00
扎心了老铁
FrankFang128
2017-02-26 14:11:06 +08:00
还真有人回复: Google Style Guide 算个屁
shijingshijing
2017-02-26 14:21:53 +08:00
@FrankFang128 世界上又不是只有 Google 一家公司,互联网又不等于 Google ,做 IT 的最重要是自己独立思考,开放包容精神,你说的有道理,那我起码还要看看是不是适合我,然后再决定采不采用。

我要是告诉你,在我接手的很多项目里, C 和 C++最重要的 new , recursion , polymorphism 都被禁止使用,连 Inheritance 都被严格限制层级。按照你的意思, C99 和 C++11 的规范可没这些个规定啊。这些项目名头说出来你也会大吃一惊的,最这些东西的都是跟 google 一个等级,能改变世界的公司,难道按你说的就是被打脸了么?

不懂的看时间场合对象,一味的膜,最终吃亏的还是你自己。
shijingshijing
2017-02-26 14:23:42 +08:00
r #24 [最] 这些东西 -> [做] 这些东西-
FrankFang128
2017-02-26 14:25:14 +08:00
@shijingshijing 你应该不知道最初是一帮键盘侠不包容我,我也没认为 Google Style Guide 最好。

我认同你的观点。
otakustay
2017-02-26 14:26:44 +08:00
> For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.

一个团队居然需要人肉写代码的时候做 file size optimization 而不是工具来解决,管他是 google 还是哪家我都给 2 个字:垃圾
vCleaner
2017-02-26 14:32:55 +08:00
FrankFang128
2017-02-26 14:37:39 +08:00
@vCleaner 这个 tag 重命名为 撕逼 我就理解了
FrankFang128
2017-02-26 14:39:12 +08:00
@otakustay 那你知不知道很多前端团队「为了压缩代码时不出错」,强制写 JS 时每行加引号。
真的是很垃圾。
FrankFang128
2017-02-26 14:39:53 +08:00
@otakustay *每行加分号*
otakustay
2017-02-26 14:44:09 +08:00
@FrankFang128 你真的理解么?在 JS 中每行加分号是为了人在读代码的时候保持一致性,不会因为某一行突然以分号开始而使流畅阅读产生停顿,不是为了压缩时不出错
正确的为了压缩时不出错的规范是:在行首字符为[、{、(时,在行首插入分号
这个规范是有很多团队采用的
imn1
2017-02-26 14:46:03 +08:00
其实我不明白这帖子(及前一个相关帖子)争论点在哪?

LZ 说的几点“谣言”修正都正确, w3c 上面都是这样写的,并非完全是 google 标准,为何要扯到 google 上面
至于 google 建议,那是个 guide ,不是 standard ,在 google 相关产品上使用没问题,各个团队根据自己需求取舍呗

https://www.w3.org/TR/html5/
https://www.w3.org/TR/html5/text-level-semantics.html#the-br-element
这里有写<br>写法

https://www.w3.org/TR/html5/document-metadata.html#the-head-element
Tag omission in text/html:
A head element's start tag may be omitted if the element is empty, or if the first thing inside the head element is an element.
A head element's end tag may be omitted if the head element is not immediately followed by a space character or a comment.
这里有写<head>可省略

https://www.w3.org/TR/html5/sections.html#the-body-element
Tag omission in text/html:
A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element.
A body element's end tag may be omitted if the body element is not immediately followed by a comment.
这里也有写<body>可省略

LZ 建议 更新 规范没问题啊,他是说更新,又不是说不要规范
只是语气激了点~
sodatea
2017-02-26 14:48:01 +08:00
哈哈,因为屏蔽了太多人,看你这两个帖子时经常没看懂你在和谁怼。看来我的屏蔽名单还是有用的
otakustay
2017-02-26 14:48:40 +08:00
编码规范只应该针对 2 个方面优化:

1. 人阅读时的体感感受
2. 基于子串和正则的简单分析脚本的实现便捷性

其它方面的,包括文件体积、程序可分析、搜索引擎等等,都应该是工具来解决的领域,为什么要让人来做这个事情?

我不反对如本题主贴中所述的这类编码规范,但我坚决反对主贴中所述的得出这一编码规范的理由,人机不分离绝对是不可取的事情
FrankFang128
2017-02-26 14:51:10 +08:00
@sodatea 我有一天不小心把屏蔽清空了,就悲剧了……看来又要重新 block
chimingphang
2017-02-26 14:51:37 +08:00
呖咯,巴闭咯
FrankFang128
2017-02-26 14:52:36 +08:00
@imn1 嗯 ,我也不知道那些人为什么要反驳我那些从规范里抄来的东西,可能是习惯性怼我吧
sodatea
2017-02-26 14:56:58 +08:00
其实在浏览器的世界里, HTML 是一等公民,很多情况下 XHTML 只是被当成错误的 HTML 然后被浏览器容错纠正了而已。

https://webkit.org/blog/68/understanding-html-xml-and-xhtml/

说实话在写 JSX 之前我已经很多年没写过闭合 img 标签了……
breeswish
2017-02-26 15:46:49 +08:00
写 js 加分号原因是防止压缩时出错的团队真的有那么多?难道不是大多数是基于统一风格 / 避免 return 等情况缺失分号的坑等原因吗……

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/343251

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX