Skip to content

Latest commit

 

History

History
367 lines (280 loc) · 9.08 KB

前端开发规范.md

File metadata and controls

367 lines (280 loc) · 9.08 KB

HTML
CSS
Javascript

HTML

1 通用约定

1.1 语义化

没有 CSS 的 HTML 是一个语义系统而不是 UI 系统. 通常情况下,每个标签都是有语义的,所谓语义就是你的衣服分为外套, 裤子,裙子,内裤等,各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧 ﹌○﹌

一方面为了机器(搜索引擎)易于理解,另一方面为了团队开发协作中,能迅速的了解开发者的意图

标签 语义
<p> 段落
<h1> <h2> <h3> ... 标题
<ul> 无序列表
<ol> 有序列表
<blockquote> 大段引用
<cite> 一般引用
<b> 为样式加粗而加粗
<storng> 为强调内容而加粗
<i> 为样式倾斜而倾斜 or 图标
<em> 为强调内容而倾斜
<input> 待定
<textarea> 待定
<select> 待定
<video> 待定
<audio> 待定
<object> 待定
<embed> 待定
  • 书的名称:<h1>
  • 书的每个章节标题: <h2>
  • 章节内的文章标题: h3
  • 章节的段落: <p>
  • 小标题/副标题: h4/h5/h6

1.2 标签

  • 标签名使用小写字母
  • 自闭合(self-closing)标签,无需闭合 ( 例如: img input br hr 等 )
  • 可选的闭合标签(closing tag),需闭合 ( 例如:</li></body> )
  • 尽量减少标签数量
<h1>Bigertech StyleGuide</h1>

<img src="images/bigertech.png" alt="bigertech">
<input type="text" name="title">

<ul>
    <li>Style</li>
    <li>Guide</li>
</ul>

<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

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

1.3 class 与 id

  • class 以功能或内容命名,不以表现形式命名
  • class 与 id 单词字母小写,多个单词组成时,采用中划线-分隔
  • 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class
<!-- Not so great -->
<div class="j-hook left contentWrapper"></div>

<!-- Better -->
<div id="j-hook" class="sidebar content-wrapper"></div>

1.4 属性顺序

HTML 属性应该按照特定的顺序出现以保证易读性。

  • id
  • class
  • name
  • data-xxx
  • src, for, type, href
  • title, alt
  • aria-xxx, role
<a id="..." class="..." data-modal="toggle" href="###"></a>

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

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

1.5 引号

属性的定义,统一使用双引号

<!-- Not so great -->
<a class='home' href=http://www.bigertech.com title=home>bigertech</a>

<!-- Better -->
<a class="home" href="http://www.bigertech.com" title="home">bigertech</a>

1.6 缩进

  • 使用 Tab ( 4 个空格 ) 进行缩进
  • 块级嵌套元素应当缩进一次 ( 4 个空格 )
<ul>
    <li>first</li>
    <li>second</li>
</ul>

1.7 嵌套

  • 语义嵌套
    不允许类似在 ul 下出现除了 li 外的其它子元素等等 待定

  • 严格嵌套
    不允许 inline 元素包含 block 元素 待定

1.8 注释

  • 模块注释
<!-- 文章列表列表模块 -->
<div class="article-list">
...
</div>

<!-- 视频模块 -->
<div class="vedio">
...
</div>
  • 区块注释
<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu([email protected])
-->

1.9 代码验证

代码验证不是最终目的,真的目的在于让开发者在经过多次的这种验证过程后,能够深刻理解到怎样的语法或写法是非标准和不推荐的,即使在某些场景下被迫要使用非标准写法,也可以做到心中有数

1.10 文档目录结构

  • 待定

2 HEAD

2.1 文档类型

为每个 HTML 页面的第一行添加标准模式(standard mode)的声明, 这样能够确保在每个浏览器中拥有一致的表现

<!DOCTYPE html>

2.2 语言属性

<!-- 简体中文 -->
<html lang="zh-cmn-Hans">

<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">

<!-- English -->
<html lang="en">

为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢? 请参考 网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"?

2.3 字符编码

  • 以无 BOM 的 UTF-8 编码作为文件格式
  • 指定字符编码的 meta 必须是 head 的第一个直接子元素. 参考 HTML5 Charset能用吗?
<html>
    <head>
        <meta charset="UTF-8">
        ......
    </head>
    <body>
        ......
    </body>
</html>

2.4 IE 兼容模式

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

2.5 SEO 优化

2.5.1 title

页面必须包含 title 标签声明标题

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Bigertech</title>
    ......
</head>

2.5.2 keyword

<meta name="keywords" content="your keywords">

2.5.3 description

<meta name="description" content="your description">

2.5.4 author

<meta name="author" content="author,email address">

2.6 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.7 iOS 图标

  • apple-touch-icon 图片自动处理成圆角和高光等效果
  • apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图

iPhone 和 iTouch,默认 57x57 像素,必须有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> 

iPad,72x72 像素,可以没有,但推荐有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72"> 

Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">

Retina iPad,144x144 像素,可以没有,但推荐有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

2.8 favicon

在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证favicon可访问,避免404,必须遵循以下两种方法之一:

  • 在 Web Server 根目录放置 favicon.ico 文件
  • 使用 link 指定 favicon
<link rel="shortcut icon" href="path/to/favicon.ico">

2.9 引入 CSS 和 JavaScript 文件

根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性,因为 text/css 和 text/javascript 分别是它们的默认值

<!-- External CSS -->
<link rel="stylesheet" href="bigertech.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="bigertech.js"></script>

2.10 HEAD 模板

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Bigertech</title>
    <meta name="description" content="不超过150个字符">
    <meta name="keywords" content="">
    <meta name="author" content="name, [email protected]">

    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- iOS 图标 -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
    <link rel="shortcut icon" href="path/to/favicon.ico">
</head>

3 BODY

img

form

button

模块命名

  • 每个模块必须有一个模块名
  • 每个模块的基本组成部分应该一致
  • 模块的子节点类名需带上模块名(防止模块间嵌套时产生不必要的覆盖)
  • 孙辈节点无需再带模块名
<section class="m-detail">
    <header class="m-detail-hd">
        <h1 class="title">模块标题</h1>
    </header>
    <div class="m-detail-bd">
        <p class="info">一些实际内容</p>
    </div>
    <footer class="m-detail-ft">
        <a href="#" class="more">更多</a>
    </footer>
</section>

模板中的 HTML

CSS

Javascript

引用

mdo/code-guide
Baidu 前端规范
Qunar 前端规范
常用的 HTML 头部标签
20 Snippets You should be using from Html5 Boilerplate