結構化HTML和CSS

張玳發表於2013-01-07
HTMLCSS

對於結構化HTML和CSS的一些思考。

網頁的三個構成部分

網頁是由三個部分構成的：結構、展示和內容。變動最大的是內容，隨時都有可能變。其次是展示，而最穩定的是結構。

結構化 HTML

網頁的結構分成兩個，一個是其資訊結構，一個是其 HTML 的結構。HTML 本身應該是於展示無關的，僅僅是為了描述資訊的結構和做內容的容器。所以，我們應該這樣寫 HTML：

<h1 class="logo">Site Name</h1>

h1 代表其結構型別（第一級 heading，即網站名稱），而 logo 則是其內容型別。此處，不考慮樣式的問題，只考慮資訊的結構。

我們所熟知的資訊結構一般是從書本或者平面媒體中發展而來的，而資訊結構的某些元素常常是有固定位置的。比如有些東西總是放在頁首的，頁碼什麼的一般則是放在頁尾。HTML5 考慮到了這一點，所以為我們加上了一些和位置語義元素，比如 header、footer、aside 等等。

此外，有些印刷效果也是有標準的，比如在行文中如果提到主要描述物件（比如產品介紹中的產品、個人介紹中的人名等等）的時候，常常會使用粗體，而在使用舶來語的時候則常常會使用斜體。HTML5 也考慮到了這一點，所以把 b、i 這樣的元素又重新招了回來，用作行文語義元素。

除此之外，HTML5 還提供了 article、section 等結構語義元素，以及 nav、menu 等功能語義元素，幫助你儘量減少無意義的 div 和 span 的使用。

結構化 CSS

CSS 的結構包括兩部分，如何使用 CSS 選擇器，以及如何使用 CSS 屬性。

CSS 的屬性應該按照某種順序來排列，以便快速瀏覽和查錯。可以按照字母順序排列，也可以按照其意義來排列（比如定位-顯示-尺寸-內外邊距-背景-邊框-字型-行等等），個人推薦後者。我個人採取的順序是：

position
float, clear
display
width, height
padding, margin
background
border
font, color
line-height
text-align
...

我們之前提過，結構是高度穩定的，所以，要想寫出穩定的、結構化的 CSS，我們必須參照 HTML 結構。正如此前所說，元素名字是結構型別，class 是內容型別，二者結合則可以知道這個元素在結構中處於哪個部分（或者哪種角色），還可以知道其具體意義和作用。

不過，光有這些還不夠，還得知道其在結構中所處的層級才能準確定位到這個元素，所以，我們可以採用下面這種辦法來選擇元素：

article.product section.coupon {
}

關於 id

從標準上來說，id 是不適合做選擇器的。HTML5 的標準草案認為 id 應該是不透明的，是無意義的，所以，我認為它不適合用作 CSS 選擇器。id 的最大作用有兩個，一是作為錨點來做文件定位，二是作為 label 的 for 物件。

儘管標準稱 id 和其所在元素不應有對應關係，但是我仍然推薦你使用有意義的 id 名，但是不要用它來做選擇器，因為其唯一性和超高的選擇器優先度會讓其很難使用。假設你有一個 id 叫做 logo，比如就是 h1#logo，看上去不錯，但是萬一你想在頁尾再加一個 logo 怎麼辦？如果用的是 class，你完全可以上面的是 h1.logo，下面的是 small.logo，同樣的上下文意義，但是不同的類別。這樣的例子還有很多。

此外，使用 id 將會讓你的 CSS 結構受到限制。你在網站的一個頁面使用過此 id 之後，必須小心全站的其他頁面以及將來的新頁面中都不能出現這個 id——除非你把這些樣式全部分佈在不同的 CSS 檔案，但那樣又會造成其他問題。

所以，簡單一句話，就是不要用 id 來做樣式。

也許你會覺得上面這種選擇器的用法不好。為什麼呢，因為寫得太麻煩了，層級很多，每一個都要寫元素名字和 class。你也許會說，拿掉前面的元素名字吧。不妥，因為這樣你就無法準確定位到這個元素了，因為用的是 class，如之前所說，除了 h1.logo，還可能會有 small.logo。那麼，中間拿掉幾個元素？也不妥，因為這也會造成樣式繼承的問題。當然，這是 CSS 本身語言的問題，不過幸好，我們還有幫手可以幫忙解決。

這個幫手就是 LESS。

LESS

LESS 最直白的作用就是幫你省去反覆寫 CSS 層級關係的煩惱，比如：

article.product {
    section.coupon {
    }
}

除此之外，LESS 還有很多的功能，可以幫助我們寫出條理清晰的 CSS。

變數

@PRIMARY-COLOR: #FF0000;
@SECONDARY-COLOR: #00FF00;
@MAIN-FONT: sans-serif;
@BODY-FONT: serif;

LESS 的變數可以用來：

  • 定義主字型、副字型
  • 定義主顏色、副顏色、著重色等等

總之一切可以簡單替換的屬性都可以用它來定義。

Mixin

用慣了 Bootstrap 的朋友會說，用 Bootstrap 多好，任何東西加一個 .btn 就變成按鈕，再加一個 primary-btn 就變成主按鈕，還可以切換主題和顏色等等。這樣的結構是非語義化的，因為它把結構型別寫進了本應是內容型別的 class 中。不過，LESS 的 Mixin 可以幫助我們解決這個問題。

.PRIMARY-BUTTON {
    background-color: #FF0000;
    color: #FFF;
    border-radius: 5px;
}

a.quote {
    .PRIMARY-BUTTON;
}

此外，Mixin 還可以巢狀和傳引數，這是非常方便的。不過，一定要小心巢狀層次過多導致新的結構以及可讀性問題。

函式和運算子

LESS 提供了很多使用的函式和運算子，其中最有用的是顏色函式。

a {
    color: darken(@PRIMARY-COLOR, 50%);
    color: @PRIMARY-COLOR * 2;
}

總結

網頁是分成三部分的，結構、展示和內容。最穩定、最清晰的是結構，所以 HTML 和 CSS 應該貼合結構。要讓 HTML 貼合資訊結構，可以用元素名稱來指代其結構型別，用 class 來指示其上下文的意義。要讓 CSS 貼合 HTML 結構，則應該使用完整的元素名＋ class 來選擇元素，並在 CSS 裡複製 HTML 的結構。由於要複製HTML的結構是很麻煩的，而且可能產生很多重複的程式碼，所以我們可以使用 LESS 來幫忙。

這樣的寫法有幾個好處：

  • 結構清晰，條理清楚，方便查閱，看著舒服
  • 結構和展示的完全分離，方便修改、資訊匯出或者做響應式設計等等
  • 語意化的網頁，方便搜尋引擎等來獲取資訊

相關文章