今天在回廣州的火車上看到一篇"10 CSS mistakes every web designer must avoid"更胖，想著還不錯，就翻譯給大家隔显。
對于網(wǎng)頁重構(gòu)來說却妨，CSS禪意花園 是網(wǎng)頁布局從 table 表格轉(zhuǎn)到了 html +css 的標志 。這些年來括眠，隨著我們的網(wǎng)站越來越復雜：html5彪标，css3，新的技術(shù)掷豺、新的屬性捞烟，越來越多的開發(fā)者開始思考和嘗試提高他們的 CSS 技能账锹。那么我們從哪里著手呢？對于網(wǎng)頁重構(gòu)工作來說坷襟，我們應該養(yǎng)成什么樣的開發(fā)習慣？一個糟糕的 css 用法是怎樣的生年？我們應該怎么處理這些糟糕的 css婴程。今天這篇文章，我將談一談10個我們應該避免的 css 糟糕用法抱婉，當然档叔，我們也會分享怎么才是正確的用法。
為了方便大家理解蒸绩，我將這10個糟糕用法歸為三大類：權(quán)重衙四、工作流、自以為是患亿。
權(quán)重传蹈！權(quán)重！泌枪！權(quán)重０Ｏ式洹！
正所謂馬太效應沾歪，如果你寫了很爛的 css，這段爛代碼的不好之處是他會導致更多和更爛的代碼雾消。如果你需要解決一個 css bug灾搏，發(fā)現(xiàn)唯一的解決方法是：使用更多層級的選擇器、 id 選擇器立润；甚至更糟糕：使用內(nèi)聯(lián)樣式( inline-style )狂窑，直到使用最后的大殺器!important。以上提到的所有用法歸根到期他們犯了「過多權(quán)重」的錯誤范删。
CSS 中的權(quán)重取決于你如何使用具體的css 規(guī)則蕾域。
#layout #header #title .logo a { display: block; }
看看上面這串 CSS 選擇器，你可能覺得這是一段符合語義化的「好」選擇器：簡單明了到旦。如果你依照習慣從左往右讀旨巷，你可能是這么理解：「先找到主要布局區(qū)域，再找頭部區(qū)域添忘，再找到 title 標題區(qū)域采呐，再找到 logo 標志區(qū)域，再找到這里面的所有 a 錨點」搁骑，對于 css 來說斧吐，這是一個很具體的精確定位又固，但是，實際上我們很少有機會需要這么精確的定位煤率。過大的css權(quán)重會造成你的樣式表更加難以維護（你考慮過接你班的同事的感受木有Ｑ龉凇），也更加難以閱讀和理解（這么多層聲明蝶糯、一長串你鬧哪樣把笾弧）。
01.濫用 id
CSS 權(quán)重的高低取決于你使用什么樣的選擇器：id,class 類,tags 標簽昼捍。舉個栗子：
#my-link{color: red}
.my-link{color: yellow}
a{ colour: blue}
來做這么一個小測試识虚，有這么一個超鏈接如下，如果我們沒有其定義其他樣式妒茬，瀏覽器渲染出來的最終結(jié)果會是什么顏色担锤？
<a href="#" id="my-link" class="my-link">舉個栗子</a>
最終的顏色會是紅色，因為 id 屬性是三者之中權(quán)重最高的（id在網(wǎng)頁中只能使用一次乍钻，他得權(quán)重值為100）肛循，所以紅色葫蘆娃成功擊敗了其他娃娃，舉起了栗子团赁。
根據(jù) css 權(quán)重育拨，權(quán)重次于 id 的是class類，最后才是tag標簽欢摄，正如你如上圖審查器中所看到的熬丧。
當然啦，像上面我們舉的栗子這種「同時使用 id/calss/tag 」的情況在實際應用中還是很少見的怀挠，在日常開發(fā)中析蝴，我們更多的情況是會遇到如下情況：
#header a { border:2px dashed #000 }
假設(shè)這是我們的一個項目，現(xiàn)在我們決定要把一個在 header 的 link設(shè)置成無邊框绿淋，隨手一寫闷畸，我們添加了：
.special-link { border:none }
然后再在 html 中添加了一個 special-link 的class 類，這下解決我們的問題了嗎吞滞？ 答案是：沒有佑菩！ 由于 id 的權(quán)重如此之高，我們需要更高權(quán)重的聲明才能實現(xiàn)我們的需求裁赠。下面這樣寫才是正確的：
#header .special-link { border: none }
假如說這種情景在我們的 code 過程中不斷地出現(xiàn)：設(shè)置 header 區(qū)域另外一個特殊的超鏈接 link 為某特殊的樣式殿漠，你該怎么處理呢？ id 的高權(quán)重特性意味著濫用 id 絕對是一個很糟的做法佩捞！
那我們?nèi)绾谓鉀Q這個問題呢绞幌？用 class 類來代替 id 吧。
02.大串的 css 選擇器（多層級）
#header #title .left-side img.logo { opacity: 0.5 }
上面這個栗子不僅僅亂用 id一忱，他還很長莲蜘，正如同亂用 id導致的高權(quán)重麻煩谭确，如果你使用一大串選擇器（超過三個層級）你同樣會造成過高權(quán)重，導致你陷入到高權(quán)重和更高權(quán)重的汪洋大海之中票渠。
那針對這個問題的解決辦法有什么呢——精簡逐哈！如同我們現(xiàn)在這個栗子，如果我們用一個 .logo class類就能解決我們的需求问顷，那我們就沒必要寫這么以大串了鞠眉。一般情況下，我們應該控制選擇器在2個择诈，最多3個。
03.Inline styles
內(nèi)聯(lián)樣式是css 權(quán)重罪惡的源泉出皇，同時也從根本上摧毀了我們使用 css 的初心（結(jié)構(gòu)樣式分離）羞芍。當我們的工程師好不容易走出 tables 的魔窟開懷擁抱外部樣式表，我們早就應該知道不要把樣式同結(jié)構(gòu)混雜在一起郊艘。
根據(jù) css 權(quán)重級的特性荷科，內(nèi)聯(lián)樣式只能被!important 所覆蓋。一般來說纱注，這就意味著畏浆，如果某猿使用了!important，他們更多是被逼的沒辦法才這么用(對應英文 reactive)狞贱，而不是想這么用(preoactive)刻获。的確!important在 css 樣式表中用起來十分方便，但我們最好是聰明地瞎嬉、小心翼翼地碰她蝎毡、用他，而不是把他當做救命稻草（救命稻草用多了氧枣，遲早也會從救命稻草變成壓死駱駝的稻草）沐兵。
下面舉例怎么解決內(nèi)聯(lián)樣式的問題，就兩步 1.復制刪除 2.粘貼 便监。剔除內(nèi)聯(lián)樣式扎谎，轉(zhuǎn)移到樣式表之中吧。
04.從上至下式的粗放命名
說完 css 權(quán)重烧董，接下來我們來談?wù)勂渌?CSS 的糟糕用法毁靶。假設(shè)我們開始了一個新項目，設(shè)計師丟給我們一份 psd解藻，我們開始在 html 中寫基本的框架老充。
根據(jù)結(jié)構(gòu)從下至上式的命名方式模糊化了 html 結(jié)構(gòu)，工程師常常根據(jù)上下結(jié)構(gòu)來命名id 和 class螟左，而不是具體的設(shè)計元素啡浊，例如#header,content觅够，這常常會導致長選擇器（舉個例子如. menu ul li a｛ ｝）巷嚣，這樣的后果是我們的代碼變得難以調(diào)試和維護喘先。怎么解決這個問題呢？我們應該嘗試從網(wǎng)頁中分離出設(shè)計元素廷粒，這同樣可以減少我們代碼中的冗余窘拯。
05.冗余/重復
冗余意味著你寫 css 的過程中不斷重復某些代碼。在使用編程語言的時候坝茎， 我們很好理解重復（造輪子）意味著浪費時間涤姊，我們在 code 中應該遵循 DRY 原則(Don't repeat yourself)。什么情況下我們會重復造輪子呢嗤放？舉個栗子：
.some-title { font-weight: bold; }
.some-other-title { font-weight: bold; color: red }
實際上思喊，我們可以有個更好的解決辦法
.some-title, .some-other-title { font-weight: bold; }
.some-other-title { color: red; }
比如說我們要添加一個不同顏色的標題，我們可以使用一個常用的命名次酌，或者添加一個具體的 class 類恨课。
<h3 class="some-title pop">我的標題/h3>
這個有點面向?qū)ο蟮腃SS的思想在里面，使用 Sass 中的 @extend 特性可以很好地解決我們這個問題岳服。
在 Sass 之中剂公，你可以使用@extend 繼承選擇器，被繼承的選擇器的樣式也被繼承吊宋。這個特性使得我們可以很方便管理不同的樣式纲辽，舉個栗子：
.some-title { font-weight: bold; }
.some-other-title { @extend .some-title; color: red; }
當CSS預處理編譯器將.scss轉(zhuǎn)換成.css文件時，我們最終輸出的樣式是：
.some-title, .some-other-title { font-weight: bold; }
.some-other-title { color: red; }
最終輸出的是一模一樣的效果璃搜，解決重復和冗余的問題文兑，要求我們在寫 css 的時候心中對 html 層級結(jié)構(gòu)要有個大致的規(guī)劃，思考不同的設(shè)計元素之間的層級和關(guān)系腺劣，我們規(guī)劃得越清晰绿贞，最終輸出的 css 也越精簡。
06.精簡你的單位
如果你的樣式表中混雜著 px,em,rem等等單位橘原，是時候改變了籍铁，業(yè)內(nèi)著名的web開發(fā)者Rachel Nabors 呼吁大家統(tǒng)一使用em為字體大小單位，他曾說「我看其他人的樣式表第一件事就是看字體樣式趾断，然后把所有的font-size的單位換成em」拒名，這幾年用戶使用的終端越來越多樣（不同的終端、不同的瀏覽器使用的默認字體大小存在差異）芋酌，使用絕對字體大小px變得越來越不可控增显，使用em等相對大小的字體則避免了這個問題。
如果你想在轉(zhuǎn)成em對這些單位有個深入點的了解脐帝，推薦你閱讀《CSS文字大小單位PX同云、EM糖权、PT》。
當然炸站，如果你就是不喜歡em和他們嵌套特性星澳，那么你可以更進一步了解 CSS3 中推出的新單位 rem。
不同單位在 web 設(shè)計之中的戰(zhàn)爭還在繼續(xù)（可參考文章CSS Font-Size: em vs. px vs. pt vs. percent
）旱易，學習一點相關(guān)知識對我們提高代碼可維護性至關(guān)重要禁偎。
下面我們進入到這篇博文的第三也是最后一個部分「自以為是」，這些壞習慣包括：增加不必要的東西阀坏，錯誤如暖，無意義的 css。
07.向下兼容和無效的規(guī)則
在開發(fā)的過程中忌堂，如果你不需要使用 css3 之類的高大上代碼就能實現(xiàn)效果装处，那再好不過了〗可是，作為工程師的你在 Chrome 最新版本上面看到的效果寝蹈，并不意味著你的用戶能在他們的瀏覽器上看到同樣的效果（考慮過 IE 的感受沒有）李命，一個十分糟糕的壞習慣就是完全忽略向下兼容性。
如果你在項目中使用rgba()箫老，你是否測試過這個屬性的兼容性封字？如果沒有，那你最好祈禱沒有 IE8的用戶會訪問你的網(wǎng)站耍鬓。你是否寫全了針對不同瀏覽器的不同的規(guī)則（-webkit,-ms -moz 等等）阔籽？解決這個問題，可以使用 CSS LInt檢測下你的 css 代碼牲蜀，CSS Lint的檢測規(guī)則包括錯誤的和不合理的地方笆制。
08.(沒有意義)不起作用的樣式
Harry Roberts的Code smells in CSS是關(guān)于 css 糟糕用法的經(jīng)典文章。他舉了幾個可有可無的不起作用樣式的栗子：
h2{
font-size:2em;
margin-bottom:0.5em;
padding-bottom:0.5em;
border-bottom:1px solid #ccc;
}
.no-border{
padding-bottom:0;
border-bottom:none;
}
Roberts 推薦的重構(gòu)精簡方法是刪掉屬性為0和none的屬性值涣达。
h2{
font-size:2em;
margin-bottom:0.5em;
}
.headline{
padding-bottom:0.5em;
border-bottom:1px solid #ccc;
}
如果你像重構(gòu)之前的那樣寫法在辆，h2是一個我們在web 設(shè)計中會不斷重復用到的元素，這個本質(zhì)上「你寫了更多的代碼卻沒有實現(xiàn)了更少的樣式效果」度苔，如果我們接下來又要設(shè)置一個h2的屬性為其他樣式匆篓，那代碼會得很亂。
Harry Roberts是 inuit.css 框架的作者寇窑。
09.巧而不巧:用 Hack 不意味著你是個好 Hacker
負的 margin 邊距鸦概，!important等等，上面的這些就是我們所說的 hack 用法（此 hack 非針對IE 兼容的 hack甩骏，也可以理解成 cheater 作弊用法）窗市，如果其他人問我們?yōu)槭裁匆@么寫先慷？我們可能只需要回答「管他呢，反正能實現(xiàn)效果」谨设。
當我們?yōu)樽约菏褂眠@些充滿「弊」端的方法而略不放心的時候熟掂，一個解決辦法就是把我們的這些 hack 放到一個特定的樣式表文件hack.css之中。
任何時候你意識到你寫了一個 css 的 hack 用法的時候扎拣，你直接把這些代碼放到這個hack.css 之中（或者樣式表的特定區(qū)域：通過注釋跟其他樣式區(qū)分開）赴肚，這個專屬區(qū)域是個好解決方案因為他最終會在用戶端隱藏。
當我們養(yǎng)成了這個習慣二蓝，我們可以十分清晰地知道我們寫了哪些 hack 誉券，同樣可以方便我們了解我們使用這些 hack 的情景，讓我們可以知道如何避免這些 hack 刊愚。我們有許多寫 hack 用法的理由踊跟，但是如果我們不記錄我們?yōu)槭裁?hack，我們將不會從我們這些 hack 中學到我們?yōu)槭裁匆e誤地這么用鸥诽。
10.糟糕的文檔和注釋
昨天在微博上看到一個段子「程序員最討厭的四件事：寫注釋商玫、寫文檔、別人不寫注釋牡借、別人不寫文檔 …」拳昌。
寫文檔和注釋絕對不是一個有意思的事情，但卻是一個最重要的事情（尤其是涉及到項目后續(xù)可維護性時）钠龙，文檔可以有效地讓其他人知道你的代碼是干什么的炬藤，同時其他人理解你的 css。對于大部分語言（html,css,php,JavaScript） 碴里，開發(fā)者可以直接在代碼文件中寫上注釋（文檔）沈矿。
Nabors 曾說「我曾YY：如果我今天寫完一個項目的 css 但是明兒我卻掛掉了，有一個人幸運地接手我這個項目咬腋，那他看得懂我的這些代碼是什么意思嗎羹膳？」。盡量地讓我們的樣式表中的結(jié)構(gòu)清晰根竿，如果不能讓人立馬知道你的選擇器指的是哪里的樣式溜徙，可以嘗試添加注釋（什么！你還說注釋增加css 文件大邢睢蠢壹！難道你不知道壓縮工具么！）九巡。
第一步是在必須的地方做好注釋图贸，第二步是使用工具把css文件中的這些注釋轉(zhuǎn)換成一個合適的文檔。推薦可以使用css_doc和KSS。
css_doc 跟 JavaDoc類似疏日，他的轉(zhuǎn)換原理基于 CSSDOC. KSS（Knyle Style Sheets）偿洁，對于前端和設(shè)計師來說都十分有益。
總結(jié)
在這篇文章中沟优，我們介紹了一些常見的 css 糟糕用法涕滋，指出了為什么我們應該避免這些用法和應該使用什么正確的用法。還是這句話"Doin something is always better than nothing"挠阁，行動起來總比什么都不做要好點宾肺，未雨綢繆有備無患。
今天你看完這篇文章侵俗，知道了10個糟糕的 CSS 用法锨用，這不意味著你明兒去上班就把你過去所有的代碼都重構(gòu)一遍。從點滴開始隘谣，一步一步來才是我們開發(fā)工作的正確做法增拥。在接下來的工作中，注意這些細節(jié)寻歧，避免這些「小」錯誤掌栅，讓我們的代碼更漂亮點。終有一天码泛，我們會發(fā)現(xiàn)"Code is poetry"猾封。
譯者言
這是第二次翻譯技術(shù)相關(guān)文章，不得不說弟晚，還是低估了翻譯的難度。要把技術(shù)類的文章翻譯得語言流暢逾苫、通俗易懂卿城，還是挺有挑戰(zhàn)性的。譯文中加入了自己的理解铅搓，配圖也是自己通過 codepen 重新截圖演示瑟押，這篇文章的譯稿我放在了 google docs 上，如果對于某些翻譯你有更好的用法星掰，可以直接建議修改多望。
https://docs.google.com/document/d/11Ly6z0dlVVPzIL-W22L_U6waoU7Pid4-KdDmEx6D0c8/edit?usp=sharing
