<div role="heading"aria-level="2">Subheading</div>

應該這樣寫:

<h2>Subheading</h2>

使用原生元素的好處是你通常也不需要為你的元素行為添加腳本。看下面的 checkbox 實現，這么寫不僅代碼很冗長，而且還需要依賴一段 JavaScript 來控制狀態變化從而 模擬（follyfill） 出本來就是瀏覽器標準化的 name 屬性和 HTTP GET 的基本行為。明顯這么寫需要更多代碼，而且不那么健壯。搞笑吧？

<div role="checkbox"      aria-checked="false"      tabindex="0"      id="checkbox1"      aria-labelledby="label-for-checkbox1"></div> <div class="label" id="label-for-checkbox1">My checkbox label</div>

上面那么寫是為了要考慮樣式？沒關系，如果你真的需要自定義樣式，可以這么做。

<input type="checkbox"        id="checkbox"        name="checkbox1"> <label for="checkbox1">My checkbox label</label>

Grids

你記得曾經享受使用/閱讀一個超過三欄布局的網頁嗎？我不覺得那是一種享受。太多的內容堆在一起，干擾了我的注意力。“我想知道那些看起來像是導航欄的東西它真的是我想要的導航欄嗎？” 這樣的網站套路太深，我要做的任務被打斷了，于是我離開了這個網站。

有時候我們確實想要內容堆在一起。比如搜索結果或者其他什么。但是為什么要引入一整個笨重的柵格框架模板只為了實現這個功能？Flexbox 用三兩個聲明塊就能做到。

.grid {  display: flex;  flex-flow: row wrap; } .grid > * {  flex-basis: 10em;  flex-grow: 1; }

現在一切都“扭曲”為大約 10em 寬。一行有多少列取決于 viewport 可以放下大約多少個 10em 寬的單元格。搞定，繼續。

然后，當我們來到這里，下面這個是什么鬼：

width: 57.98363527356473782736464546373337373737%;

你知道精確的測量是根據一個神秘的比例計算的嗎？一個令人敬畏的神奇比例？不，我不覺得，也不感興趣。我只想要讓播放動作片的按鈕足夠大以便我能找到它。

Margins

我們做到了這個。使用通用選擇器讓元素共享 margin 定義。只在需要改變的地方重寫它，不需要更復雜。

body * + * {  margin-top: 1.5rem; }

不，通用選擇器不會破壞你頁面的性能，別被磚家坑了。

Views

你不需要一整個 Angular 或者 Meteor 或者別的什么來分離一個簡單的網頁到“視圖”。視圖只是分別控制你所能看見的網頁部分和你看不見的部分，CSS 也可以做到：

.view {  display: none; } .view:target {  display: block; }

“但是單頁應用需要在它們加載視圖的時候執行代碼！”我知道你要說這個。這個用 onhashchange 事件就好了。不需要其他庫，你只需要使用標準的，可收藏到書簽的鏈接方式就可以了。這很棒。關于這個技術，這里有更多介紹，如果你感興趣可以看一下。

Font sizes

調整字體大小真的可以讓你的 @media 塊膨脹。這也是為什么你需要小心照顧好你的 CSS。其實用一行代碼可以解決：

font-size: calc(1em + 1vw);

嗯，這樣就行了。你甚至有了字體的最小大小，所以在手機上字體也不會變得太小。多虧了Vasilis 教會了我這個。