高流量網(wǎng)站CSS開發(fā)技術(shù)

講解CSS基礎(chǔ)知識(shí)、CSS高級(jí)技巧、CSS3選擇器/屬性，以及各種CSS設(shè)計(jì)模式的圖書可謂浩如煙海。本書無(wú)意在這些領(lǐng)域標(biāo)新立異，而是探討了大型團(tuán)隊(duì)或多個(gè)團(tuán)隊(duì)一同工作的情況，以及處理包含眾多頁(yè)面或子站點(diǎn)且訪問量相當(dāng)可觀的網(wǎng)站時(shí)，所要面對(duì)的挑戰(zhàn)。我們不介紹如何用最新最炫的技術(shù)實(shí)現(xiàn)圖片替換或跨瀏覽器的圓角，而將關(guān)注點(diǎn)放在讓團(tuán)隊(duì)中的新人更容易理解原有代碼，并在其上添磚加瓦，讓網(wǎng)頁(yè)中的CSS代碼從一開始就經(jīng)過深思熟慮，且以完善、高效的方式構(gòu)建。

本書對(duì)新手和專家同樣有用。不過，若是你已經(jīng)有一些HTML和CSS的使用經(jīng)驗(yàn)，或至少熟悉相關(guān)語(yǔ)法，那再好不過了。對(duì)代碼重用、模塊化、健壯性和實(shí)用性的討論，將貫穿本書各章。

亞馬遜購(gòu)買《高流量網(wǎng)站CSS開發(fā)技術(shù)》

本書適合以下讀者：

  • 所有在高流量網(wǎng)站工作的人，所謂高流量指獨(dú)立訪問用戶數(shù)日均1萬(wàn)以上，或峰值超過1萬(wàn)；
  • 所有在大型網(wǎng)站工作的人，大型網(wǎng)站至少要包括2000個(gè)獨(dú)立網(wǎng)頁(yè)，或30個(gè)子網(wǎng)站；
  • 所有在公司負(fù)責(zé)網(wǎng)站開發(fā)的人，所在公司有大量員工在同一個(gè)代碼庫(kù)上工作，參與修改CSS的程序員超過30人；
  • 所有在有潛力的公司工作、希望為公司W(wǎng)eb開發(fā)建立一套良好流程的人；
  • 所有缺少大型團(tuán)隊(duì)工作經(jīng)驗(yàn)的開發(fā)人員。

通過閱讀這本書，你將了解以下內(nèi)容：

  • 流程的價(jià)值；
  • 如何在員工和團(tuán)隊(duì)之間共享知識(shí)；
  • 如何盡快讓新來(lái)的CSS程序員上手工作；
  • 如何將CSS修改納入構(gòu)建、部署流程；
  • 如何編寫可重用、模塊化的CSS；
  • 如何最大限度提升網(wǎng)站性能；
  • 如何保持品牌的一致性；
  • 跨瀏覽器和無(wú)障礙訪問的CSS最佳實(shí)踐；
  • 動(dòng)態(tài)CSS技術(shù)。

最后一章提供了一套簡(jiǎn)單的CSS框架，是我們?yōu)楸緯ㄖ频?，其中演示了大量書中討論過的內(nèi)容，包括創(chuàng)建這個(gè)框架時(shí)所遵循的流程。書后的四個(gè)附錄提供了規(guī)范和流程的具體例子，供讀者參考。

作者簡(jiǎn)介：

Antony Kennedy

自2010年6月至今先后在蘋果公司擔(dān)任資深前端工程師和前端設(shè)計(jì)主管，曾在BBC、BSkyB、Tesco、迪士尼和Channel4等多家公司的高流量網(wǎng)站擔(dān)任前端研發(fā)重要職位。在Web開發(fā)技術(shù)領(lǐng)域打拼近20年，對(duì)CSS、HTML5、JavaScript、敏捷開發(fā)和持續(xù)交付等具有深刻獨(dú)到的見解。關(guān)于他的更多信息，請(qǐng)查看 http://uk.linkedin.com/in/kennedyantony。

Inayaili de León

Web設(shè)計(jì)師，目前受雇于Canonical公司（Ubuntu的創(chuàng)建者）。她熱衷研究如何在Web設(shè)計(jì)過程創(chuàng)建清晰、語(yǔ)義化和高效的HTML/CSS。Inayaili熱愛Web，熱愛自己的工作，享受每天都能獲取新知識(shí)的生活。她設(shè)計(jì)的網(wǎng)頁(yè)簡(jiǎn)潔、美觀、易用，http://yaili.com/ 有她的更多介紹，以及她的一些優(yōu)秀的設(shè)計(jì)作品。

更多閱讀：

CSS選擇器的特殊性

使用CSS的時(shí)候，要對(duì)特殊性（specificity）進(jìn)行慎重的考慮和規(guī)劃，在CSS文件較大，頻繁需要重寫和導(dǎo)入的情況下，更是如此，而這在高流量網(wǎng)站更容易發(fā)生。

一條不錯(cuò)的經(jīng)驗(yàn)法則是，在開始編寫CSS文件時(shí)，首先使用比較寬泛的選擇器，在過程中再酌情增加特殊性。否則的話，工作要困難得多，而且不可避免地會(huì)產(chǎn)生過于特殊、無(wú)法重用的選擇器，以及過于冗長(zhǎng)、缺乏靈活性的樣式表。

依賴選擇器順序的樣式表更脆弱，還可能導(dǎo)致不必要的冗余。當(dāng)你需要重寫某個(gè)規(guī)則時(shí)，你會(huì)在文件后面再新建一個(gè)同樣的規(guī)則，然后再在它后面新建，直到你重復(fù)一遍又一遍同樣的事情。如果樣式表的順序由于某種原因發(fā)生變化，你要應(yīng)用到元素的那些屬性（通常是在最后定義的）將會(huì)失效，因?yàn)樗蕾囉谶x擇器的順序。依賴特殊性而不是選擇器的順序，將使得樣式表更易于編輯、維護(hù)，便于將來(lái)進(jìn)行重構(gòu)，同時(shí)也更健壯。

選擇器的特殊性也會(huì)影響一個(gè)網(wǎng)站的性能，進(jìn)行DOM（Document Object Model，文檔對(duì)象模型）查詢時(shí)，選擇器各個(gè)部分是按照反直覺的順序（從右到左）來(lái)進(jìn)行計(jì)算的，選擇器的特殊性和復(fù)雜度越高，對(duì)性能的影響越大。

說(shuō)到底，CSS文件的模塊化和靈活性程度，對(duì)于較深層的元素是否要采用高特殊性的規(guī)則，是由你自己的選擇來(lái)決定的。然而在團(tuán)隊(duì)中，應(yīng)當(dāng)將特殊性作為首要關(guān)注的問題，來(lái)對(duì)樣式表進(jìn)行規(guī)劃。

特殊性計(jì)算

在級(jí)聯(lián)計(jì)算中指定一個(gè)CSS規(guī)則的權(quán)重時(shí)，會(huì)首先根據(jù)重要性（是否有!importance）和CSS來(lái)源對(duì)規(guī)則進(jìn)行排序。重要性和來(lái)源相同的規(guī)則，就按特殊性排列：特殊性高的選擇器會(huì)覆蓋特殊性低的選擇器。最后，如 果兩個(gè)選擇器具有同樣的來(lái)源、重要性和特殊性，寫在樣式表后面的那個(gè)規(guī)則就會(huì)覆蓋寫在前面的規(guī)則。這也適用于單一的屬性，因此，如果在同一個(gè)規(guī)則中多次聲明了相同的屬性，最后的聲明就會(huì)覆蓋前面的聲明。

因?yàn)槭褂聾import聲明導(dǎo)入的樣式表必須要寫在其他規(guī)則之前，如果在CSS文件后面出現(xiàn)的非導(dǎo)入規(guī)則，與導(dǎo)入文件中的規(guī)則具有同樣的權(quán)重，導(dǎo)入規(guī)則將被覆蓋（因?yàn)檫x擇器的順序，后面的覆蓋前面的）。

根據(jù)W3C規(guī)范（

非CSS語(yǔ)法的標(biāo)記（如font屬性），特殊性都?xì)w為0。基于這一系列規(guī)則，以下選擇器的特殊性為 1,0,0,0 （a=1，b=0，c=0，d=0）：

<section style="padding-bottom: 10px;">

因?yàn)檫@里是內(nèi)聯(lián)CSS，a=1，其余數(shù)字是0。記住，假如在非內(nèi)聯(lián)的鏈接樣式表中，有一處帶10個(gè)id選擇器（特殊性為0,10,0,0）的規(guī)則，它的優(yōu)先級(jí)仍然不如以上選擇器——特殊性的計(jì)算不是基于十進(jìn)制升位的，后面的數(shù)再高也不能升到前一位：a=1的規(guī)則將始終優(yōu)先于其他a=0的規(guī)則。

以下選擇器更復(fù)雜一些，特殊性為0,0,1,3（a=0，b=0，c=1，d=3）：

article section h1.title {
    ...
}

因?yàn)椴皇莾?nèi)聯(lián)的，a=0；因?yàn)闆]有id，b=0；因?yàn)橛幸粋€(gè)class選擇器，c=1；因?yàn)橛腥齻€(gè)元素選擇器，d=3。

基于這一系列算法來(lái)對(duì)特殊性進(jìn)行計(jì)算，可能令人望而生畏。但實(shí)際上，有了一些經(jīng)驗(yàn)后，很容易看出一個(gè)選擇器比起另一個(gè)選擇器特殊性是高還是低，如有一個(gè)或兩個(gè)id選擇器，或其他類似的明顯提示。編寫CSS時(shí)應(yīng)該小心，如果沒有必要，不要?jiǎng)?chuàng)建高特殊性的選擇器。如果遇到棘手的情況，類似Firebug或Safari Web Inspector等工具將幫助你了解特殊性如何應(yīng)用于元素，它們能按照特殊性排序來(lái)顯示規(guī)則，將特殊性更高的規(guī)則顯示在最上面，并將被特殊性更高的規(guī)則覆蓋的屬性用刪除線劃掉。有關(guān)內(nèi)容詳見第10章。然而應(yīng)該記住兩件重要的事情：內(nèi)聯(lián)CSS要比嵌入或鏈接CSS優(yōu)先級(jí)更高；一個(gè)ID選擇器要比任意數(shù)量的class、屬性或元素選擇器優(yōu)先級(jí)更高。

!important聲明

如果在縮寫屬性中使用了!important聲明，就等于用!important重新逐個(gè)聲明了每個(gè)子屬性，而這樣可能會(huì)導(dǎo)致屬性恢復(fù)為初始默認(rèn)值。

例如，假設(shè)我們有這樣一個(gè)選擇器：

h1 {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
}

然后在樣式表的后面有如下聲明：

h1 {
    font: 18px Arial, sans-serif !important;
}

其結(jié)果將等價(jià)于以下聲明：

h1 {
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: normal !important;
    font-size: 18px !important;
    line-height: normal !important;
    font-family: Arial, sans-serif !important;
}

發(fā)生這種情況的原因是，在!imporot聲明內(nèi)，某些屬性沒有獲得明確定義（如本例中的font-style、font-variant、font-weight和line-height），這時(shí)，即使較低特殊性的規(guī)則已經(jīng)存在，它們也會(huì)恢復(fù)到屬性規(guī)范中所規(guī)定的初始值（如本例中的font-style: italic）。

命名空間和特殊性

有一些情況下，高特殊性的選擇器是必要的。例如要?jiǎng)?chuàng)建在不同網(wǎng)頁(yè)、子網(wǎng)站、迷你網(wǎng)站，甚至第三方網(wǎng)站廣泛使用的部件和代碼片段，常見的做法是對(duì)這部分代碼采用命名空間，對(duì)CSS來(lái)說(shuō)，基本上意味著要通過一個(gè)特殊的class、id或class/id前綴，將其分離出來(lái)。要對(duì)一個(gè)頁(yè)面應(yīng)用不同的風(fēng)格，也經(jīng)常會(huì)使用命名空間，這種情況下，我們將為body元素添加一個(gè)id或class，例如：

<body>

重要的是要認(rèn)識(shí)到，雖然在為不同頁(yè)面或頁(yè)面不同部分創(chuàng)建不同樣式時(shí)，這是一種常見而簡(jiǎn)單的方法，但它會(huì)影響特殊性。當(dāng)在CSS里指定這些頁(yè)面或代碼片段時(shí)，我們不得不在規(guī)則中引入一個(gè)class或id，從而增加了它的特殊性，導(dǎo)致它更難被覆蓋。例如，在定義了class="home"的頁(yè)面中，我們想要讓h2標(biāo)題比其他頁(yè)面更大，可以用以下規(guī)則設(shè)置：

h2 {
    font-size: 24px;
}
.home h2 {
    font-size: 36px;
}

如果由于某種原因，我們需要在同一網(wǎng)頁(yè)內(nèi)再次覆蓋此設(shè)置，就需要再添加一個(gè)class來(lái)指定特殊的標(biāo)題，并創(chuàng)建一個(gè)更特殊的規(guī)則：

.home h2.highlight {
    font-size: 30px;
}

這樣像滾雪球一樣，規(guī)則的特殊性越來(lái)越高，難免會(huì)導(dǎo)致CSS不必要的復(fù)雜度。應(yīng)對(duì)的秘訣是針對(duì)這種情況仔細(xì)進(jìn)行規(guī)劃。貫穿整站的設(shè)計(jì)元素要采用的變化越多，這種情況的發(fā)生就會(huì)越頻繁。而如果沒有建立一套設(shè)計(jì)庫(kù)，或雖然建立了設(shè)計(jì)庫(kù)，但更新不及時(shí)，這個(gè)問題就會(huì)更嚴(yán)重。你應(yīng)該建立一份具有良好適應(yīng)性的樣式表，并定義一組指導(dǎo)標(biāo)準(zhǔn)，告訴開發(fā)者如何具體問題具體處理——為了CSS的靈活性，不要用更高特殊性的選擇器去反復(fù)覆蓋。但刻意避免class/id的辦法也不適用于高流量網(wǎng)站，在某些時(shí)候，class/id方案的效率和健壯性更好。

使用工具

使用Chrome的開發(fā)者工具、Safari的Web Inspector或Firefox的Firebug等工具能幫助你了解哪些屬性優(yōu)先級(jí)更高，哪些屬性覆蓋了其他屬性。這些工具也可以顯示用戶代理樣式表和計(jì)算值，即使它們沒有在CSS中聲明。

使用工具，你仍然需要理解級(jí)聯(lián)的工作原理，但工具減少了調(diào)試過程中的痛苦。

本文摘自《高流量網(wǎng)站CSS開發(fā)技術(shù)》（人民郵電出版社，2013）。要更多了解文章中提到的CSS脆弱性、前端性能優(yōu)化、設(shè)計(jì)庫(kù)、開發(fā)工具等內(nèi)容，可閱讀該書相關(guān)章節(jié)。

uisdcer專欄作者

文章 46 人氣 177.3w

優(yōu)秀設(shè)計(jì)師
收藏
點(diǎn)贊

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。

繼續(xù)閱讀本文相關(guān)話題

文章目錄