一、HTML規範
文檔規範
使用 HTML5 的文檔聲明類型 : <!DOCTYPE html>
如果你的頁面添加了<!DOCTYP>那麼，那麼就等同於開啓了標準模式。瀏覽器會按照W3C標準解析渲染頁面。
腳本加載
所有瀏覽器推薦寫法
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- body goes here -->
<script src="main.js" async></script>
</body>
</html>
只兼容現代瀏覽器（IE9+）推薦寫法
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js" async></script>
</head>
<body>
<!-- body goes here -->
</body>
</html>
語義化
使用語義化標籤
推薦
html 代碼:
<!-- The page header should go into a header element -->
<header>
<!-- As this title belongs to the page structure it's a heading and h1 should be used -->
<h1>My page title</h1>
</header>
<!-- All navigation should go into a nav element -->
<nav class="top-navigation">
<!-- A listing of elements should always go to UL (OL for ordered listings) -->
<ul>
<li class="nav-item"><a href="#home">Home</a></li>
<li class="nav-item"><a href="#news">News</a></li>
<li class="nav-item"><a href="#about">About</a></li>
</ul>
</nav>
<!-- The main part of the page should go into a main element (also use role="main" for accessibility) -->
<main class="news-page" role="main">
<!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. -->
<section class="page-section news">
<!-- A section header should go into a section element -->
<header>
<!-- As a page section belongs to the page structure heading elements should be used (in this case h2) -->
<h2 class="title">All news articles</h2>
</header>
<!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other
re-usable module / section that can occur multiple times on a page) a article element should be used -->
<article class="news-article">
<!-- An article can contain a header that contains the summary / introduction information of the article -->
<header>
<!-- As a article title does not belong to the overall page structure there should not be any heading tag! -->
<div class="article-title">Good article</div>
<!-- Small can optionally be used to reduce importance -->
<small class="intro">Introduction sub-title</small>
</header>
<!-- For the main content in a section or article there is no semantic element -->
<div class="content">
<p>This is a good example for HTML semantics</p>
</div>
<!-- For content that is represented as side note or less important information in a given context use aside -->
<aside class="article-side-notes">
<p>I think I'm more on the side and should not receive the main credits</p>
</aside>
<!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element -->
<footer class="article-foot-notes">
<!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time
while the actual text in the time element can also be more human readable / relative -->
<p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p>
</footer>
</article>
<!-- In a section, footnotes or similar information can also go into a footer element -->
<footer class="section-footer">
<p>Related sections: Events, Public holidays</p>
</footer>
</section>
</main>
<!-- Your page footer should go into a global footer element -->
<footer class="page-footer">
Copyright 2014
</footer>
alt標籤不爲空
結構、表現、行爲三者分離
- 不使用行內樣式（ <style>.no-good {}</style> ）
- 不在元素上使用 style 屬性（ <hr style="border-top: 5px solid black"> ）
- 不使用行內腳本（ <script>alert('no good')</script> ）
- 不使用表象元素（ i.e. <b>, <u>, <center>, <font>, <b> ）
- 不使用表象 class 名（ i.e. red, left, center ）
- 不使用超過一到兩張樣式表
- 不使用超過一到兩個腳本
這裏多說一句， 用 JavaScript 在寫 HTML 和 CSS的方式已經較爲普遍。比如， React 在 JavaScript 裏面實現了對 HTML 和 CSS 的封裝，我們通過封裝去操作 HTML 和 CSS。也就是說，網頁的結構和樣式都通過 JavaScript 操作。
由於 CSS 的封裝非常弱，導致了一系列的第三方庫，用來加強 React 的 CSS 操作。它們統稱爲 CSS in JS，意思就是使用 JS 語言寫 CSS。
CSS in JS 使用 JavaScript 的語法，是 JavaScript 腳本的一部分，不用從頭學習一套專用的 API，也不會多一道編譯步驟
HTML只關注內容
- HTML只顯示展示內容信息
- 不要引入一些特定的 HTML 結構來解決一些視覺設計問題
- 不要將img元素當做專門用來做視覺設計的元素
- 樣式上的問題應該使用css解決
二、CSS規範
id和class的命名
ID和class的名稱使用可以反應元素目的和用途的名稱
推薦：
.heavy {
font-weight: 800;
}
.important {
color: red;
}
合理的使用ID
一般情況下ID不應該被用於樣式，並且ID的權重很高，所以不使用ID解決樣式的問題，而是使用class
css選擇器中避免使用標籤名
使用子選擇器
推薦：
.content > .title {
font-size: 2rem;
}
儘量使用縮寫屬性
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
屬性順序
儘量按照下面的順序進行屬性開發
結構性屬性：
- display
- position, left, top, right etc.
- overflow, float, clear etc.
- margin, padding
表現性屬性：
- background, border etc.
- font, text
示例代碼：
.box {
display: block;
position: absolute;
left: 30%;
right: 30%;
overflow: hidden;
margin: 1em;
padding: 1em;
background-color: #eee;
border: 3px solid #ddd;
font-family: 'Arial', sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
}