關於CSS項目Minimum Page的簡單介紹

一、作者，下載，demo等

Minimum Page項目是幾個老外最近整出來的，還是有些參考價值的，故拿來說說。

這兩位仁兄是Peter Wilson 和 Josh Kinal。他們有個叫做bigredtin的部落格，你或者可以在twitter上follow他們：Peter和Josh。

該項目目前已經在Github上了，可以點擊這裡去觀摩。本文所介紹的東西的相關源檔案可以點擊這裡下載（友情提示：裡面有各個瀏覽器預設內建CSS樣式哦）。

對了，本文還有兩個相關的demo，您可以輕輕地點擊這裡查看：普通的demo和表單相關demo。

對Minimum Page項目一些特定代碼的更改，或是一些一般性的建議。可以到問題部分頁面添加。

這裡的下載啊，demo什麼的你可以把下面的的看完後再回過頭來看，就大致知道榨出的是什麼油了。

二、Minimum Page究竟是顆什麼樣的蔥？

根據我目前的瞭解，Minimum Page項目就是折騰一些“有意思”的CSS代碼而已。兩位項目創立者覺得目前用得比較多的CSS reset重設和CSS base基礎樣式需要重建大量同樣的不必要的樣式，尤其是瀏覽器公用的一些樣式。例如：

設定strong標籤的font-weight為normal，而經常需要將其恢複成bold粗體。

設定b標籤的font-weight為normal，而經常需要將其恢複成bold粗體。

設定h1~h6標籤的font-weight為normal，而使用之時總是需要將其恢複成bold粗體。

還有另外一種情況，比如list-style屬性，這玩意在重設樣式的時候有時候出出現重定義的問題。如下代碼：

/* reset.css */li {  list-style:none;}/* base.css */ol li {  /*給ol下面的li標籤以數值*/  list-style: decimal outside;}ul li {  /*給ul下面的li標籤以圓點標記*/  list-style: disc outside;}

於是乎，當有序列表和無序列表嵌套的時候，悲劇發生了，裡面嵌套的有序列表本應顯示數值的，結果就是個圓點標記。

您可以狠狠地點擊這裡：有序無序列表嵌套衝突demo

雖然選取器ol > li和ul > li可以解決該問題，但人們總是慣性思維地使用最小量的那個代碼。

您可以狠狠地點擊這裡：子選取器修複衝突的demo

這裡說點題外話，按照我的認識，上面關於ul, ol, li的做法都是一坨造型看上去不錯的狗屎。何解？因為li標籤具有繼承性，我們完全沒有必要在li標籤上做文章。直接如下CSS代碼就可以了：

ol {  /*給ol下面的li標籤以數值*/  list-style: decimal outside;}ul {  /*給ul下面的li標籤以圓點標記*/  list-style: disc outside;}

代碼最小最少，且沒有嵌套衝突的問題。您可以狠狠地點擊這裡：繼承性使用下的列表嵌套demo

三、樣式，表單樣式

貌似Minimum Page項目有個專門的表單CSS檔案，按照發起人的說法，表單之外的樣式是有限的，就是margin, padding或是一些background背景色連結設為高亮的藍色，鍵盤焦點獲得後反相顯示。

表單樣式多半是從Skeleton架構（對手機裝置開發友好）中剝離出來的，只有較少的改變和一些代碼的壓縮。第一部分展示的demo中的普通demo頁麵包含了絕大多數常用的元素，而表單相關demo有其自己的demo頁面。

四、做什麼事的？

Minimum Page項目貌似是在做這麼一件事：形成一個緊湊堅固的基礎CSS，無需反覆折騰瀏覽器一直的預設樣式；但是，同時要保證在各個瀏覽器下對每個使用者而言，看到的效果是一樣的，而不必去擔心會出現一兩個妖孽的幾像素問題。

為鼓勵使用者思考要插入他們自己網站的CSS代碼。代碼樣式並不是最小化的那種形式，開發人員是修改原來的基礎的樣式，是其更具有廣泛性和通用性，以適合自己的網站。

五、這不就是normalize.css嗎？

首先關於normalize.css項目，您可以點擊這裡查看：normalize.css。雖然normalize.css和minimum page都來自類似的地方， 都是旨在規避傳統CSS reset且都只設定瀏覽器不一樣的樣式。但normalise.css採取更嚴格的方法，避免過多樣式。

從另一方面講，Minimum page包含了更多的樣式（表單部分更多），並省去了很多小的差異。

沒有哪個項目是陽光大道。這就是為什麼這兩個項目都沒有提供最小化版本，以防止你盲目地添加到CSS reset中。

六、究竟為何物？

上面基本上按照官方首頁稱述的內容，估計還會讓很多人是丈二的和尚-摸不著頭腦。因此，我決定用更易於接受的方式介紹了Minimum Page項目究竟何物。
Minimum Page項目的終極產物形式就是個CSS檔案(下載資源中的base.css和forms.css)。我們都知道CSS reset重設的終產物也是個CSS檔案，只是裡面的樣式無論在各個瀏覽器中是否有差異都是置為0，或normal之類。

而這裡Minimum Page項目：
1. base.css檔案等只針對各個瀏覽器下有差異的元素進行樣式定義（例如strong標籤就忽略）。
2. 定義的樣式不是盲目地置為0，而是仔細對比各個瀏覽器的預設值指定的最合適的值。例如列表樣式：

就不是想也不想的：

ul, ol, dl {    margin: 0;    padding: 0;}

3. 標籤直接植入項目，內建一些UI屬性樣式。例如a標籤連結色，或是figure標籤下的圖片：

figure img {    background-color: #f3f3f3;    padding: 4px;    margin: 5px;    border: 1px solid #ccc;        border-radius: 3px;}

可以看到有背景色，有padding有margin，還有圓角樣式。這在專門提出來的forms.css中更為明顯，從demo頁面中中文字框等的樣子就可以估計出各種HTML 表單控制項的洋洋洒洒的樣式了，我們在實際使用該項目成果的時候要根據網站的自身情況，修改（例如）這裡的表單樣式的。

當我們使用Minimum Page項目的時候，要結果我們網站自身的情況，對之中的CSS屬性進行修改的。正如上面提到的，我們之所以把表單之類的CSS寫的蠻精細的，就是方便偶們使用者進行修改。這也是為什麼說項目不是正確方法，不對CSS檔案最小化的原因。

提示：源檔案中有個名叫_reference-ua-css的檔案夾，其中的CSS檔案都是各個瀏覽器內建的預設的一些CSS的樣式值，從中你也看以看出，Minimum Page項目中所設定樣式的CSS屬性值都是經過仔細對比，設定的值也都是有過考量的，所以，還是相當有借鑒和參考意義的。

七、短短的結語

自己也是邊學習邊整理，所以，文章可能會有表述不準確的地方，歡迎指正。對於該項目本身，由於自己還沒有準確把握其精髓，所以自己不敢妄作評論。不過可以肯定的是其中多少看到了我架構CSS時的一些影子，例如不對瀏覽器一致的預設屬性進行重新設定。

不知道大家對這個項目中對瀏覽器預設CSS的做法有什麼看法？