CSS學習中的瓶頸

 

一、何為瓶頸？

“瓶頸”指瓶子的頸部，相對狹窄。這是很傳神的一個詞，因為狹窄，因此難以突破；但是，一旦突破了，就是廣闊天空（偌大瓶身）！

小弟不才，湊合畫了個瓶頸示意圖，如下：

圖中，A → B → C → … 表示進階，即相關技能的提升；①②③④則表示各個階段要進入的瓶頸！這個適用於各行業，各學派。

楊過的武功學習與瓶頸
我們都看過《神雕俠侶》，為便於理解，我就以“神雕大俠”楊過的武功成長經歷解釋上圖的含義：

各進階階段：

階段A

武功雜：蛤蟆功，玉女劍，打狗棒，彈指神通

階段B

武功一流：整天蛇膽嗑藥，玄武重劍

階段C

武功頂尖：勤學苦練，木劍之術；自創神功，黯然銷魂掌

各階段瓶頸：

瓶頸①

無壓力：天資聰慧+主角光環，因此，一些雜七雜八功夫入門迅速

瓶頸②

雕兄：該瓶頸突破全靠雕兄。蛇膽嗑藥治傷增內力，武功引導與陪練

瓶頸③

自身：海邊多年苦練，內功積累。自身觀點想法轉變（武功都是人創造的，我也可以……），自創掌法

瓶頸④

小龍女：野史外傳，小龍女一起陰陽之類，神一般的存在……

您可以對照您目前CSS或JS的學習，您覺得您目前突破的幾個學習瓶頸，目前在第幾階段？

二、只緣身在此山中

CSS的學習入門很容易，也可以說CSS學習的第①個瓶頸很大（見上圖①處瓶口），以至於不能稱為“瓶頸”。可能只要1年甚至半年的時候，我們就能根據設計圖迅速成型頁面，能熟練使用些CSS hack，這個階段我們的成長很快，只要有頁面寫或只要四處轉轉，我們每天都能汲取新知識。如果用二維曲線表示就是：

滿瓶不動半瓶搖，這個階段實際上是CSS非常初級的階段，也是廣大頁面仔們最為浮躁，最自以為是，最覺得CSS不過如此的階段！所學越多越知所知甚少，那些成天叫囂的人往往半吊子居多。

所以，我這裡有必要提個醒，睡在凍床上不知冷熱的“牛人”們，小看CSS的結果就是你丫直接在高速公路上被淹死！

不過，大多數這個階段的同行們都清楚，自己還有很多東西要學的。但問題在於，每天也努力工作了，也去花時間學習了，只是似乎只是純粹經驗的積累，沒有學到多少實質性的東西。這就是學習的瓶頸！

拿“如月”同學舉例：工作是很認真的，頁面也是能寫的，前端書籍也買了很多，技術博客也會逛，前端技術論壇也參加。但是最後的效果呢？在我看來，還是那個層次，沒有實質性的提高！為什麼呢？

泛泛的經驗積累式學習，看不到自己技術的瓶頸所在，總在同一層次添磚加瓦。就跟楊過的A階段一樣，總是不停地學習新功夫，但都不是很深入很牛逼，結果，連對付霍都都吃力。

廣度與深度
任何一門學科都有其廣度以及深度。在CSS的A級階段，顯然所學基本上是擴展自己知識面的廣度：各個CSS屬性熟悉，各個基本盒模型，各個聲明在不同浏覽器下的表現熟悉，兼容性問題如何修復熟悉等。然而，CSS的屬性就那麼多，如果只從了解每個CSS屬性名稱、屬性值上來看，肯定會有一天達到飽和的。此時，我們就會覺得似乎沒有什麼新的東西可學了，CSS的那點東西我都知道了；似乎工作就成了每天的重復。這就是瓶頸期！

看看這張圖：

我們很自然想到，要從A到B階段，只要向下，向深度發展就可以了。所以，如果您覺得現在CSS這塊學到的東西不多了，試試向垂直方向學習。

補充：
1. 有時候，如果我們CSS的基礎足夠得扎實與強大，我們會自熱而然進入到B階段，但這種完全經驗積累的進階學習需要很長的時間周期。
2. 如果沒有一定的CSS基礎以及經驗做支撐，我們是無法進入B階段的。
3. 深度才是你的核心競爭力。深入的細節掌握，深入的機制理解等，這些都是要下苦功才能掌握的，這是你有別於其他千千萬萬自認為會寫頁面的CSSer們的地方！

瓶口間的跳躍
CSS3的出現似乎讓一些CSSer們的學習有了新的方向：CSS2.1中的那些CSS代碼我閉著眼睛都能敲出來，實在太無趣了，終於出來個小三 – CSS3來調劑生活！

然而，從CSS2到CSS3的學習增加的只是一點廣度的知識，多點時間，誰都可以達到你這種程度（學習門檻低啊！）。在我看來，無非就是從一個瓶口跳到另外一個稍顯時髦的瓶口而已。

視角的局限
武俠中，主角們的進階似乎都離不開所謂的“高人指點”；就算現實生活中，我們的人生也可能因為一句話而發生重大改變。那“指點”的是什麼呢？“改變”的又是什麼呢？——看待問題的方式以及角度！據說阿裡有個倒立文化，換個視角看問題，會得到不同的答案。

我們很多人找不到學習的突破口，可能就是由於視角的問題。

我們往往不是這樣子看的：

而是從上往下，只看到瓶口——

看不出水有多深，看不到瓶頸在哪裡！想起了一部美劇——《迷失》，想起了一句古話——“只緣身在此山中”。

三、瓶頸在哪？

我先問幾個問題，看看你是否能夠回答上來？

1. dl, dt, dd三個標簽浏覽器默認margin值多少？是否有標簽默認文字粗體？
2. line-height:150%和line-height:1.5的區別是？
3. float為何會讓外部容器高度塌陷？這是bug？
4. vertical-align的表現為何在IE7, IE8, IE9下表現不盡相同？其中的渲染機制是？

以上問題可以大致判別你是A階段還是B階段。倒不是問題本身，而是問題所指的類別。

問題1, 2表示“深入的細節掌握”；3, 4表示“深入的機制理解”。再往後可能就是“網頁大事，為我所控”，“天下頁面，聽我號令”，這要C階段了，先不予討論。

換句話說，您現在的瓶頸可能在於“細節掌握不夠”、“機制等理解不夠”。

關於細節
有人可能會反問：我為什麼要知道dl, dd, dt標簽默認的margin值大小？我一般都是直接在CSS reset中設置：

body,h1,... ,dl,dt,dd,...,th,td { margin:0; padding: 0; }

你看，淘寶網首頁就是這麼干的(global-min.css)！從實際應用來看，我無需關心！

這樣的想法，類似於：我根本不需要知道我的前任、現任、後任女友是否是處女，因為我都直接讓她們做處女膜修復！從實際應用來看，我無需關心！

很多事情，如果你足夠了解之，就能靈活掌控之！即所謂的駕馭能力。CSS細節了解，有助於你更好地駕馭CSS, 而不是被CSS調試，被浏覽器劫持。

3~4兩的大閘蟹雖然也有人要，但是，多啊，不值幾個錢；但是半斤以上的大閘蟹的單價就要翻番。
盲從CSS reset的人也有人要，但是，多啊，不值幾個錢；但是，知根究底的人這身價就要翻番了。

如果你有自己想法，知根知底，你可能就是這樣做reset的：

body, h1, ..., dl, dd { margin: 0; }

dt標簽的reset只是白白浪費，增加頁面渲染負荷；padding屬性值僅極少標簽(ol, ul)有，其他標簽無需浪費渲染重新設置。
//zxx: 對於淘寶首頁的渲染速度我就不說什麼了 

有不少人曾問我：“你的那個CSS架構我用了，很不錯，使用很方便。但是，我經常CSS庫的類名有5個甚至更多！而你寫的頁面很少會這樣，為什麼呢？”

<span class="db l h24 lh24 b">注意：</span>我是……

如果你對CSS細節足夠掌握，可能您的使用就會是這樣：

<strong class="l lh24">注意：</strong>我是……

這就是我說過的，如果頁面開發工程師對CSS屬性理解不夠透徹，我的這種架構對其而言反而會略顯吃力！

關於理解
你是否有這樣的調試經歷：尼瑪IE(x)浏覽器下出了個奇怪問題，哥哥我不知道原因啊原因啊原因，然後很苦逼地