阿嬤都看得懂的 CSS 收整與 DRY 策略

玫瑰即使換個名字，還是同樣芬芳。 －莎士比亞

歡迎各位阿嬤回到你阿嬤成為網頁工程師的...等等，別走啊，我知道標題今天又是 CSS，但是我保證今天不會再介紹多如繁星、金魚腦記不清的樣式了！

咦，但是 CSS 不就是樣式嗎？不介紹更多樣式，還要介紹什麼？

沒關係，先讓我們看看昨天的一段程式。

<div>
	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">區塊一</div>
	<div style="margin:2px; height:100px; width:100px; background-color:violet; color:white; text-align:center; line-height:100px;">區塊二</div>
	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">區塊三</div>
	<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">區塊四</div>
</div>

是不是對各位阿嬤的眼睛超傷的？而且根本像是乖孫不乖，被老師罰抄課文抄 4 次，越抄越煩，越抄越火大！

對，今天就是要教各位阿嬤不用重複的方法！也就是 DRY！
.....呃，好，真的好乾。

DRY 的意思是 Don't repeat yourself，也就是不要重複抄寫，不要複製貼上！因為工程師都、很、懶！不是，是生命應該浪費在美好的事物上。所以，我們應該怎麼避免重複呢？

首先，讓我們觀察重複的部分。在這 4 個標籤中，
<div style="margin:2px; height:100px; width:100px; background-color:red; color:white; text-align:center; line-height:100px;">區塊一</div>
紅色的部分都是重複的。

再來，讓我們想想，這些重複的地方，是否可能 / 應該被收整在一起呢？

我知道，這個問題乍看之下還滿讓人傻眼的：我們都還沒介紹什麼收整的方法，怎麼會知道哪些重複的地方可能收整在一起？沒關係，讓我們還是先想想，這些重複的地方在幹嘛？沒錯，是告訴瀏覽器有個 div 標籤，然後它的樣式長這樣那樣。

我們在更後面的文章中，會告訴大家怎麼使用腳本，讓瀏覽器重複產生 HTML 標籤，或者說操縱整個 DOM 樹。在這篇文章當中，我們先來看看怎麼收整這些落落長的樣式。不過，在那之前，我們先來玩個遊戲。

當我說「粉紅色大象」的時候，你想到什麼？你大概想到一個四隻粗腿、兩隻長牙、一根長鼻，短尾巴短腿，粉紅色的生物。

等等，我剛剛只說粉紅色大象，所以你說這東西是粉紅色，這合理，可是為什麼你會知道這東西有粗腿、長牙、長鼻這些屬性呢？

廢話，因為 大象 這個類別的東西，都有粗腿、長牙、長鼻這些屬性啊！

很好，這表示，我們可以把都有某些屬性的東西，全部收整到某個分類當中。問題來了，這個分類的名稱，是否會影響到這個分類中的東西有哪些屬性？

不，不會的。熟讀莎士比亞的阿嬤會說：

玫瑰即使換個名字，還是同樣芬芳。

當我告訴你，我從現在開始，把會跳的兔子統統稱作「嘎法蓋」，然後我又說到「粉紅色的嘎法改」的時候，你就會知道我在指 會跳的粉紅色的兔子；不管你之前是否知道，又大家是否認同「嘎法蓋」指的就是會跳的兔子。

因此，我們可以告訴瀏覽器，從現在開始，某個分類裡面的東西都有某些屬性，而且我們把這個分類任意武斷地叫作某個名字。從此以後，瀏覽器只要看到某個元件屬於這個分類，就會知道這個元件有那些屬性。

以上面那 4 個區塊的例子而言，我們可以告訴瀏覽器，這 4 個區塊都屬於 gavagai 這個分類，而在 gavagai 分類中的東西，都有以下這些屬性：

	margin:2px;
	height:100px; 
	width:100px; 
	background-color:red; 
	color:white; 
	text-align:center; 
	line-height:100px;

等等，可是區塊二的顏色分明是紫羅蘭色啊！沒關係嘛，平常大象也是灰色啊，你剛剛不也知道粉紅色大象是粉紅色的？我就之後再告訴瀏覽器，區塊二是紫羅蘭色的 gavagai 就好囉！

那麼，我們應該怎麼告訴瀏覽器，這 4 個區塊都屬於 gavagai 這個分類呢？很簡單，只要在標籤中，加上 class 字樣，並且後面加上等號，再加上雙引號，雙引號內加上類別名稱就可以了。因此，寫起來會是像這樣：

<div class="gavagai">區塊一</div>

是不是清爽超多呢！

等等，我們確實是把 CSS 樣式收整出來了沒錯，但是我們要怎麼告訴瀏覽器，這些被收整出來的樣式，屬於哪個標籤呢？是直接把 gavagai 這個字樣，放在所有收整出的樣式前面嗎？

這就留待我們明天介紹 CSS 選擇器的時候，再深入討論囉！