雖已數(shù)年,但未就學(xué)習(xí)專門寫過文章,這回破處了。蒼蠅不叮沒有縫隙的雞蛋,領(lǐng)導(dǎo)不做沒有跟拍的表演,同樣,想到寫CSS學(xué)習(xí)的文章也是有原因的(雖然我的不少行為沒有原因)。
情景再現(xiàn)(尊重隱私,下面故事中人名均為化名,有加工):
如月姑娘(本屆D2上微博中獎上臺最漂亮的那位)的內(nèi)部分享會——關(guān)于CSS3 background相關(guān)內(nèi)容~~
……一頓巴拉巴拉……如月:假設(shè)背景圖片500px*500px,則應(yīng)用background-size:50%后,顯示的背景圖片大小就是250px*250px
三晶:咔!不對吧!……CSS中的所有百分比都是相對于父級元素的,不會是自身……
仁力:是啊,50%應(yīng)該相對的是容器指定類型的box的尺寸…………又巴拉巴拉百分比值相關(guān)東西……
如月:哦,教我們網(wǎng)頁的那個老師讓我們line-height使用百分比形式,說這樣更好,行高自適應(yīng)~~
三晶:咔!我信了你老師的邪!百分比行高并不具有自適應(yīng)性,除非使用該死低效的*通配符……
上面場景劇情可以總結(jié)為:“一個百分號認(rèn)識所引發(fā)的討論”,然后,引發(fā)的后續(xù)劇情就是:“一個百分號討論所引發(fā)的寫文章的沖動”。
“沖動”在何處?在于我似乎看到了很多人都正面對的,但同時自己并未意識到的學(xué)習(xí)瓶頸。當(dāng)然,所謂瓶頸并不是你不能夠搞明白line-height:150%
和line-height:1.5
的區(qū)別,而是你沒有意識到要搞明白。
這就是我多次提到的:想法、意識遠(yuǎn)比技術(shù)本身更有傳授的價值!
一、何為瓶頸?
“瓶頸”指瓶子的頸部,相對狹窄。這是很傳神的一個詞,因為狹窄,因此難以突破;但是,一旦突破了,就是廣闊天空(偌大瓶身)!
小弟不才,湊合畫了個瓶頸示意圖,如下:
圖中,A → B → C → … 表示進(jìn)階,即相關(guān)技能的提升;①②③④則表示各個階段要進(jìn)入的瓶頸!這個適用于各行業(yè),各學(xué)派。
楊過的武功學(xué)習(xí)與瓶頸
我們都看過《神雕俠侶》,為便于理解,我就以“神雕大俠”楊過的武功成長經(jīng)歷解釋上圖的含義:
各進(jìn)階階段:
- 階段A
- 武功雜:蛤蟆功,玉女劍,打狗棒,彈指神通
- 階段B
- 武功一流:整天蛇膽嗑藥,玄武重劍
- 階段C
- 武功頂尖:勤學(xué)苦練,木劍之術(shù);自創(chuàng)神功,黯然銷魂掌
各階段瓶頸:
- 瓶頸①
- 無壓力:天資聰慧+主角光環(huán),因此,一些雜七雜八功夫入門迅速
- 瓶頸②
- 雕兄:該瓶頸突破全靠雕兄。蛇膽嗑藥治傷增內(nèi)力,武功引導(dǎo)與陪練
- 瓶頸③
- 自身:海邊多年苦練,內(nèi)功積累。自身觀點想法轉(zhuǎn)變(武功都是人創(chuàng)造的,我也可以……),自創(chuàng)掌法
- 瓶頸④
- 小龍女:野史外傳,小龍女一起陰陽之類,神一般的存在……
您可以對照您目前CSS或JS的學(xué)習(xí),您覺得您目前突破的幾個學(xué)習(xí)瓶頸,目前在第幾階段?
二、只緣身在此山中
CSS的學(xué)習(xí)入門很容易,也可以說CSS學(xué)習(xí)的第①個瓶頸很大(見上圖①處瓶口),以至于不能稱為“瓶頸”??赡苤灰?年甚至半年的時候,我們就能根據(jù)設(shè)計圖迅速成型頁面,能熟練使用些CSS hack,這個階段我們的成長很快,只要有頁面寫或只要四處轉(zhuǎn)轉(zhuǎn),我們每天都能汲取新知識。如果用二維曲線表示就是:
滿瓶不動半瓶搖,這個階段實際上是CSS非常初級的階段,也是廣大頁面仔們最為浮躁,最自以為是,最覺得CSS不過如此的階段!所學(xué)越多越知所知甚少,那些成天叫囂的人往往半吊子居多。
所以,我這里有必要提個醒,睡在凍床上不知冷熱的“牛人”們,小看CSS的結(jié)果就是你丫直接在高速公路上被淹死!
不過,大多數(shù)這個階段的同行們都清楚,自己還有很多東西要學(xué)的。但問題在于,每天也努力工作了,也去花時間學(xué)習(xí)了,只是似乎只是純粹經(jīng)驗的積累,沒有學(xué)到多少實質(zhì)性的東西。這就是學(xué)習(xí)的瓶頸!
拿“如月”同學(xué)舉例:工作是很認(rèn)真的,頁面也是能寫的,前端書籍也買了很多,技術(shù)博客也會逛,前端技術(shù)論壇也參加。但是最后的效果呢?在我看來,還是那個層次,沒有實質(zhì)性的提高!為什么呢?
泛泛的經(jīng)驗積累式學(xué)習(xí),看不到自己技術(shù)的瓶頸所在,總在同一層次添磚加瓦。就跟楊過的A階段一樣,總是不停地學(xué)習(xí)新功夫,但都不是很深入很牛逼,結(jié)果,連對付霍都都吃力。
廣度與深度
任何一門學(xué)科都有其廣度以及深度。在CSS的A級階段,顯然所學(xué)基本上是擴(kuò)展自己知識面的廣度:各個CSS屬性熟悉,各個基本盒模型,各個聲明在不同瀏覽器下的表現(xiàn)熟悉,兼容性問題如何修復(fù)熟悉等。然而,CSS的屬性就那么多,如果只從了解每個CSS屬性名稱、屬性值上來看,肯定會有一天達(dá)到飽和的。此時,我們就會覺得似乎沒有什么新的東西可學(xué)了,CSS的那點東西我都知道了;似乎工作就成了每天的重復(fù)。這就是瓶頸期!
看看這張圖:
我們很自然想到,要從A到B階段,只要向下,向深度發(fā)展就可以了。所以,如果您覺得現(xiàn)在CSS這塊學(xué)到的東西不多了,試試向垂直方向?qū)W習(xí)。
1. 有時候,如果我們CSS的基礎(chǔ)足夠得扎實與強(qiáng)大,我們會自熱而然進(jìn)入到B階段,但這種完全經(jīng)驗積累的進(jìn)階學(xué)習(xí)需要很長的時間周期。
2. 如果沒有一定的CSS基礎(chǔ)以及經(jīng)驗做支撐,我們是無法進(jìn)入B階段的。
3. 深度才是你的核心競爭力。深入的細(xì)節(jié)掌握,深入的機(jī)制理解等,這些都是要下苦功才能掌握的,這是你有別于其他千千萬萬自認(rèn)為會寫頁面的CSSer們的地方!
瓶口間的跳躍
CSS3的出現(xiàn)似乎讓一些CSSer們的學(xué)習(xí)有了新的方向:CSS2.1中的那些CSS代碼我閉著眼睛都能敲出來,實在太無趣了,終于出來個小三 – CSS3來調(diào)劑生活!
然而,從CSS2到CSS3的學(xué)習(xí)增加的只是一點廣度的知識,多點時間,誰都可以達(dá)到你這種程度(學(xué)習(xí)門檻低?。。?。在我看來,無非就是從一個瓶口跳到另外一個稍顯時髦的瓶口而已。
視角的局限
武俠中,主角們的進(jìn)階似乎都離不開所謂的“高人指點”;就算現(xiàn)實生活中,我們的人生也可能因為一句話而發(fā)生重大改變。那“指點”的是什么呢?“改變”的又是什么呢?——看待問題的方式以及角度!據(jù)說阿里有個倒立文化,換個視角看問題,會得到不同的答案。
我們很多人找不到學(xué)習(xí)的突破口,可能就是由于視角的問題。
我們往往不是這樣子看的:
而是從上往下,只看到瓶口——
看不出水有多深,看不到瓶頸在哪里!想起了一部美劇——《迷失》,想起了一句古話——“只緣身在此山中”。
三、瓶頸在哪?
我先問幾個問題,看看你是否能夠回答上來?
- dl, dt, dd三個標(biāo)簽瀏覽器默認(rèn)margin值多少?是否有標(biāo)簽?zāi)J(rèn)文字粗體?
- line-height:150%和line-height:1.5的區(qū)別是?
- float為何會讓外部容器高度塌陷?這是bug?
- vertical-align的表現(xiàn)為何在IE7, IE8, IE9下表現(xiàn)不盡相同?其中的渲染機(jī)制是?
以上問題可以大致判別你是A階段還是B階段。倒不是問題本身,而是問題所指的類別。
問題1, 2表示“深入的細(xì)節(jié)掌握”;3, 4表示“深入的機(jī)制理解”。再往后可能就是“網(wǎng)頁大事,為我所控”,“天下頁面,聽我號令”,這要C階段了,先不予討論。
換句話說,您現(xiàn)在的瓶頸可能在于“細(xì)節(jié)掌握不夠”、“機(jī)制等理解不夠”。
關(guān)于細(xì)節(jié)
有人可能會反問:我為什么要知道dl, dd, dt標(biāo)簽?zāi)J(rèn)的margin值大小?我一般都是直接在CSS reset中設(shè)置:
body,h1,... ,dl,dt,dd,...,th,td { margin:0; padding: 0; }
你看,淘寶網(wǎng)首頁就是這么干的(global-min.css)!從實際應(yīng)用來看,我無需關(guān)心!
這樣的想法,類似于:我根本不需要知道我的前任、現(xiàn)任、后任女友是否是處女,因為我都直接讓她們做處女膜修復(fù)!從實際應(yīng)用來看,我無需關(guān)心!
很多事情,如果你足夠了解之,就能靈活掌控之!即所謂的駕馭能力。CSS細(xì)節(jié)了解,有助于你更好地駕馭CSS, 而不是被CSS調(diào)試,被瀏覽器劫持。
3~4兩的大閘蟹雖然也有人要,但是,多啊,不值幾個錢;但是半斤以上的大閘蟹的單價就要翻番。
盲從CSS reset的人也有人要,但是,多啊,不值幾個錢;但是,知根究底的人這身價就要翻番了。
如果你有自己想法,知根知底,你可能就是這樣做reset的:
body, h1, ..., dl, dd { margin: 0; }
dt
標(biāo)簽的reset只是白白浪費,增加頁面渲染負(fù)荷;padding
屬性值僅極少標(biāo)簽(ol
, ul
)有,其他標(biāo)簽無需浪費渲染重新設(shè)置。
//zxx: 對于淘寶首頁的渲染速度我就不說什么了
有不少人曾問我:“你的那個CSS架構(gòu)我用了,很不錯,使用很方便。但是,我經(jīng)常CSS庫的類名有5個甚至更多!而你寫的頁面很少會這樣,為什么呢?”
<span class="db l h24 lh24 b">注意:</span>我是……
如果你對CSS細(xì)節(jié)足夠掌握,可能您的使用就會是這樣:
<strong class="l lh24">注意:</strong>我是……
這就是我說過的,如果頁面開發(fā)工程師對CSS屬性理解不夠透徹,我的這種架構(gòu)對其而言反而會略顯吃力!
關(guān)于理解
你是否有這樣的調(diào)試經(jīng)歷:尼瑪IE(x)瀏覽器下出了個奇怪問題,哥哥我不知道原因啊原因啊原因,然后很苦逼地把覺得有可能的CSS屬性一個一個試驗——改一個刷一下,看看有沒有變好。
唉,可憐的娃,寶貴的青春就這么蹉跎掉了,省下來和前臺美女MM調(diào)調(diào)情也比這強(qiáng)多了~~
為什么我們需要深入理解CSS的一些表現(xiàn)?
1. 所謂“對癥下藥”,你要先知道這個癥,這個根才可以。同樣,當(dāng)我們對CSS的底層表現(xiàn)有一定的理解與認(rèn)識的時候,遇到一些看似奇怪的問題,我們可以一針見血,一語中的,分分鐘搞定,然后,聊天,喝茶,把妹~~
2. 所謂“發(fā)明創(chuàng)造”,你要先知道其基本原理,工作機(jī)制。同樣,當(dāng)我們面對CSS的一些特殊需求的時候,一些看似蛋疼的問題,我們可以發(fā)揮我們的創(chuàng)造性思維,創(chuàng)建一個屬于你的首創(chuàng)新方法,然后賣萌,邀功,得瑟~~
例如,我之前折騰過的inline-block兩端對齊等。
理解的對與錯
每個人的成長經(jīng)歷不同,大腦擅長處理的東西也不同,導(dǎo)致其看待與理解事物的方式也不同。因此,對于同一CSS表現(xiàn)的差異,每個人的理解都不同。
一旦有所差異,就有所謂的“對錯”之爭。估計不少人會拿《CSS權(quán)威指南》上的東西說事:你那種理解是錯誤的,CSS權(quán)威指南上說……或W3C官方文檔解釋說……
我大學(xué)電路老師最后一節(jié)課專門講了她的科學(xué)觀:何為科學(xué)?能夠自圓其說,自成體系即是科學(xué)。中醫(yī)算科學(xué)嗎?算!因其有一套自己解釋暢通的理論體系。
同樣,對于CSS的理解,我個人一直認(rèn)為什么對錯的爭執(zhí)等都是沒有意義的。如果你的解釋可以自圓其說,自成體系,且應(yīng)用無誤,哪怕你的解釋與什么規(guī)范啊權(quán)威啊八竿子都打不著,別人壓根理解不了,你都是對的,OK的!
拘泥只會限制自身的創(chuàng)造力以及認(rèn)知能力。火影的世界算是世界嗎?是,自圓其說,自成體系!海賊王的世界算是世界嗎?是自圓其說,自成體系。
因此,如果你是設(shè)計出身,或文學(xué)出身的。什么復(fù)雜邏輯,深奧解釋理解不了,你大可摒棄之,用你自己的世界去解釋其表現(xiàn),你的感性思維以及藝術(shù)情懷只會讓這個世界變得更精彩!那些自以為是,抱殘守缺的雜碎們就不用鳥他們,讓他們隨著時間消逝去吧~~
好比面對“浮動元素會讓外部高度塌陷的原因?”這個問題,你可以這樣解釋:
- 浮動是敏感詞
- 浮動是海市蜃樓
- 浮動是個不孝子,會讓爸爸顏面無存,顯得很矮小
- 浮動是個魔鬼,和絕對定位是兄弟,本都屬于天上人
- 浮動是中國,講究面子工程
- 浮動是中國股市,吸引屁民跟在左右,本身就是個泡沫
- ……
只要這類解釋能夠把其他所有的CSS表現(xiàn)都解釋地通,成為體系,都是正確且深入的理解。
四、如何突破?
知道問題在哪里,其實已經(jīng)解決了一大半。下面的問題如何實踐了!
楊過16年前就開始意識到要可以自創(chuàng)武功(類似于我們自創(chuàng)CSS實現(xiàn)),但是,最終實現(xiàn)確實N年以后,不斷的感悟以及練習(xí)才得以成功。
即使你再天才(楊過夠天才吧),機(jī)遇夠神奇(楊過經(jīng)歷夠神奇吧),也也是要會很多功夫和精力才能到達(dá)另外一個層次的。只是別人可能30年的,你只要20年而已(黃藥師說過,楊過20歲的武功修為其30歲才達(dá)到)。
我想了想,關(guān)于突破瓶頸的建議我有三個:戒驕戒躁、分享討論、打破重組。
關(guān)于戒驕戒躁
如果有人當(dāng)面說你:“旺財啊,你這個人有時候比較浮躁?。 蹦憧赡苄睦锘蜃焐暇袜止玖耍骸坝袉??我不覺得啊。我做事很認(rèn)真的?。 ?/p>
究竟如何呢?人們常說當(dāng)局者迷旁觀者清。
假設(shè)你看到了一個用法:
vertical-align:-2px;
你的反應(yīng)以及做法會是?
A. 我擦,原來vertical-align還支持?jǐn)?shù)值啊,學(xué)習(xí)了!
B. 喲,vertical-align支持?jǐn)?shù)值?我去查查~~呀,果然~~
C. 切,大驚小怪,我早就知道vertical-align支持?jǐn)?shù)值,包括負(fù)值了,百分比值~~
D. 阿拉,我要自己試驗下,新建個HTML頁面,做個簡單demo,看看兼容性什么的~~
E. 啊,什么,我剛掃視了,沒注意到~~
對應(yīng)下表:
選擇項 | 浮躁程度 | 原因 |
---|---|---|
A | 比較浮躁 | 用法合理性未作驗證,直接接收 |
B | 略微浮躁 | 快餐式的接收,接收證明的觀點,但未自己驗證,可能會遺留真實的使用細(xì)節(jié) |
C | 浮躁 | 自以為是是學(xué)習(xí)的大忌,看上去小小的屬性其實水很深 |
D | 不浮躁 | 實踐式的驗證其實是比較繁瑣,費時費力的,浮躁的人都是避免的,沉寂的人才能收心研究之 |
E | 相當(dāng)浮躁 | 好吧,如果這里都能pass掉,我就沒法再說什么了~~~ |
A, B的行為實際還是只停留在表層,D行為似乎蠻靠譜的,但是,實際上,你想比別人走得更遠(yuǎn),更快突破瓶頸,僅僅是將代碼再實踐一篇是不夠的。我們還需要思考,對比以及整理、分享等。
如果是我,我會更近一步,對比思考:vertical-align:-2px;
與margin-bottom:-2px;
之間有什么差異,我會試驗之~~
實際對比我會發(fā)現(xiàn)差異不大,但是我不會認(rèn)為其沒有差異,因為高中大學(xué)做實驗很基本的一條就是多個條件的實踐
,于是,我會使用vertical-align:-200px;
與margin-bottom:-200px;
再做一次驗證(當(dāng)然,會設(shè)置其他用來觀察的條件——背景色,邊框或其他元素),結(jié)果,差異非常明顯地出來了(這里先忽略IE6/IE7下margin-bottom負(fù)值極限bug):
vertical-align會增加容器的高度,而margin-bottom
負(fù)值則是減?。?/p>
您可以狠狠地點擊這里:vertical-align/margin-bottom負(fù)值的差異demo
然后,我可能會整理,然后……(接下面)
關(guān)于分享討論
分享看似把東西授予他人,自己做了吃力不討好的事情。而實際上,準(zhǔn)備分享內(nèi)容以及在分享的過程中,你會提煉總結(jié)思考你要分享的東西,這對于學(xué)習(xí)而言是非常重要的,這個階段好比模具成型,魚入網(wǎng)袋,妹子推倒。
討論的作用也很大,別人或中肯或傻逼的批評以及建議都會讓你發(fā)現(xiàn)你知識上的不完善或不準(zhǔn)確之處,群眾的眼睛是雪亮的。
還是說我自己,接上面,如果是我,我可能就會把vertical-align負(fù)值與margin-bottom負(fù)值的差異整理成一篇文章發(fā)布出來(實際上是不會的,因為內(nèi)容太少,質(zhì)量檔次不夠,一般只會穿插在其他文章中,比如本文)。在發(fā)布書寫制作demo的過程中,我肯定會有觀點的提煉等,我就會發(fā)現(xiàn)一些新的東西,比方說IE6/IE7的margin-bottom負(fù)值數(shù)值超過一定限度時候的兼容性問題。
在寫文章的時候,我可能會使用一些激烈的措辭,激發(fā)與他人的互動與討論,從別人的評論中查漏補(bǔ)缺,獲取新的知識。
當(dāng)然,每個人分享的方式可能不一樣。我因為嘴皮子的表達(dá)欠佳,因此,大多借助文章這個渠道分享與討論。傳播技術(shù)的同時自身也得到提高,如此一舉兩得的事情,何樂而不為呢!而你呢?如果你擅長交際組織什么的,分享會什么的,都是很贊的方式!
關(guān)于打破重組
華為貌似做過這樣的事情,所有的老員工一律辭職,自己再重新去應(yīng)聘。而且,好像類此的操作不只做了一次,“始作俑者”為任正非老先生。這種打破重組的效果如何呢?據(jù)說奇效,當(dāng)年華為業(yè)績可見一斑。
在突破瓶頸的時候,我們也可以,而且建議這么嘗試。限制于慣性思維中,是很難突破瓶頸的。我們可以將自己過往的一切全盤否定,然后重新再來,你可能就會看到另外一個自己。
舉個例子,如果你一直都是固定布局的,自己在心里默念三遍:固定布局就是個屎,我要投奔流體布局!如果你一直都是流體布局的,自己心里也默念三遍:流體布局就是個屎
,我要投奔固定布局!如果你固定/流體布局兼修,自己心里也默念三遍:什么固定/流體布局都是屎
,我要投奔時髦的響應(yīng)布局!
放開自己,擁抱未來,擁抱變化。舍棄過往,接受新穎的架構(gòu),思想,理念。你就會發(fā)現(xiàn),很短的時候,自己有了質(zhì)地提升。
其中玄奧我是很難道明,要看你自己能不能體會出來了!
五、事在人為
其實,廣大頁面屌絲們并不畏懼那些學(xué)習(xí)能力強(qiáng)的人,畏懼的是那些學(xué)習(xí)能力強(qiáng),同時,尼瑪學(xué)習(xí)又拼命的人。
頁面仔們,捫心自問下:我每天幾點下班?我每天下班后都干嘛了?我有專門花空余時間深入理解學(xué)習(xí)CSS的一些東西嗎?我能夠連續(xù)堅持?jǐn)?shù)月嗎?
最后,我只說一句話:“吃得苦中苦,方為人上人”。
復(fù)制本文鏈接 文章為作者獨立觀點不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評論!每天贏獎品
點擊 登錄 后,在評論區(qū)留言,系統(tǒng)會隨機(jī)派送獎品
2012年成立至今,是國內(nèi)備受歡迎的設(shè)計師平臺,提供獎品贊助 聯(lián)系我們
AI輔助海報設(shè)計101例
已累計誕生 737 位幸運(yùn)星
發(fā)表評論 為下方 1 條評論點贊,解鎖好運(yùn)彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓