一、属性

• 【强制】对于属性的定义使用双引号，不允许使用单引号，不允许不使用引号；

<!-- Not so great -->
<img class='avatar' src="./img/avatar.png" alt='avatar'>

<!-- Better -->
<img class="avatar" src="./img/avatar.png" alt="avatar">

• 【强制】属性名应该小写，不允许大写或大小写混合；

<!-- Not so great -->
<table cellSpacing="0">...</table>

<!-- Better -->
<table cellspacing="0">...</table>

• 【建议】布尔类型的属性，建议不添加属性值，至少同一项目要保持一致；

<input type="text" disabled>
<input type="checkbox" checked>

• 【建议】HTML 属性建议尽量按照以下给出的顺序依次排列，确保代码的易读性。
  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

• 【建议】使用自定义属性作为JS的hook，建议以data-为前缀；

<input data-role="getPic" type="button">

• 【强制】禁止 a 标签的 href 取值为空或不写 href 属性，重构时默认可用 # 代替；

<!-- Not so great -->
<a href="" title="title">欢聚时代</a>
<a class="xxx">欢聚时代</a>

<!-- Better -->
<a href="#" title="title">欢聚时代</a>

二、图片

• 【强制】禁止 img 的 src 取值为空；延迟加载的图片也要增加默认的 src；

  • src 取值为空，会导致部分浏览器重新加载一次当前页面，参考 Yahoo performance rules

• 【建议】为重要图片添加 alt 属性；

  • 可以提高图片加载失败时的用户体验。

• 【建议】添加 width 和 height 属性，以避免页面抖动；

• 【建议】有下载需求或者预期会灵活变动的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现；

  • 用户头像、用户产生的图片等有潜在下载需求的图片，以 img 形式实现，能方便用户下载；
  • 无下载需求的图片，比如：icon、背景、代码使用的图片等，尽可能采用 css 背景图实现。

注：详情查看

• https://github.com/yyued/fe-guide