20條書寫 CSS 代碼的建議

作者：Danny Markov

原文：20 Tips For Writing Modern CSS

譯者：高華鋒

譯文：www.jianshu.com/p/7a4947e12b85

在這篇文章中，我想跟你分享 20 條由 CSS 社區推薦的約定和最佳實踐。 有些建議可能比較適合新手，而有些則更高級一些，但我希望每個人都可以在本篇文章中收穫自己不知道的知識。

1.謹慎使用外邊距屬性

與其它的屬性不同，垂直方向上的外邊距相遇時將會發生摺疊。這意味著如果一個元素的下邊距遇到了另一個元素的上邊距，那麼二者中較大的一個將被留下。下面是一個簡單的例子。

.square {

width: 80px;

height: 80px;

}

.red {

background-color: #F44336;

margin-bottom: 40px;

}

.blue {

background-color: #2196F3;

margin-top: 30px;

}

其實上述兩個元素在垂直方向上的距離並不是 70px， 而是 40px， 藍色正方形的 margin 沒有被計算在內。 有很多的方法消除這種默認的行為，但最好的方法是只使用一個方向上的 margin 屬性，比如說 margin-bottom 。

2.利用盒子模型布局

盒子模型自然有其存在的理由。float 和 inline-block 當然也可以工作，但它們都是樣式化文檔的基礎工具，而不是整個網站。從某種意義來說， Flexbox 是為更容易更精確創建我們想要的布局而設計的。

Flexbox 模型提供的一系列屬性給了開發者更大的靈活性，而且你一旦熟悉了它們，那創建任何響應式布局都是輕而易舉的事。瀏覽器對 Flexbox 的支持也已經接近完美，所以已經沒有什麼理由能夠阻止你使用 Flexbox 了。

.container {

display: flex;

/* Don t forget to add prefixes for Safari */

display: -webkit-flex;

}

3.執行 CSS 重置

儘管這些年來情形已經有所好轉，但是各瀏覽器的默認行為還是存在很多分歧。解決這個問題最好的辦法就是使用一個 CSS 重置文件為所有元素重新設置默認樣式。這可以讓你在一個純凈的樣式環境下工作，並且在所有瀏覽器中產生相同的結果。

有很多的庫做這個工作做的非常不錯，比如 normalize.css, minireset, 和 ress， 糾正了瀏覽器間的不一致。如果你不想使用庫，你也可以自己製作一個簡單的 CSS 重置，像下面這樣。

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

這可能看上去比較苛刻，但是消除了默認的 margin 和 padding 我們將更容易的擺放我們的元素，而不用擔心它會佔用額外的空間。box-sizing: border-box 是一個很受用的屬性，我們將在下面介紹這個屬性。

4.為所有元素使用 Border-box

許多初學者不知道 box-sizing 屬性，但它的確很重要。了解它的最好辦法就是看看它的兩個可選值。

content-box(default) - 當我們為元素設置了寬度和高度，但那只是內容的尺寸。所有的 padding 和 border 都在不包含在內容當中，也就是在內容的外部。舉例來說，如果我們有一個 div它的寬度為 100px， padding 為 10px, 那麼它的實際寬度為 120px。

border-box - padding和 border 被包含在 寬度和高度當中。 如果一個 div 的寬度為 100px ，而被設置了 box-sizing: border-box， 那麼它的寬度將始終是 100px， 無論你添加多少 padding 和 border 。

為所有元素設置 border-box 將有利於樣式化，而且你在也不用做乏味的數學運算了。

5.圖像作為背景

當你為自己的站點添加圖片時，尤其是你想做響應式設計的時候，利用一個 div 標籤並為其設置 background 屬性，而不是使用 元素。

似乎額外的工作並沒有起到任何作用，但實際上這更利於你對圖片設置樣式，保持它們原有的尺寸或者根據比例變化，這需要藉助 background-size，background-size 還有一些其它的屬性。

Img element

Div with background image

img {

width: 300px;

height: 200px;

}

div {

width: 300px;

height: 200px;

background: url( );

background-position: center center;

background-size: cover;

}

section{

float: left;

margin: 15px;

}

這種技術的一個缺點是你頁面的可訪問性可能略有打擊，因為你的圖片不會被屏幕閱讀器和引擎正確抓取。 這個問題可以被 object-fit 解決，但它還不被所有瀏覽器支持。

6.更好的 Table 邊框

HTML 中的 table 沒什麼意思。它們非常古怪，難以設計成響應式的，而且很難與整體風格一致。比如說，你想為 table 和其中的元素添加上邊框，你可能會得到下面的結果。

正如你所見到的，它有很多重複的邊框而且看起來不是很好，有一個非常快速且簡單的去除雙邊框的方法，就是將 border-collapse: collapse 添加到 table.

這樣看起來就好多了。

7.更好的注釋方式

CSS 可能不是一門編程語言但它的代碼仍然需要被記錄，所以一些簡單的注釋將會對你的同事或者未來的自己很有幫助！

對於 CSS 中的一些比較大的模塊，比如主要模塊或者媒體查詢，使用風格化的注釋並且在其後留下一些空行。

/*---------------

#Header

---------------*/

header { }

header nav { }

/*---------------

#Slideshow

---------------*/

.slideshow { }

設計中的一些細節或那些不是特別重要的模塊，可以用單行注釋。

/* Footer Buttons */

.footer button { }

.footer button:hover { }

另外，值得注意的是，CSS 中沒有 // 注釋，所以當你需要注釋的時候你需要使用 /* */ 符號。

/* Do */

p {

padding: 15px;

/*border: 1px solid #222;*/

}

/* Don t */

p {

padding: 15px;

// border: 1px solid #222;

}

8.命名連接

當 class 或者 id 不止一個單詞的時候，需要使用 - 符號連接， CSS 對大小寫不敏感，所以駱駝命名法不是一個好的選擇。很久以前，下劃線不被支持所以破折號成為了默認約定。

/* Do */

.footer-column-left { }

/* Don t */

.footerColumnLeft { }

.footer_column_left { }

9.不要重複設置

CSS 的許多屬性值都是從 DOM 樹中的上一級繼承下來的，因此命名為層疊樣式表。讓我們以 font 為例 - 它幾乎總是繼承自父節點，你不需要為頁面中的每一個元素設置該屬性。

你只需要為 或者 設置 font 樣式，然後讓它一級一級流傳下去就可以了。 下面是一個很好的例子。

html {

font: normal 16px/1.4 sans-serif;

}

當然，在任何一個子元素中你都可以按照自己的需求改變這一樣式。我要說的就是能使用繼承獲得的屬性就不要再去一一指定了。

10.CSS 動畫與變換

不要通過直接更改元素的寬度和高度去動畫元素，或者是更改 left/right/top/bottom。最好的辦法是使用 transform() 屬性因為它提供了更加圓滑的過渡效果而且可以讓你的意圖在閱讀代碼時更加易於理解。

下面是一個例子，我們想動畫一個 ball，讓它往右滑動。 不要去改變 left 的值，最好是使用 translateX() 。

.ball {

left: 50px;

transition: 0.4s ease-out;

}

/* Not Cool*/

.ball.slide-out {

left: 500px;

}

/* Cool*/

.ball.slide-out {

transform: translateX(450px);

}

transform 以及它的所有方法（translate, rotate, scale 等）擁有幾乎一致的瀏覽器兼容性，你可以自由使用它們。

11.不要 DIY, 使用庫

CSS 社區非常的龐大而且不斷出現新的庫。 庫被提供於各種用途，從小片段到完善的框架，用於構建響應式程序，而且它們當中大部分都是開源的。

所以下次當你碰到 CSS 問題的時候，在你想自己動手去解決問題的時候，最好先去 Github 或者 CodePen 找找是否已經存在可用的解決方案。

12.保持選擇器的特指度低

不是所有 CSS 選擇器都是生而相等的，當新手開發者書寫 CSS 代碼的時候通常期望它們寫的選擇器能夠覆蓋之前所有已存在的樣式。 但是事情並不總像我們想的那樣，就像下面這個例子：

a{

color: #fff;

padding: 15px;

}

a#blue-btn {

background-color: blue;

}

a.active {

background-color: red;

}

我們想為所有按鈕添加 .active 類使其變為紅色，但這是不起作用的，因為按鈕已經被一個 id 選擇器設置了 background-color，而 id 選擇器具有更高的特指度。它們之間的規則就像下面這樣：

ID (#id) > Class (.class) > Type (比如 header)。

特指度是可以堆疊的，所以 a#button.active 的特指度是高於 a#button 的。 使用特指度高的選擇器將使你不斷的使用更高的去覆蓋那些原本存在的選擇器，這將最終導致 !important 效果。

13.不要使用 !important

很認真的告訴你，不要使用 !important。 即時的一個快速修復在將來可能導致大量的重寫。相反，找出你 CSS 選擇器不工作的原因，並且嘗試去修復它。

只有在一種情景中使用 !important 是可以接受的，那就是你想覆蓋那些在 HTML 中定義的行內樣式。而且書寫行內樣式也是一種非常糟糕的方式，建議停止使用。

14.使用 text-transform

在 HTML 中，當你使用大寫字母的時候可能是出於某種語義目的，比如說你想強調一個單詞的重要性。

Employees MUST wear a helmet!

如果出於某種目的你將一組文本都設置成大寫，可以在 HTML 中正常書寫文本，然後利用 CSS 轉換其大小寫。 它們看起來都是一樣的，但是如果不在上下文中，你的內容將更有意義。

Star Wars: The Force Awakens

.movie-poster { text-transform: uppercase;}

這同樣適用於大寫或者小寫的字元串 - text-transform 屬性可以將它們處理的很好。

15.Em， Rem 和 Pixel

人們在對元素和文本設置尺寸應該用 em，rem 還是 px 有很多的爭論。事實是，這三者都是可行的，有自己的優點和缺點。

所有的開發者和項目都是不同的，所以不應該有什麼嚴格的規則說明什麼時候該用哪一種。下面是一些提示和良好的做法：

em - 1 em 的大小與直接父元素的字體大小有關。 通常用於媒體查詢，em 對響應式設計而言是非常棒的 ，但是將每個元素的 em 值轉換為 px 的比例是非常難以計算的，因為你可能要在 DOM 樹上逐級跟蹤元素。

rem - 以 元素中的 font-size 為基準， rem 將比例化頁面中的標題和段落變得很容易。保持 中默認的 font-size 並且為其它的元素設置 rem 是一種非常棒的方法。

px - 像素是最精確的控制方式，但是在 響應式設計中它並不友好，因為它不會隨屏幕大小變化而自動縮放。它們是可靠的，易於理解的，並且在值和實際結果之間呈現出良好的視覺聯繫。

下面我要說的是，不要害怕嘗試。去使用它們並且找出哪一種是你最喜歡的。 有時候 em 和 rem 很省事，尤其對於響應式界面。

16.在大項目中使用預處理器

你可能已經聽說過它們了 - Sass, Less, PostCSS, Stylus 。預處理器是 CSS 發展的下一階段。 它們提供的功能諸如變數， CSS 函數，選擇器嵌套以及其它一些非常酷的東西。這使得 CSS 代碼非常易於管理，尤其在大項目中。

舉個簡單的例子，下面是使用了 CSS 變數和函數的 Sass 代碼片段。

$accent-color: #2196F3;

a {

padding: 10px 15px;

background-color: $accent-color;

}

a:hover {

background-color: darken($accent-color,10%);

}

使用 CSS 預處理器的唯一缺點是，它們需要編譯成真正的 CSS 代碼，但是如果你已經決定在你的項目中使用一個構建腳本，那麼這就不再是你應該煩惱的問題了。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 程序員之家 的精彩文章: