在线国产精品播放,综合天堂久久久久久久,亚洲小说区图片

高流量網站CSS開發技術

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

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

亞馬遜購買《高流量網站CSS開發技術》

本書適合以下讀者：

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

通過閱讀這本書，你將了解以下內容：

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

最后一章提供了一套簡單的CSS框架，是我們為本書定制的，其中演示了大量書中討論過的內容，包括創建這個框架時所遵循的流程。書后的四個附錄提供了規范和流程的具體例子，供讀者參考。

作者簡介：

Antony Kennedy

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

Inayaili de León

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

CSS選擇器的特殊性

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

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

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

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

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

特殊性計算

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

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

根據W3C規范（

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

b 等于id選擇器的數目；

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

d 等于元素名和偽元素的數目。

非CSS語法的標記（如font屬性），特殊性都歸為0。基于這一系列規則，以下選擇器的特殊性為 1,0,0,0 （a=1，b=0，c=0，d=0）：

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

因為這里是內聯CSS，a=1，其余數字是0。記住，假如在非內聯的鏈接樣式表中，有一處帶10個id選擇器（特殊性為0,10,0,0）的規則，它的優先級仍然不如以上選擇器——特殊性的計算不是基于十進制升位的，后面的數再高也不能升到前一位：a=1的規則將始終優先于其他a=0的規則。

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

article section h1.title {
    ...
}

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

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

!important聲明

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

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

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

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

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

其結果將等價于以下聲明：

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;
}

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

命名空間和特殊性

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

<body>

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

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

如果由于某種原因，我們需要在同一網頁內再次覆蓋此設置，就需要再添加一個class來指定特殊的標題，并創建一個更特殊的規則：

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

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