CSS · isobar前端代碼規范及最佳實踐

[TOC] 網頁的第二個組件就是在層疊樣式表（CSS）中包含的表現信息。Web瀏覽器成功實現CSS后，整整一代web開發者對他們網站的外觀和體驗擁有了全部的控制權。正如網頁信息在語義方面由?[HTML 標記](http://coderlmn.github.io/code-standards/#markup)?描述， CSS 從表現方面則是通過對視覺屬性的定義來描述網頁。 CSS 的強大之處在于，這些屬性可以混合并通過各種標示符匹配，它可以通過樣式規則的分層（”層疊“）來控制頁面的布局和視覺特征。 ### 編碼總體原則 * 從外部文件加載CSS，盡可能減少文件數。加載標簽必須放在文件的 HEAD 部分。 * 用 LINK 標簽加載，[永遠不要用@import](http://blog.amodernfable.com/2008/01/21/thoughts-on-linking-to-stylesheets/)。加載樣式表 ~~~ <link rel="stylesheet" type="text/css" href="myStylesheet.css" /> ~~~ 不要用內聯式樣式 ~~~ <p style="font-size: 12px; color: #FFFFFF">This is poor form, I say</p> ~~~ * 不要在文件中用內聯式引入的樣式，不管它是定義在樣式標簽里還是直接定義在元素上。這樣會很難追蹤樣式規則。 * 使用?[normalize.css](http://necolas.github.com/normalize.css/)?讓渲染效果在不同瀏覽器中更一致。 * 使用類似?[YUI fonts.css](http://developer.yahoo.com/yui/fonts/)?的字體規格化文件。 * 定義樣式的時候，對樣式在頁面只出現一次的元素用id，其他的用class。 * 理解?[層疊和選擇器的明確度](http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html)?，這樣你就可以寫出非常簡潔且高效的代碼。 * 編寫性能優化的選擇器。盡可能避免使用開銷大的CSS選擇器。例如，避免 * 通配符選擇器，也不要疊加限定條件到 ID 選擇器（例如?`div#myid`）或 class 選擇器（例如?`table.results`）上。這對于速度至上并包含了成千上萬個DOM元素的web應用來說尤為重要。更多相關內容請參閱 MDN 上的這篇?[《編寫高效CSS》](https://developer.mozilla.org/en/Writing_Efficient_CSS)。 ### CSS盒子模型深入學習和理解CSS及基于瀏覽器的盒子模型，對于掌握CSS布局的基礎是非常必要的。 ![CSS Box Model](https://box.kancloud.cn/2015-08-05_55c1b96cecc5d.png "CSS Box Model") 3D CSS 盒子模型示意圖，?由?[Jon Hicks](http://hicksdesign.co.uk/boxmodel/)?繪制。 ### CSS 校驗我們一般不用?[W3C 校驗器](http://jigsaw.w3.org/css-validator/)。 ### CSS 格式最低要求：選擇器單獨占一行，每個屬性占一行。屬性聲明要有縮進。作為提高的要求，關聯或孩子樣式要增加2-4個空格的縮進。這樣有利于分層查看和組織，產生（對某些人來說）可讀性更好的樣式表。另外，在給一個樣式指定多個選擇器的時候，把每個選擇器單獨放一行是個好主意。這樣可以避免一行變得太長，也能提高可讀性及版本控制流程。 ~~~ .post-list li a{ color:#A8A8A8; } .post-list li a:hover{ color:#000; text-decoration:none; } .post-list li .author a, .post-list li .author a:hover{ color:#F30; text-transform:uppercase; } ~~~ 在多個開發者協作環境下，避免用單行CSS格式，因為這樣會給版本控制帶來問題。 #### 字母排序如果你對性能情有獨鐘，?[對CSS屬性進行字母排序有利于在GZIP壓縮中識別大量可重復的特征](http://www.barryvan.com.au/2009/08/css-minifier-and-alphabetiser/)。 ### Classes vs. IDs 對于所用的樣式只出現一次的元素，給它設一個id屬性。這個屬性只會應用于該元素，不會用到其他地方。Class屬性則可以用到多個具有相同樣式屬性的元素上。具有相同外觀和表現的元素可以具有相同的class名。 ~~~ <ul id="categories"> <li class="item">Category 1</li> <li class="item">Category 2</li> <li class="item">Category 3</li> </ul> ~~~ ### 選擇器命名的慣例無論是 ID 還是 class，對任何東西最好總是根據?**它是什么**?而不是?**它看上去是什么樣子**?來命名。比如一個頁面上的特別提示的 class 名是?`bigBlueText`?（大藍字），可它的樣式早就被改成紅色小字體，這個名字就沒意義了。使用更聰明的慣例如?`noteText`?（提示文字）就好多了，因為即使視覺樣式改變了，它也還是管用的。 ### 選擇器 [CSS3 選擇器](http://www.w3.org/TR/2009/PR-css3-selectors-20091215/)?規格引入了一整套對于更好地選擇元素極其有用的?[CSS 選擇器](http://www.w3.org/TR/css3-selectors/#selectors)。 #### 偽類 [偽類](http://www.w3.org/TR/css3-selectors/#pseudo-classes)?使你能動態地修飾網頁內容的樣式。有些偽類從CSS1 （`:visited, :hover`等）和 CSS2 （`:first-child, :lang`）那時候開始就有了。CSS3又往列表里加入了16個新的偽類，這些偽類對于動態地修飾網頁內容的樣式特別有用。?[學習如何深度使用偽類](http://www.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/)。 #### 組合及屬性選擇器 [組合選擇器](http://www.w3.org/TR/css3-selectors/#combinators)?提供了為特定元素選擇其后代元素、孩子元素或兄弟元素的快捷方式。 [屬性選擇器](http://www.w3.org/TR/css3-selectors/#attribute-selectors)?適用于具有特定屬性和/或特定值的元素。正則表達式的知識對屬性選擇大有幫助。 #### 明確度瀏覽器會通過?[計算選擇器的明確度](http://www.w3.org/TR/2009/PR-css3-selectors-20091215/)?來決定應用哪個CSS規則。如果兩個選擇器都適用于同樣的元素，**具有更高明確度的那個會勝出**。 ID 選擇器比屬性選擇器明確度高，class 選擇器比任何數量的元素選擇器明確度高。盡量使用 ID 選擇器來提高明確度。有時候我們可能會想方設法給一個元素應用一條CSS規則，但用盡方法也不能如愿。這種情況有可能是因為我們使用的選擇器比另外一個的明確度低，所以明確度高的另一個選擇器里的屬性就比我們想應用的選擇器優先了。這種情況在更大或更復雜的樣式表里更為常見。在小一些的項目里，通常這不是大問題。 ##### 計算明確度當你在一個很大很復雜的樣式表上干活的時候，知道如何計算選擇器的明確度會有很大幫助，會節約你的時間，并讓你的選擇器更有效率。明確度的計算方式是對你的CSS的各種組件計數，并用 (a,b,c,d) 格式表達出來。 * 元素，偽元素: d = 1 – (0,0,0,1) * 類，偽類，屬性: c = 1 – (0,0,1,0) * Id: b = 1 – (0,1,0,0) * 內聯樣式: a = 1 – (1,0,0,0) 不過，也許使用現成的明確度計算器更好一些。 * [明確度計算器](http://specificity.keegan.st/) * [你應該了解的關于明確度的一些事](http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/) * [IE 明確度 bugs](http://www.brunildo.org/test/IEASpec.html#a) 使用?`!important`?會覆蓋掉所有的明確度，不管它有多高。因此我們傾向于避免使用它。大部分時候是沒必要用它的。即使你需要覆蓋某個你訪問不到的樣式表里的選擇器，往往也會有其他的辦法去覆蓋。盡可能避免使用它。 ### 像素 vs. Em 我們使用?`px`?作為定義?`font size`?的度量單位，因為它能提供對文本的絕對控制。我們知道為字體大小使用?`em`?單位一度很流行，這樣可以解決 IE6 無法改變基于像素的文本大小的問題。不過，現在所有的主流瀏覽器（包括?IE7?和?IE8）都支持基于像素單位的文本大小和/或整頁縮放。既然?IE6?被廣泛認為已廢棄，用像素定義文本尺寸更好。另外，無單位的?`line-height`?也應該優先考慮，因為它不會從父元素繼承一個百分比值，而是基于?`font-size`?的一個乘數。正確 ~~~ #selector { font-size: 13px; line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Rounds to 20px. */ } ~~~ 不正確 ~~~ /* Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */ #selector { font-size: 0.813em; line-height: 1.25em; } ~~~ ### IE Bugs 不可避免地，當所有其他瀏覽器看起來都正常工作的時候，各種版本的IE瀏覽器就會冒出一些莫名其妙的bug，讓部署一拖再拖。雖然我們鼓勵排除問題，產出無需打補丁就能在所有瀏覽器上運行的代碼，有時候為了在樣式表中使用CSS鉤子，還是有必要用到CSS?`if IE`?條件注釋。[從 paulirish.com 了解更多信息。](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) 修復 IE ~~~      <body>  ~~~ ~~~ .box { float: left; margin-left: 20px; } .ie6 .box { margin-left: 10px; } ~~~ 如果你在用HTML5（以及?[HTML5 Boilerplate](http://coderlmn.github.io/code-standards/#h5bp)），我們推薦使用?[Modernizer](http://www.modernizr.com/)?JavaScript庫和下列模式： ~~~     <html class="no-js" lang="en"> ~~~ ### 速記格式一般情況下要優先使用CSS速記格式，一是因為它的簡潔，二是用它也可以擴充已有的值，例如margin和padding的情況。開發者必須注意TRBL?縮寫，它表示元素的各邊按順時針方向定義的順序：上、右、下、左。如果bottom沒有定義，它就會從top繼承值。同理，如果left未定義，它從right繼承值。如果只有top的值有定義，所有的邊都會繼承那一個值。下面是關于減少樣式表代碼冗余和使用CSS速記格式的更多內容： * [http://qrayg.com/journal/news/css-background-shorthand](http://qrayg.com/journal/news/css-background-shorthand) * [http://sonspring.com/journal/css-redundancy](http://sonspring.com/journal/css-redundancy) * [http://dustindiaz.com/css-shorthand](http://dustindiaz.com/css-shorthand) ### 圖片 * 對于（用于背景的）重復圖片，要使用?[比 1x1 像素大的圖片](http://www.iandevlin.com/blog/2010/03/webdev/fading-issue-with-repeating-background-transparent-image-in-internet-explorer) * 永遠不要用空白圖片。 * 多使用?[CSS精靈（sprites）](http://coderlmn.github.io/code-standards/#_leverage_css_sprites)。它會使懸停狀態更簡單，改善頁面加載速度，并減少二氧化碳的排放。 * 一般情況下，所有的圖片都應該切成帶透明背景（PNG8），并裁減成緊密貼合圖片外邊框。 * 不過，logo必須總是帶有背景遮片，并在裁減內容之外留出內邊框。 ### 顏色管理 * 確認團隊所有成員都有一致的顏色管理設置。 * 任意兩臺顯示器顯示的顏色很可能會有所不同，但必須使用sRGB顏色作為缺省配置。 * 當你在Photoshop打開文件時，要注意顏色配置警告，當Photoshop建議把圖片轉換到另一個配置時，要通知其他團隊成員。 * 永遠不要把顏色配置嵌入到圖片里。 * 當你從Photoshop保存圖片時，務必去掉"Embed Color Profile"選項的勾選。 * * * ### 通用的文本和字體樣式 #### 標題 * 要給?`h1-h6`?標題 -- 包括作為鏈接的標題 -- 定義缺省樣式。在你的CSS文檔頂部定義它們，在必要時修改它們以保持整個站點的一致性。 * 標題必須有層次，能表明從大到小不同級別的重要性，h1具有最大的字體大小。 * SEO：要大致地了解頁面的層次組織和閱讀效果，在開發者工具里關閉CSS效果，你會看到一個基于文字的視圖，包括所有的?`h1-h6`?，?`strong`，?`em`?等標簽。 #### 鏈接 * 必須定義鏈接的缺省樣式，樣式要和主要的文字樣式不同，載懸停狀態下也要有不同的樣式。 * 當給鏈接加下劃線樣式時，使用?`border-bottom`?并用?`text-decoration: none;`?加點內邊框。這樣看起來更好一些。 ## Web字體近些年來越來越流行使用web上的定制字體和字型。隨著本地瀏覽器對其支持度的攀升，以及一些支持它的服務和API的出現，這個領域發展的勢頭很猛。這些方法都各有利弊。項目啟動前最好是在技術和版權限制方面先做一些研究，以便為特定項目選擇合適的方法。所有這些方法都有代碼開銷、開發時間和性能（時間計算和用戶感受）的不足。你需要熟悉這些問題，并和團隊成員及用戶溝通，這樣會減少項目后期的大量問題。下面列出一些內嵌定制字體的流行手段，按我們實施時的優先級排序。 ### @font-face [@font-face 規則](http://www.w3.org/TR/2011/WD-css3-fonts-20110324/#font-face-rule)?允許你自定義字體。它最早是在CSS2 規范里定義的，但從CSS2.1被刪除了。現在，它是CSS3草案中的推薦稿。對于web定制字體，我們的首選和最偏愛的選擇都是?`@font-face`?，就是因為它被列入了CSS字體模塊工作草案的一部分，這意味著它會隨著瀏覽器支持的提升變得越來越流行，并且隨著它不斷改善變得更穩定，使用起來也更簡單。就現在而言，使用?`@font-face`?的時候，建議為每種字體格式定義它的source。這很重要 -- 如果你想讓它在大多數瀏覽器中有效 -- 雖然這不是使用它的必要條件。在規范中包括的字體格式有： * **woff**: WOFF (Web Open Font 格式) * **ttf**: TrueType * **ttf**,?**otf**: OpenType * **eot**: 嵌入式 OpenType * **svg**,?**svgz**: SVG 字體 #### 防彈 @font-face 為了實現完全的瀏覽器兼容性，可以使用 Fontsprings 的新版?[防彈 @font-face 語法](http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax)?（2011年2月21日的最新版本）。 ~~~ @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot'); /* IE9 Compat Modes */ src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */ url('myfont-webfont.woff') format('woff'), /* Modern Browsers */ url('myfont-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ font-weight: <font-weight>; font-style: <font-style>; // etc. } ~~~ 這里有一個使用上述技術實現的?[演示](http://www.thecssninja.com/demo/css_fontface/)?。 #### 跨瀏覽器兼容 Safari,?IE 6-9,?IE 9 兼容模式, Firefox, Chrome, iOS, Android, Opera #### 阻止兼容模式有時候?IE?會在用戶不知道的情況下自作主張切換到兼容模式。要阻止你的站點缺省進入兼容模式，可以在站點的`<head>`?部分加入下列代碼： ~~~ <meta http-equiv="X-UA-Compatible" content="IE=edge"> ~~~ * * * #### 有關 @font-face 的提示 * IE 6–8 只會接受打包成 EOT 的 TrueType 字體。 * font-weight 和 font-style 在?`@font-face`?里有不同的含義。帶有?`font-weight:bold;`?的聲明意味著它是這種字型的粗體版本，而不是直接給文本加粗。 * [@font-face 的一些坑](http://paulirish.com/2010/font-face-gotchas/) **優點** * 易于實施 * 多種多樣APIs * 可定制 * 易于加入元素中 * 除了 CSS 之外無需其他庫或接口 * 被列入了CSS字體模塊3工作草案的一部分 **不足** * 使用不當的時候，支持它的瀏覽器有限 * 某些現代瀏覽器（Chrome, Opera）的老版本并不總是能正常渲染。文本可能會出現毛刺。**我本人沒有親自證實過，不確定現在這個問題是否還存在。 * * * ### Google WebFonts API 和 Font 加載器使用?[Google Webfonts](https://code.google.com/apis/webfonts/)?有兩套可選方案。這兩套方案當然也各有其弊端，但它們也可以用得和?`@font-face`?一樣好，這全取決于項目的需要。 #### Webfonts API [Google的 Webfonts API](https://code.google.com/apis/webfonts/docs/getting_started.html)?本質上和?`@font-face`?做的是同樣的事情，只是它把所有困難的工作都幫你做好了，提供了更廣泛的瀏覽器支持。這個方案主要的缺點是它使用的字體庫非常小。使用它的時候你只需要引入下面這套樣式表并指定字體名。 ~~~ <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> ~~~ 然后給你想應用的選擇器定義一個樣式即可： ~~~ CSS selector { font-family: 'Font Name', serif; } ~~~ ### Webfont 加載器 Google 提供的另一個備選方案是?[Webfont 加載器](https://code.google.com/apis/webfonts/docs/webfont_loader.html)?，它是一個 JavaScript 庫，提供比字體 API 更多的控制。你也可以像Typekit那樣使用多套web字體。使用這套方案需要把下面的script引入你的頁面： ~~~ <script type="text/javascript"> WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ]} }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> ~~~ 用這種方式引入 webfont.js 文件速度更快，如果沒有用到前面的Ajax接口的話。否則你應該用下面的方法： ~~~ <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("webfont", "1"); google.setOnLoadCallback(function() { WebFont.load({ google: { families: [ 'Tangerine', 'Cantarell' ]} }); }); </script> ~~~ 通過使用這套 Webfont 加載器，你具備更多的定制能力，包括使用更多的字體，而不局限于不大的Google Webfont字庫。不過，這種方案需要加載Javascript，這就是為了便利付出一些其他的犧牲了。 **優點** * 非常易于實施 * 廣泛的瀏覽器支持 * 可與 Typekit 組合 * 如果使用 font 加載器，可以定制 * API 和?`@font-face`?功能相同 **不足** * API只提供很小的字體庫 * Webfont 加載器需要 JavaScript 才能工作 * 大部分瀏覽器會先加載頁面的其他部分，在這些字體所在部分留下空白，或在有回退選項存在的時候顯示回退樣式，直到頁面加載完成為止。 * webfont 庫里的一些字體在 Windows 下渲染效果不佳 * * * ### Cufon 如果你選擇使用 Cufon，我們強烈推薦你使用?[Cufon 壓縮版](http://cufon.shoqolate.com/js/cufon-yui.js)。你會需要用?[生成器](http://cufon.shoqolate.com/generate/)?來轉換你的字體。 ~~~ <script src="cufon-yui.js" type="text/javascript"></script> <script src="YourFont.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1'); // Works without a selector engine Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7 </script> ~~~ 我們推薦慎重使用 Cufon ，因為如果應用到大量的文本上，它會產生很多開銷。訪問?[Cufon Wiki](https://github.com/sorccu/cufon/wiki/)?可以獲取更多相關信息。 **優點** * 廣泛的瀏覽器支持 * 在支持它的瀏覽器中渲染效果好 * 可定制 * 易于實施 **不足** * 需要 JavaScript 才能工作 * 使用該方法的文本不能被選中 * 并不是適用于所有文字 * 定制可能會很復雜 * 并不總是容易應用到多個元素，特別是在增加類似懸停的效果的時候 * * * ### Typekit 當選擇給網站添加定制字體的時候，使用?[Typekit](https://typekit.com/)?有它不容忽視的優勢。它具備很強的平臺集成，并且是可擴展和流行的服務。它可以和 Google Webfonts 一起使用，并且易于加入到以 WordPress, Posterous, Typepad, 和其他類似的 CMS 實現的網站上。但是，要完整地應用?[Typekit 也不是無本生意](https://typekit.com/plans)。如果你需要把它用到超過2個站點，或用在一個瀏覽量很高的站點上，你需要每年付49.99美元費用，對于百萬以上瀏覽量的站點費用會加倍。不過，如果你的網站有這么大瀏覽量，對這點成本你應該是不差錢的。如果不是這樣，你可能需要重新考慮你的商業模式了。 **優點** * 龐大的字體庫，包括 Adobe 字體 * 易于實施 * 和Google Webfont API 以及博客平臺集成 * 免費計劃有限制但不會過期 **不足** * 需要 JavaScript 才能工作 * 免費計劃能用到的字體庫是有限制的 * 免費和最便宜的計劃只允許用到1-2個網站，每個網站只能用2-5種字體。 * 用到超過一個網站就需要付費了 * * * ### 可擴展 Inman Flash 替換 (sIFR) 我們不推薦使用這種方法，但是因為它的廣泛使用，我們覺得還是有必要介紹它，以便你在選擇定制web字體方法時做出胸有成竹的決定。即使它在web設計師中廣為流行，而且它在大多數瀏覽器中也有很好的支持，使用它的缺點還是大過它的便利性。棄用 sIFR 的最大也是最明顯的原因是它需要使用Flash這一事實。而且，即便是為了讓Flash正常工作就需要 JavaScript，而且在你使用此方法渲染的文本能在頁面上可見之前，相關的腳本必須都先被加載。更不用說，它會增加頁面加載時間，并會讓一個慢網站變得更慢。我們會讓你對這些問題算算細賬。 **優點** * 文本可以被選中 * 大多數瀏覽器都支持 * 在支持它的瀏覽器上渲染得還不錯 **不足** * 它用到了 Flash * 需要 JavaScript 來讓 Flash 正常工作 * 它是 Flash! * 腳本加載完之前，文字不會出現 * ...還有，它是 Flash... * * * ### 字體版權即使你可以把任何字體轉換為web字體文件，你還是應該確認這樣做是否合法。很多廠商更新了他們關于字體在web上使用的條款。查看?[字體版權和保護的細則](http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=UNESCO_Font_Lic)?獲取更多信息。 * * * ### 字體描述及字體文件格式 * [CSS 2 字體](http://www.w3.org/TR/1998/REC-CSS2-19980512/fonts.html#font-descriptions)?– 1998年5月 (已廢棄) * [CSS 3 字體](http://www.w3.org/TR/css3-fonts/)?– 2009 工作草案 * [CSS 字體模塊](http://www.w3.org/TR/css3-fonts/)?– W3C 工作草案 2011年5月 * [WOFF Font Format](http://www.w3.org/TR/WOFF/)?– 工作草案 2010 * [SVG 字體格式](http://www.w3.org/TR/SVG/fonts.html) * [嵌入式 OpenType (EOT) 文件格式](http://www.w3.org/Submission/EOT/) * [微軟 OpenType 規范](http://www.microsoft.com/typography/otspec/) * [OpenType 特性文件規范](http://www.adobe.com/devnet/opentype/afdko/topic_feature_file_syntax.html#9.e) * [蘋果 TrueType 手冊](http://developer.apple.com/fonts/TTRefMan/) ### 使用 CSS3 利用CSS3規范中增加的特性，你可以做很多新奇的事情，不過里邊很多新特性還沒有得到所有主流瀏覽器的完全支持。不過這也不是說它們現在就不能用。對于這些支持不好的特性，有一些回退的庫可用，或者有一些其他補丁，用來填補在瀏覽器對新特性缺乏支持時出現的空白。還有一些瀏覽器特定的屬性或前綴也可以用來修飾樣式。為跨瀏覽器支持起見，我們推薦使用[Prefixr.com](http://prefixr.com/)?來確保你加入了所有針對不同瀏覽器的前綴屬性。