編程學(xué)習(xí)網(wǎng) > WEB開發(fā) > CSS+DIV > 20個(gè)CSS 代碼建議
2016
11-29

20個(gè)CSS 代碼建議

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

1. 謹(jǐn)慎使用外邊距屬性

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

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

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

2. 利用盒子模型布局

盒子模型自然有其存在的理由。float和inline-block當(dāng)然也可以工作，但它們都是樣式化文檔的基礎(chǔ)工具，而不是整個(gè)網(wǎng)站。從某種意義來說，F(xiàn)lexbox是為更容易更精確創(chuàng)建我們想要的布局而設(shè)計(jì)的。

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

.container { display: flex; /* Don't forget to add prefixes for Safari */ display: -webkit-flex;
    }

3. 執(zhí)行 CSS 重置

盡管這些年來情形已經(jīng)有所好轉(zhuǎn)，但是各瀏覽器的默認(rèn)行為還是存在很多分歧。解決這個(gè)問題最好的辦法就是使用一個(gè)CSS重置文件為所有元素重新設(shè)置默認(rèn)樣式。這可以讓你在一個(gè)純凈的樣式環(huán)境下工作，并且在所有瀏覽器中產(chǎn)生相同的結(jié)果。

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

* { margin: 0; padding: 0; box-sizing: border-box;
    }

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

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

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

  • content-box(default) - 當(dāng)我們?yōu)樵卦O(shè)置了寬度和高度，但那只是內(nèi)容的尺寸。所有的padding和border都在不包含在內(nèi)容當(dāng)中，也就是在內(nèi)容的外部。舉例來說，如果我們有一個(gè)div它的寬度為 100px，padding為 10px, 那么它的實(shí)際寬度為 120px。

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

為所有元素設(shè)置border-box將有利于樣式化，而且你在也不用做乏味的數(shù)學(xué)運(yùn)算了。

5. 圖像作為背景

當(dāng)你為自己的站點(diǎn)添加圖片時(shí)，尤其是你想做響應(yīng)式設(shè)計(jì)的時(shí)候，利用一個(gè)div標(biāo)簽并為其設(shè)置background屬性，而不是使用<img>元素。

似乎額外的工作并沒有起到任何作用，但實(shí)際上這更利于你對圖片設(shè)置樣式，保持它們原有的尺寸或者根據(jù)比例變化，這需要借助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;
    }

這種技術(shù)的一個(gè)缺點(diǎn)是你頁面的可訪問性可能略有打擊，因?yàn)槟愕膱D片不會被屏幕閱讀器和引擎正確抓取。 這個(gè)問題可以被 object-fit 解決，但它還不被所有瀏覽器支持。

6. 更好的 Table 邊框

HTML中的table沒什么意思。它們非常古怪，難以設(shè)計(jì)成響應(yīng)式的，而且很難與整體風(fēng)格一致。比如說，你想為table和其中的元素添加上邊框，你可能會得到下面的結(jié)果。


demo01.png

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


demo02.png

這樣看起來就好多了。

7. 更好的注釋方式

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

對于CSS中的一些比較大的模塊，比如主要模塊或者媒體查詢，使用風(fēng)格化的注釋并且在其后留下一些空行。 

/*---------------
        #Header
    ---------------*/ header { } header nav { } /*---------------
        #Slideshow
    ---------------*/ .slideshow { }

設(shè)計(jì)中的一些細(xì)節(jié)或那些不是特別重要的模塊，可以用單行注釋。 

/*   Footer Buttons   */ .footer button { } .footer button:hover { }

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

/*  Do  */ p {
        padding: 15px; /*border: 1px solid #222;*/ } /*  Don't  */ p {
        padding: 15px; // border: 1px solid #222;  }

8. 命名連接

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

/*  Do     */ .footer-column-left { } /*  Don't  */ .footerColumnLeft { } .footer_column_left { }

9. 不要重復(fù)設(shè)置

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

你只需要為<html>或者<body>設(shè)置font樣式，然后讓它一級一級流傳下去就可以了。 下面是一個(gè)很好的例子。 

html { font: normal 16px/1.4 sans-serif;
    }

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

10. CSS 動畫與變換

不要通過直接更改元素的寬度和高度去動畫元素，或者是更改left/right/top/bottom。最好的辦法是使用transform()屬性因?yàn)樗峁┝烁訄A滑的過渡效果而且可以讓你的意圖在閱讀代碼時(shí)更加易于理解。

下面是一個(gè)例子，我們想動畫一個(gè)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社區(qū)非常的龐大而且不斷出現(xiàn)新的庫。 庫被提供于各種用途，從小片段到完善的框架，用于構(gòu)建響應(yīng)式程序，而且它們當(dāng)中大部分都是開源的。

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

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

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

a{ color: #fff; padding: 15px;
    } a#blue-btn { background-color: blue;
    } a.active { background-color: red;
    }

我們想為所有按鈕添加.active類使其變?yōu)榧t色，但這是不起作用的，因?yàn)榘粹o已經(jīng)被一個(gè)id選擇器設(shè)置了background-color，而id選擇器具有更高的特指度。它們之間的規(guī)則就像下面這樣：

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

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

13. 不要使用 !important

很認(rèn)真的告訴你，不要使用!important。 即時(shí)的一個(gè)快速修復(fù)在將來可能導(dǎo)致大量的重寫。相反，找出你CSS選擇器不工作的原因，并且嘗試去修復(fù)它。

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

14. 使用 text-transform

在HTML中，當(dāng)你使用大寫字母的時(shí)候可能是出于某種語義目的，比如說你想強(qiáng)調(diào)一個(gè)單詞的重要性。 

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

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

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

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

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

15. Em， Rem 和 Pixel

人們在對元素和文本設(shè)置尺寸應(yīng)該用em，rem還是px有很多的爭論。事實(shí)是，這三者都是可行的，有自己的優(yōu)點(diǎn)和缺點(diǎn)。

所有的開發(fā)者和項(xiàng)目都是不同的，所以不應(yīng)該有什么嚴(yán)格的規(guī)則說明什么時(shí)候該用哪一種。下面是一些提示和良好的做法：

  • em- 1em的大小與直接父元素的字體大小有關(guān)。 通常用于媒體查詢，em對響應(yīng)式設(shè)計(jì)而言是非常棒的 ，但是將每個(gè)元素的em值轉(zhuǎn)換為px的比例是非常難以計(jì)算的，因?yàn)槟憧赡芤贒OM樹上逐級跟蹤元素。

  • rem- 以<html>元素中的font-size為基準(zhǔn)，rem將比例化頁面中的標(biāo)題和段落變得很容易。保持<html>中默認(rèn)的font-size并且為其它的元素設(shè)置rem是一種非常棒的方法。

  • px- 像素是最精確的控制方式，但是在 響應(yīng)式設(shè)計(jì)中它并不友好，因?yàn)樗粫S屏幕大小變化而自動縮放。它們是可靠的，易于理解的，并且在值和實(shí)際結(jié)果之間呈現(xiàn)出良好的視覺聯(lián)系。

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

16. 在大項(xiàng)目中使用預(yù)處理器

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

舉個(gè)簡單的例子，下面是使用了CSS變量和函數(shù)的Sass代碼片段。 

$accent-color: #2196F3; a {
        padding: 10px 15px;
        background-color: $accent-color;
    }

    a:hover {
        background-color: darken($accent-color,10%);
    }

使用CSS預(yù)處理器的唯一缺點(diǎn)是，它們需要編譯成真正的CSS代碼，但是如果你已經(jīng)決定在你的項(xiàng)目中使用一個(gè)構(gòu)建腳本，那么這就不再是你應(yīng)該煩惱的問題了。

如果你想了解更多關(guān)于預(yù)處理器的知識，請查看目前最受歡迎的兩個(gè)系統(tǒng)的教程 - Sass 和 Less.

17. Autoprefixers

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

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

18. 在項(xiàng)目中使用精簡代碼

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

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

根據(jù)你的工作流程,你可以選用上述一個(gè)選項(xiàng),但是建議你總是使用某種方式自動執(zhí)行此過程.

19. Can I Use

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

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

20. Validate

驗(yàn)證CSS代碼可能沒有驗(yàn)證HTML或者JavaScript代碼重要, 但是在一個(gè)CSS驗(yàn)證器上運(yùn)行你的代碼還是有幫助的, 它會提示你是否書寫了錯(cuò)誤或者比較糟糕的代碼, 甚至?xí)o出一些比較中肯的建議幫助你改進(jìn)代碼.

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


掃碼二維碼 獲取免費(fèi)視頻學(xué)習(xí)資料

Python編程學(xué)習(xí)

查 看2022高級編程視頻教程免費(fèi)獲取