20條書寫 CSS 代碼的建議

rvtz3818 8年前發布 | 8K 次閱讀 CSS 前端技術

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

1. 謹慎使用外邊距屬性

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

<div class="square red"></div>
    <div class="square blue"></div>

    .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 屬性，而不是使用 <img> 元素。

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

<section>
        <p>Img element</p>
        <img src="" alt="bicycle">
    </section>

    <section>
        <p>Div with background image</p>
        <div></div>
    </section>

    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 為例 - 它幾乎總是繼承自父節點，你不需要為頁面中的每一個元素設置該屬性。

你只需要為 <html> 或者 <body> 設置 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 中，當你使用大寫字母的時候可能是出于某種語義目的，比如說你想強調一個單詞的重要性。

<h3>Employees MUST wear a helmet!</h3>

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

<div class="movie-poster">Star Wars: The Force Awakens</div>

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

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

15. Em， Rem 和 Pixel

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

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

em - 1 em 的大小與直接父元素的字體大小有關。通常用于媒體查詢， em 對響應式設計而言是非常棒的，但是將每個元素的 em 值轉換為 px 的比例是非常難以計算的，因為你可能要在 DOM 樹上逐級跟蹤元素。
rem - 以 <html> 元素中的 font-size 為基準， rem 將比例化頁面中的標題和段落變得很容易。保持 <html> 中默認的 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 代碼，但是如果你已經決定在你的項目中使用一個構建腳本，那么這就不再是你應該煩惱的問題了。

如果你想了解更多關于預處理器的知識，請查看目前最受歡迎的兩個系統的教程 - Sass 和 Less .

17. Autoprefixers

為各個瀏覽器添加前綴算得上是書寫 CSS 代碼最惱人的問題了。它們不一致，你永遠無法精確的你需要哪一個，而且如果你真的去一個個適配并將它們都放到樣式表中，你會發現這是一場噩夢。

感謝上天，有很多工具可以自動的幫你實現這一過程，甚至可以讓你指定你需要支持的瀏覽器：

在線工具： Autoprefixer
文本編輯器插件 - Sublime Text , Atom
庫 - Autoprefixer

18. 在項目中使用精簡代碼

為了提高網站或 app 的頁面加載速度我們需要總是使用精簡代碼 . 代碼的精簡版本會移除掉空白和重復的部分,這樣會削減文件的大小. 當然,這樣的話你的 CSS 代碼將會變得非常難以閱讀,所以最好總是提供一個 .min 的精簡版本和一個常規的發展版本.

有很多不同的方法去精簡 CSS 代碼 :

在線工具 - CSS Minifier , CSS Compressor
文本編輯插件 - Sublime Text , Atom
庫 - Minfiy , CSSO 和 CSSNano

根據你的工作流程,你可以選用上述一個選項,但是建議你總是使用某種方式自動執行此過程.

19. Can I Use

不同的瀏覽器仍然存在著很多不一致的兼容性問題, 利用 caniuse 或者其它類似的服務檢測你正在使用的屬性是否被廣泛支持, 是否需要添加前綴, 或者說是否會在某平臺下出現 bug .

僅僅檢測是否仍然是不夠的, 你仍然需要測試布局是否會無緣無故的崩潰. 充分了解用戶經常使用的瀏覽器也會提供很大的幫助, 因此你可以看到好的支持是非常關鍵的.

20. Validate

驗證 CSS 代碼可能沒有驗證 HTML 或者 JavaScript 代碼重要, 但是在一個 CSS 驗證器上運行你的代碼還是有幫助的, 它會提示你是否書寫了錯誤或者比較糟糕的代碼, 甚至會給出一些比較中肯的建議幫助你改進代碼.

有很多的工具可以完成這一工作.

在線工具 - W3 Validator , CSS Lint
文本編輯器插件 - Sublime Text , Atom
庫 - stylelint (Node.js, PostCSS), css-validator (Node.js)

來自：http://www.jianshu.com/p/7a4947e12b85

本文由用戶 rvtz3818 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1480388440762.html

CSS 前端技術