HTML/CSS 开发人员编码规范

不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。这是个黄金定律,永远遵循同一套编码规范。

本文参考了不少文档,最后整理了这个规范,主要也是个人的学习总结。

需求

规范

  • HTML 编码声明 <meta charset="utf-8">
  • HTML 语言属性 <html lang="zh-CN">,这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等。(N年以后,应当使用<html lang="zh-cmn-Hans">http://www.zhihu.com/question/20797118)
  • 省略外链资源(图片及其它媒体资源)URL 中的 http / https 协议,使 URL 成为相对地址,避免 Mixed Content 问题,如:<script src="//www.google.com/code.js"></script>
  • HTML 标签、属姓、颜色使用小写字母,属性值用双引号包含
  • img标签尽量加上 width, height 属性,避免浏览器渲染时的较大抖动现象
  • 单选框、复选框包含附加文字的表单输入框都应该利用<label>标签
  • 语义化标签,根据 HTML 各元素设计的用途使用他们。这事关可访性、重用以及代码效率,例如h1-h6用于标题,<p> 用于段落,<a>用于链接
  • 使用 UTF-8 作为文件编码时,不需要使用 HTML 实体引用,如 &copyright;
  • 虽然HTML5 定义了一些标签可以省略闭合标签,但我们建议<br>, <hr>, <img>, <input> 等自闭合标签都应该在结尾添加 /,避免不同浏览器不可预知的问题

HTML 5 规范

  • 使用 rem 作为字号、长度单位,需要 1px 级别精准定位的,仍然使用 px

样式统一

在统一浏览器默认样式上,reset.css 一度非常流行,normalize.css 现在取而代之:

https://github.com/necolas/normalize.css

如果项目使用 bootstrap.css,它默认集成的是 normalize.css

字体与排版

中文排版是个很麻烦的问题,如何构建最适合中文阅读的网页排版,可以使用不同的系统参考这篇文章:

type.css: http://typo.sofi.sh/
网页字体排印指南:http://aaaaaashu.me/shu/

经过调研,以下字体设置和顺序能够良好的兼容Mac、Mac with Retina、Windows、Ubuntu。

font-family: -apple-system, "PingFang SC", "Lantinghei SC", "\5FAE\8F6F\96C5\9ED1", "Microsoft YaHei", FreeSans, "WenQuanYi Micro Hei", "Hiragino Sans GB", "Hiragino Sans GB W3", SimSun, sans-serif, tahoma, arial;
  • 微软雅黑为 Windows 用户默认的中文字体
  • Lantinghei SC 为 Mac 较好的中文阅读字体,该字体在渲染比较纤细(像开启防锯齿效果),适合阅读(参考36kr),未来可能会使用 PingFang SC,
  • Lucida Grande为 Mac 下西文字体。
  • Hiragino Sans GB 要在 Microsoft YaHei 的后面,因为Windows用户可能会安装丽黑,而丽黑在 Windows 上渲染很烂。虽然这样会让安装雅黑的Mac使用雅黑来渲染(只能牺牲这部分用户)
  • FreeSans 包括 Ubuntu 之类的 Linux 分发版包含的字体。(实测并没有卵用)
  • arial 等英文字体一般要在中文前面,但,IE8 下面某种情况会让雅黑失效,所以为兼容性考虑只能放后面。尚不知道有什么更好的解决办法?

smoothing 两个属性开启Chrome与Firefox的字体防锯齿功能,在Windows普通显示器上并没什么鸟用,如果使用 Lantinghei SC,也不用开启(因为它本来就纤细,开启后变得非常纤细):

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Tips : Mac Firefox 的 Lantinghei SC 渲染粗体的时候明显粗了一号,如果使用Lantinghei SC,为了较好的兼容效果在使用粗体时可以设置font-weight:600,600这个值在普通显示器上与bold效果一样。

兼容性

关于浏览器功能支持的更多细节请参考:http://caniuse.com/

其他兼容性问题:

  • IE 8/9 不支持 transition
  • IE 8 设置min/max-width/height 会忽略 box-sizing: border-box 属性

一些兼容性方法

  • Placeholders

兼容 IE9 以下浏览器不支持 placeholder 属性

https://github.com/jamesallardice/Placeholders.js

  • html5shiv

兼容 IE9 以下浏览器不支持 H5 标签如<header>

https://github.com/aFarkas/html5shiv

  • Respond

兼容 IE9 以下浏览器不支持 CSS3 媒体查询属性,如 @media

https://github.com/scottjehl/Respond

优化

工具

YSLOW,Yahoo发布的一款前端性能检测工具,提供各种浏览器插件:http://yslow.org/

浏览器渲染性能

关于浏览器渲染性能,可以参考这篇文章:
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=zh-cn

简单的理解(个人理解),就是浏览器需要加载完整个 DOM 树以及 CSSOM 树,最后才会渲染出来。所以在写 HTML/CSS 时应当避免一个大的布局 div 包含所有内容,在网速不理想的情况,页面会先是一片空白,然后突然全部展现。

尽可能的采用分级布局。

推荐:
<div class="header"></div>
<div class="main1"></div>
<div class="main2"></div>
<div class="main3"></div>
<div class="footer"></div>

避免:
<div class="main">
    <div class="header"></div>
    <div class="main1"></div>
    <div class="main2"></div>
    <div class="main3"></div>
    <div class="footer"></div>
</div>

同理,如果左右浮动布局,左边较大,右边较小,可以考虑小的布局写在 HTML 树的上方。让浏览器尽快渲染出内容。

<div class="main">
<div class="right"></div>
<div class="left"></div>
</div>

SEO优化

  • meta 标签中的 title, keywords, description,这个不用多说

  • 重视 h1-h3 标签,不滥用

网站首页,h1标签可能会应用在logo上,通过text-indent隐藏h1标签文字

网站列表页,h1标签可能会应用在频道、栏目名称上

网站内容页,h1标签通常应用在文章内容标题上,通过首页、内容页不同的导航,忽略内容页logo的h1标签

以上只是举例,没有绝对的,参考网易、搜狐等大站尚且也会这样做。

结论:对于一个页面来说,应当只有一个或极少量h1标签,少量的h2标签(频道、栏目title),适量的h3标签(推荐内容列表)。而其他使用普通的文字链接 a 标签即可。

  • strong 标签,仅次于 h 标签,可以少量的在页面上使用

  • 文字链接 a 增加 title, 在页面需要截字时尤为重要

  • 图片 img 标签需要 alt, title 属性

Demo

PC Demo

因显示原因,请自行格式化:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 必须作为head的直接子元素 -->
    <meta charset="utf-8">
    <!-- IE 版本Edge渲染,同时兼容Chrome GCF -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,Chrome=1">
    <!-- 让山寨双核浏览器们使用webkit核心渲染,如360安全浏览器,搜狗,X -->
    <meta name="renderer" content="webkit">
    <!-- boostrap 或响应式设计要求 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- 告诉百度该页面只适合在PC上浏览 -->
     <meta name="applicable-device" content="pc">

    <title>Page title</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- 浏览器默认会请求根目录favicon.ico,避免404 -->
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    
    <!-- css 一般放在head头部,在浏览器渲染之前优先下载 -->
    <link  rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="//cdn.bootcss.com/placeholders/4.0.1/placeholders.min.js"></script>
    <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
     <![endif]-->
</head>

<body>
    <h1>Hello World</h1>
    
    <!-- 为了使页面更快的渲染,脚本一般放在底部,除非你的页面布局依赖js -->
    <script src="//cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

HTML5 Demo

待更...

参考文档

http://zoomzhao.github.io/code-guide/
http://amazeui.org/getting-started/html-css-guide
http://zhibimo.com/read/Ashu/front-end-style-guide/index.html