POST

前端代码规范

2020/11/11 前端 共 5984 字，约 18 分钟

HTML 规范

命名

  • class 必须单词全字母小写，单词间以 - 分隔
  • class 名称代表相应模块或部件的内容或功能，不得以样式信息进行命名
    <!-- good -->
<div class="sidebar"></div>
<!-- bad -->
<div class="left"></div>
  • 元素 id 必须保证页面唯一

    同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 docuemnt.getElementById 时可能导致难以追查的问题

  • id、class 命名，在避免冲突并描述清除的前提下尽可能短
    <!-- good -->
<div id="nav"></div>
<!-- bad -->
<div id="navigation"></div>

<!-- good -->
<p class="comment"></p>
<!-- bad -->
<p class="com"></p>

<!-- good -->
<span class="author"></span>
<!-- bad -->
<span class="red"></span>
  • 禁止为了 hook 脚本，创建无样式信息的 class

    class 应该具有明确的语义和样式，否则容易导致 CSS class 泛滥

  • 同一页面，避免使用相同的 name 和 id
    <!-- IE 浏览器会混淆元素的 `id` 和 `name` 属性，`document.getElementById` **可能获得不符合期望的元素 -->
<input name="foo">
<div id="foo"></div>
<script>
// IE6 将显示 INPUT
alert(document.getElementById('foo').tagName);
</script>

DOCTYPE

  • 使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE
    <!DOCTYPE html>
  • （建议）启用 IE Edge 模式
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  • （建议）在 html 标签上设置正确的 lang 属性。有助于提高页面的可访问性
    <html lang="zh-CN">

标签

  • 标签名必须使用小写字母
    <!-- good -->
<b>Hello StyleGuide!</b>
<!-- bad -->
<B>Hello StyleGuide!</B>
  • 对于无需自闭合的标签，不允许自闭合
    <!-- 常见的标签有 input、br、img、hr等 -->

<!-- good -->
<input type="text" name="title">
<!-- bad -->
<input type="text" name="title" />
  • 对于 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签
    <!-- good -->
<ul>
    <li>first</li>
    <li>second</li>
</ul>

<!-- bad -->
<ul>
    <li>first
    <li>second
</ul>
  • 标签使用必须符合标签嵌套规则
    • 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其他的内联元素
    • 块级元素不能放在 p 标签里面
    • 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素：h1, h2, h3, h4, h5, h6, p, dt
    • li 标签内可以包含块级元素
    • 块级元素与块级元素并列，内嵌元素与内嵌元素并列
  • HTML 标签的使用应遵循标签的语义
    • p：段落
    • h1-h6：层级标题
    • strong, em：强调
    • ins：插入
    • del：删除
    • abbr：缩写
    • code：代码标识
    • cite：引述来源作品的标题
    • q：引用
    • blockquote：一段或长篇引用
    • ul：无序列表
    • ol：有序列表
    • dl, dt, dd：定义列表

属性

  • 属性顺序：

    • id
    • class
    • name
    • data-*
    • src, for, type, href, value, max-length, max, min, pattern
    • placeholder, title, alt
    • aria-*, role
    • required, readonly, disabled
  • 属性名必须使用小写字母
    <!-- good -->
<table cellspacing="0">...</table>

<!-- bad -->
<table cellSpacing="0">...</table>
  • 属性值必须使用双引号包围
    <!-- good -->
<script src="esl.js"></script>

<!-- bad -->
<script src='esl.js'></script>
<script src=esl.js></script>
  • 布尔类型的属性，不建议添加属性值
    <input type="text" disabled>
<input type="checkbox" value="1" checked>
  • 自定义属性建议以 xxx- 为前缀，推荐使用 data-
    <!-- 使用前缀有助于区分自定义属性和标准定义的属性 -->
<ol data-ui-type="Select"></ol>

引入 CSS 和 JavaScript

引入 CSS 时需要指明 rel="stylesheet"

在引入外部 CSS 和 JavaScript 文件时不需要指明 type，默认值就为 text/css 和 text/javascript

  • CSS
    • CSS 文件的引入一般放在 head 标签内，以避免页面加载时出现页面闪烁的情况
    • 项目团队自己开发的 CSS 文件一般放在第三方 CSS 文件之后引入，以提升团队开发样式的优先级
    • 不要直接修改第三方 CSS 文件内的样式
    • 减少使用 js 操作 dom 的 style 属性来修改样式，推荐使用修改 class 的方式来修改样式
    • 尽量避免使用 style 标签来书写样式
    • 所有的样式集中在外部 CSS 文件中，方便维护和管理
  • JavaScript
    • js 文件的引入一般放在 body 结束标签之前，避免由于 js 加载及执行时间太长导致整个页面长时间无法完成加载
    • 项目团队开发的 js 文件一般放在第三方库之后引入，避免团队开发的 js 文件引入第三方库时报错
    • 避免直接修改第三方库的 js 文件
    • 所有的 js 代码集中在 js 文件中，方便维护和管理

图片

  • 禁止 img 的 src 属性值为空，延迟加载的图片也要增加默认的 src。src 取值为空，会导致部分浏览器重新加载一次当前页面
  • 避免为 img 添加不必要的 title 属性。多余的 title 影响看图体验，并且增加了页面尺寸
  • 建议为重要的图片添加 alt 属性。可以提高图片加载失败时用户的体验
  • 建议添加 width 和 height 属性，以避免页面抖动
  • 建议有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现

CSS 规范

语法

  • 为了代码的易读性，在每个声明的左括号前增加一个空格
    .selector {
}
  • 属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格
    margin: 0;
  • 当一个 rule 包含多个 selector 时，每个选择器声明独占一行
    /* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}
  • >、+、~ 选择器的两边各保留一个空格
    /* good */
main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

/* bad */
main>nav {
    padding: 10px;
}

label+input {
    margin-left: 5px;
}

input:checked~button {
    background-color: #69C;
}
  • 属性选择器中的值必须用双引号包围
    /* good */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female;
}

/* bad */
article[character='juliet'] {
    voice-family: "Vivien Leigh", victoria, female;
}
  • 属性定义必须另起一行
    /* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }
  • 声明块的右括号应该另起一行
  • 所有声明应该以分号结尾，虽然最后一条声明后的分号是可选的，但是如果没有他，你的代码会更容易出错
    /* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}
  • 不要为 0 指明单位，比如使用 margin: 0; 而不是 margin: 0px;
  • 颜色值可以缩写时，使用缩写形式
    /* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}
  • 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致
    /* good */
.success {
    background-color: #aca;
    color: #90ee90;
}

/* good */
.success {
    background-color: #ACA;
    color: #90EE90;
}

/* bad */
.success {
    background-color: #ACA;
    color: #90ee90;
}

属性

  • 属性缩写
    • 建议在可以使用缩写的情况下，尽量使用属性缩写
      /* good */
.post {
    font: 12px/1.5 arial, sans-serif;
}

/* bad */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}
    • 使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写
      article {
    margin: 5px;
    border: 1px solid #999;
}

/* good */
.page {
    margin-right: auto;
    margin-left: auto;
}

.featured {
    border-color: #69c;
}

/* bad */
.page {
    margin: 5px auto;
}

.featured {
    border: 1px solid #69c;
}
  • 属性书写顺序 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
    • Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
    • Box Model 相关属性包括：border / margin / padding / width / height 等
    • Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
    • Visual 相关属性包括：background / color / transition / list-style 等

选择器

  • 使用 classes 而不是通用元素标签来优化渲染性能
  • 避免在经常出现的组件中使用一些属性选择器 (例如 [class^="..."])。浏览器性能会受到这些情况的影响
  • 减少选择器的长度，每个组合选择器选择器的条目应该尽量控制在 3 个以内
/* good */
.avatar {
  ...;
}
.tweet-header .username {
  ...;
}
.tweet .avatar {
  ...;
}

/* bad */
span {
  ...;
}
.page-container #stream .stream-item .tweet .tweet-header .username {
  ...;
}
.avatar {
  ...;
}

清除浮动

当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式

媒体查询

尽量将媒体查询的位置靠近他们相关的规则. 不要将他们一起放到一个独立的样式文件中, 或者丢在文档的最底部.这样做只会让大家以后更容易忘记他们. 下面是一个正确示例

.element {
    ...;
}
.element-avatar {
    ...;
}
.element-selected {
    ...;
}

@media (min-width: 480px) {
  .element {
      ...;
  }
  .element-avatar {
      ...;
  }
  .element-selected {
      ...;
  }
}

兼容性

  • 需要添加 hack 时应尽可能考虑是否可以采用其他方式解决 如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加
  • 尽量使用 选择器 hack 处理兼容性，而非 属性 hack 尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。
    /* IE 7 */
*:first-child + html #header {
    margin-top: 3px;
    padding: 5px;
}

/* IE 6 */
* html #header {
    margin-top: 5px;
    padding: 4px;
}
  • 尽量使用简单的 属性 hack
    .box {
    _display: inline; /* fix double margin */
    float: left;
    margin-left: 20px;
}

.container {
    overflow: hidden;
    *zoom: 1; /* triggering hasLayout */
}
前端