你們知道前端大神是怎么學(xué)CSS的嘛

有人說，要成為前端高手很容易：先學(xué)好 HTML/CSS/JavaScript 三劍客，再學(xué)會三大前端框架——Vue/React/Angular，快則三個月，慢則半年，前端的工作就沒有搞不定的了。

但實際上，會語言、會用框架就算是一名優(yōu)秀的前端程序員嗎？

其實這是一個認(rèn)知誤區(qū)，框架的能力不代表前端程序員的能力。遺憾的是，不少前端程序員在工作中遇到瓶頸之后，就將自己的困境歸咎于公司管理或者行業(yè)大環(huán)境，卻不從自身找問題。

雖然前端技術(shù)門檻低，但也極具深度，要成為真正的高手并不容易。要突破只會使用框架的水平，還要深入學(xué)習(xí)語言。

CSS是 HTML/CSS/JavaScript 三劍客中相對簡單的，但把它用好了能使效率倍增。有一位前端大神對CSS進(jìn)行深入研究，挖掘出許多有用的特性，刷新了前端程序員的認(rèn)知：原來CSS也可以這么玩！

現(xiàn)在，我們就跟著大神一起學(xué)CSS，走向高手之路吧。

01

大神是怎么學(xué)CSS的

張鑫旭，目前在閱文集團(tuán)用戶體驗設(shè)計部（YUX） 擔(dān)任前端技術(shù)專家 ，他主導(dǎo)開發(fā)的LuLu UI是一款面向桌面端和移動端網(wǎng)頁開發(fā)的開源組件庫，支持多個千萬級PV的大型項目。他的前端功力甚是了得，是國內(nèi)公認(rèn)的大神級程序員。

張鑫旭從 2009 年開始寫原創(chuàng)技術(shù)文章，至今已創(chuàng)作了 800 多篇文章，年訪問量接近千萬次。在他的個人博客上，就有對 CSS 技術(shù)長達(dá)十多年探索的記錄，影響了許多前端程序員的技術(shù)發(fā)展之路。

提到對CSS的學(xué)習(xí)，張鑫旭認(rèn)為首先要理解這門語言的特殊性。CSS是一門建立在規(guī)則上的語言，和注重邏輯性的編程語言是不同的。習(xí)慣使用C/C++/Java的程序員，在初次接觸CSS時可能會將其看作一張大號的配置表，認(rèn)為它的作用就是把網(wǎng)頁屬性單獨保存出來而已。

這樣就限制了對CSS的進(jìn)一步認(rèn)識，忽視了它在特性間建立聯(lián)系的能力。如何體系化地看待CSS語言？張鑫旭將多年的學(xué)習(xí)心得和工作經(jīng)驗總結(jié)出來，以魔法世界來類比，從宏觀上說明CSS的結(jié)構(gòu)與特征。

在CSS世界中，HTML是魔法石，選擇器是選擇法器，CSS屬性是魔法師，屬性值是魔法技能。不同的瀏覽器就是獨立的王國，它可以決定是否允許使用魔法石（HTML 標(biāo)簽屬性）、是否允許新魔法師“入籍”（CSS3新屬性）、是否允許魔法師使用某些新技能（CSS新屬性值）。

操作系統(tǒng)是王國所在的世界，不同的操作系統(tǒng)就像平行的世界。例如在Windows上，edge瀏覽器最強大；在OS X與iOS上，統(tǒng)治者是Safari；在 Android上，WebKit就是王。

這樣一看，CSS的世界立即鮮活起來，不再是靜態(tài)割裂的配置，而是與HTML一同構(gòu)成的整體。在這個世界里，CSS選擇器是支柱，接下來讓我們跟著張大神深入CSS 選擇器的世界吧。

02

CSS選擇器：CSS世界的支柱

我們先來了解一些基本概念。CSS選擇器可以分為4種，下面逐一說明：

1. 選擇器：CSS聲明塊前的標(biāo)簽、類名等。例如body { font: menu; }

2. 選擇符：有5種，分別是表示后代關(guān)系的空格（ ）、表示父子關(guān)系的箭頭（>）、表示相鄰兄弟關(guān)系的加號（+）、表示兄弟關(guān)系的波浪線（~），以及表示列關(guān)系的雙管道（||）；

3. 偽類：名稱前以冒號（:）分隔，通常與瀏覽器行為和用戶行為相關(guān)聯(lián)，偽類和選擇符相互配合可以實現(xiàn)非常多的純CSS交互效果；

4. 偽元素：名稱前以兩雙冒號（::）分隔，可用于設(shè)置元素指定部分樣式。常用選項有 ::before、::after、::first-letter 和::first-line 等。

CSS世界的支柱由上述4種選擇器構(gòu)成，它們與HTML結(jié)構(gòu)、瀏覽器行為、用戶行為相互依存和作用。在不斷的碰撞下，將CSS選擇器強大的功能發(fā)揮出來。

對一些前端程序員來說，CSS選擇器不過“就那么點東西”。如果他們聽說有人專門為 CSS選擇器技術(shù)寫了一本書，估計會瞪大眼睛問：“這有什么好寫的？”

張鑫旭一定會很有禮貌地遞過去一本《CSS 選擇器世界（第2版）》，然后謙虛地說：“看看我寫的這本書，里面的知識有沒有你不知道的？”

▲ 點擊，即可購書

如果只掌握常用的幾個基礎(chǔ)選擇器，也可以把頁面做出來。但這樣做事，就好像手里拿把錘子，看什么都是釘子一樣。而前端技術(shù)是一個快速發(fā)展的領(lǐng)域，指望一年經(jīng)驗重復(fù)用十年是不現(xiàn)實的。

比方說，有時為了實現(xiàn)一個復(fù)雜的交互行為，辛辛苦苦寫了幾百行JavaScript代碼，結(jié)果CSS只用一行代碼就能搞定，這就是知道和不知道的差距。

《CSS選擇器世界（第2版）》并不是窮舉所有CSS選擇器的說明書，而是以一種體系化的方式梳理CSS選擇器知識。同時張大神結(jié)合自己多年工作中踩過的坑，給出了許多含金量超高的最佳實踐建議。

所以這不是一本簡單的入門書，一些前端老人都未必全都知道里面的知識。對追求進(jìn)步，想要突破技術(shù)瓶頸的前端程序員來說，本書是非常好的進(jìn)階之路。

03

飛速發(fā)展的CSS

CSS規(guī)范由W3C組織維護(hù)更新，伴隨著互聯(lián)網(wǎng)從桌面端到移動端的發(fā)展，CSS規(guī)范也在快速地推陳出新。為了適應(yīng)Web技術(shù)發(fā)展的要求，CSS工作組決定從CSS2.1開始將CSS按特性劃分為獨立的模塊，這些模塊按自己的進(jìn)度去實現(xiàn)標(biāo)準(zhǔn)化。

這使得從形式上來說，CSS3并沒有一個具體的標(biāo)準(zhǔn)，而是由不斷擴(kuò)充的模塊構(gòu)成的標(biāo)準(zhǔn)集合。CSS工作組會定期發(fā)布成熟模塊組的快照表，對前端程序員來說，要保持對CSS標(biāo)準(zhǔn)的敏感度，追蹤最新的技術(shù)進(jìn)展。

張鑫旭在十多年的研究過程中，對CSS標(biāo)準(zhǔn)密切關(guān)注，時時更新自己的知識體系。他在創(chuàng)作《CSS選擇器世界》的過程中，不僅要盡可能地囊括有潛力的新特性，還要保持技術(shù)前瞻性，確信所選特性在未來會有廣泛的影響。

所以，在《CSS 選擇器世界》第1版于 2019 年出版之后不到3年時間，張鑫旭又對原有內(nèi)容進(jìn)行了大幅修改，推出了《CSS選擇器世界（第2版）》。在第1版的基礎(chǔ)上，第2版對選擇器的特性、兼容性進(jìn)行了更新，介紹了標(biāo)準(zhǔn)中新增的多個選擇器。

其中新增的:has()偽類讓張大神翹首以盼了十幾年，因為它可以實現(xiàn)真正意義上的父選擇器效果。本書還介紹了支持音視頻開發(fā)的選擇器，使得富媒體開發(fā)更加便捷。另外，張鑫旭將這幾年積累的最新的經(jīng)驗也一并寫到了第2版中。

張鑫旭自己也在《CSS選擇器世界（第2版）》的前言中感嘆：

“CSS的發(fā)展太快了。不過這也是前端技術(shù)的特點，如果感覺自己有點找不著北，那就不妨跟隨大神的腳步一起前進(jìn)吧?！?/span>

04

CSS三部曲的世界

除了《CSS選擇器世界（第2版）》，張鑫旭另外還創(chuàng)作了《CSS世界》和《CSS 新世界》，合稱為“CSS 世界三部曲”。

這是張鑫旭給前端程序員貢獻(xiàn)的一套CSS 寶藏，可以說啃下三部曲，CSS就能達(dá)到最佳實踐、信手拈來的水平。

《CSS世界》以“流”為線索，全面深入地講解從結(jié)構(gòu)、內(nèi)容到美化等方面的大量知識點，是CSS世界的基礎(chǔ)?！禖SS新世界》則對CSS3之后的上百個新特性進(jìn)行了介紹，分享了張大神諸多獨門心法。

《CSS世界》和《CSS新世界》相互補充，《CSS世界》中講解的都是CSS2.1的知識，《CSS新世界》講解的都是CSS2.1之后的知識，再加上《CSS選擇器世界（第2版）》，這3本書中的內(nèi)容一起構(gòu)成CSS這門語言的完整面貌。

前端技術(shù)領(lǐng)域發(fā)展快，各種框架層出不窮，這也是讓前端程序員產(chǎn)生職業(yè)倦怠的原因之一。但這不能成為前端程序員原地停留的借口，我們應(yīng)該一面深挖技術(shù)根本，一面積極擁抱變化。

跟著張鑫旭大神練好CSS，成為前端高手吧！