20170621

今天继续看把剩余的CSS编码规范看完，又看了HTML的编码规范，对知识进行了简单总结，也对自己代码中出现的问题进行了罗列。

CSS规范自己代码中存在的问题：

• font-weight属性必须使用数值方式描述。
  因为CSS的字重分100–900共九档，但目前受字体本身质量和浏览器的限制，实际上支持400和700两档，分别等价于关键词normal和 bold。浏览器本身使用一系列启发式规则来进行匹配，在 <700时一般匹配字体的Regular字重，>=700时匹配Bold字重。但已有浏览器开始支持=600时匹配Semibold字重，故使用数值描述增加了灵活性，也更简短。如图：

• 带私有前缀的属性由长到短排列，按冒号位置对齐。举例：

.box {   -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;           box-sizing: border-box;}

---

CSS规范自己需注意的知识点：

必须同时给出水平和垂直方向的位置。
2D位置初始值为0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为center。为避免理解上的困扰，应同时给出两个方向的值。background-position属性里用得到。

• font-family属性中的字体族名称应使用字体的英文Family Name，其中如有空格，须放置在引号中。
  解释：
  所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：
  字体 操作系统 Family Name
  宋体 (中易宋体) Windows SimSun
  黑体 (中易黑体) Windows SimHei
  微软雅黑 Windows Microsoft YaHei
  微软正黑 Windows Microsoft JhengHei
  华文黑体 Mac/iOS STHeiti
  冬青黑体 Mac/iOS Hiragino Sans GB
  文泉驿正黑 Linux WenQuanYi Zen Hei
  文泉驿微米黑 Linux WenQuanYi Micro Hei
• font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求)的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif)。说起来简单，但是对于各个平台字体的不同，可能会在使用中出现很多麻烦。
• font-family不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一。
• 需要在 Windows 平台显示的中文内容，其字号应不小于12px。由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。
• [建议]需要在Windows平台显示的中文内容，不要使用除normal外的font-style。其他平台也应慎用。
  由于中文字体没有italic风格的实现，所有浏览器下都会fallback到obilique实现(自动拟合为斜体)，小字号下(特别是Windows下会在小字号下使用点阵字体的情况下)显示效果差，造成阅读困难。
• 使用transition时应指定transition-property。[建议]尽可能在浏览器能高效实现的属性上添加过渡和动画。在可能的情况下应选择这样四种变换：

transform:translate(npx, npx);transform:scale(n);transform:rotate(ndeg);opacity:0..1;

• MediaQuery不得单独编排，必须与相关的规则一起定义。示例：

/* Good*//* headerstyles */@media(...) {    /* header styles */}/* mainstyles */@media(...) {    /* main styles */}/* footerstyles */@media(...) {    /* footer styles */}/* Bad *//* headerstyles *//* mainstyles *//* footerstyles */@media (...){    /* header styles */    /* main styles */    /* footer styles */}

MediaQuery如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。示例：

@media(-webkit-min-device-pixel-ratio:2), /* Webkit-based browsers */(min--moz-device-pixel-ratio:2),    /* Older Firefox browsers (priorto Firefox 16) */(min-resolution:2dppx),             /* The standard way*/(min-resolution:192dpi) {           /* dppx fallback */    /* Retina-specific stuff here */}

[建议] 尽可能给出在高分辨率设备 (Retina) 下效果更佳的样式。

• [建议]需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。
  [建议]尽量使用选择器hack处理兼容性，而非属性hack。
  [建议]尽量使用简单的属性hack。

---

HTML规范自己需要注意的知识点：

• [建议]id建议单词全字母小写，单词间以-分隔。同项目必须保持风格一致。
  [建议]id、class命名，在避免冲突并描述清楚的前提下尽可能短。
  示例：

<!-- good --><div id="nav"></div><!-- bad --><divid="navigation"></div><!-- good --><pclass="comment"></p><!-- bad --><p class="com"></p>

• class必须单词全字母小写，单词间以-分隔，比如top-banner。
• 禁止为了hook脚本，创建无样式信息的class。不允许class只用于让JavaScript选择某些元素，class应该具有明确的语义和样式。否则容易导致CSS的class泛滥。
  使用id、属性选择作为hook是更好的方式。
• 同一页面，应避免使用相同的name与id。IE浏览器会混淆元素的id和name属性，document.getElementById可能获得不期望的元素。所以在对元素的id与name属性的命名需要非常小心。
• JavaScript应当放在页面末尾，或采用异步加载。
• [建议]移动环境或只针对现代浏览器设计的Web应用，如果引用外部资源的URL协议部分与页面相同，建议省略协议前缀。
  解释：使用protocol-relative URL引入CSS，在IE7/8下，会发两次请求。是否使用protocol-relative URL应充分考虑页面针对的环境。
• 保证favicon可访问。
• 有文本标题的控件必须使用label标签将其与其标题相关联。举例：

<label><inputtype="checkbox" name="confirm" value="on"> 我已确认上述条款</label><label for="username">用户名：</label><input type="textbox" name="username"id="username">

推荐使用第一种，减少不必要的 id。如果 DOM 结构不允许直接嵌套，则应使用第二种。

• [建议]尽量不要使用按钮类元素的name属性。

---

HTML自己存在问题的知识点：

• 使用4个空格做为一个缩进层级，不允许使用2个空格或tab字符。[建议]每行不得超过120个字符。
• class必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。示例：

<!-- good --><div class="sidebar"></div><!-- bad --><div class="left"></div>

这个不好的例子就是以样式信息命名的。

• [建议]在CSS可以实现相同需求的情况下不得使用表格进行布局。
• HTML的嵌套规则，在查阅了相关规则后，发现<div><h2></h2><span></span></div>这种嵌套方式是错的，因为h2和span标签的地位不是一样的，之前自己犯过这样的错误。
• [建议]添加width和height属性，以避免页面抖动。
• [建议]有下载需求的图片采用img标签实现，无下载需求的图片采用CSS背景图实现。
  解释：产品logo、用户头像、用户产生的图片等有潜在下载需求的图片，以img形式实现，能方便用户下载。无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用CSS背景图实现。

心得体会：

大概把CSS和HTML的规范看了一遍，发现自己需要规范的地方还有很多，之后根据规范对代码进行了重构，在重构的过程中，巩固了自己新学习到的规范，以后再写代码的时候，可随时查询自己不确定的规范，时间久了，就掌握住了。

---

参考资料：

https://github.com/ecomfe/spec/blob/master/html-style-guide.md
https://github.com/ecomfe/spec/blob/master/css-style-guide.md

---

小知识：Html中的favicon.ico
这个只是查阅了资料，还没有亲自验证过。
使用的WEB浏览器是IE5或以上版本，那么将某些网站加入到“收藏夹”后，会注意到在这些网站标题的旁边还有一个独具个性的图标，这就是收藏夹图标favicon.ico。
制作方法：将需要作为图标的图片(任意格式)，提交给可在线生成16*16像素的ico图标的网站，得到网站的图标(后缀名为ico)。
下载刚生成的图标文件并上传到网站根目录中即可，即

<link rel="icon"href="Images/wangyi.ico" type="image/x-icon" /><link rel="shortcut icon"href="Images/wangyi.ico" type="image/x-icon" />

---