日本成人中文字幕,青青青伊人色综合久久,香蕉久久夜色精品国产更新时间

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

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

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

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

本書適合以下讀者：

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

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

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

最后一章提供了一套簡單的CSS框架，是我們?yōu)楸緯ㄖ频模渲醒菔玖舜罅繒杏懻撨^的內(nèi)容，包括創(chuàng)建這個框架時所遵循的流程。書后的四個附錄提供了規(guī)范和流程的具體例子，供讀者參考。

作者簡介：

Antony Kennedy

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

Inayaili de León

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

CSS選擇器的特殊性

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

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

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

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

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

特殊性計算

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

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

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

a 如果該聲明是在style屬性中定義的，則為1，否則為0；

b 等于id選擇器的數(shù)目；

c 等于屬性選擇器、class和偽class的數(shù)量；

d 等于元素名和偽元素的數(shù)目。

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

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

因為這里是內(nèi)聯(lián)CSS，a=1，其余數(shù)字是0。記住，假如在非內(nèi)聯(lián)的鏈接樣式表中，有一處帶10個id選擇器（特殊性為0,10,0,0）的規(guī)則，它的優(yōu)先級仍然不如以上選擇器——特殊性的計算不是基于十進制升位的，后面的數(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 {
    ...
}

因為不是內(nèi)聯(lián)的，a=0；因為沒有id，b=0；因為有一個class選擇器，c=1；因為有三個元素選擇器，d=3。

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

!important聲明

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

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

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

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

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

其結(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），這時，即使較低特殊性的規(guī)則已經(jīng)存在，它們也會恢復(fù)到屬性規(guī)范中所規(guī)定的初始值（如本例中的font-style: italic）。

命名空間和特殊性

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

<body>

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

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

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

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

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