【譯】整理->20個讓你效率更高的CSS代碼技巧

時間 2019-11-29

標籤整理讓你效率高的 css 代碼技巧欄目 CSS 简体版

原文原文鏈接

譯者：果凍cc
原文連接： tutorialzine.com/2016/08/20-…

在本文中，咱們想與您分享一個由各大CSS網站總結推薦的20個有用的規則和實踐經驗集合。有一些是面向CSS初學者的，有一些知識點是進階型的。但願每一個人經過這篇文章都能學到對本身有用的知識。javascript

好了，咱們開始。css

1.注意外邊距摺疊

與其餘大多數屬性不一樣，上下的垂直外邊距margin在同時存在時會發生外邊距摺疊。這意味着當一個元素的下邊緣接觸到另外一個元素的上邊緣時，只會保留兩個margin值中較大的那個。例如：html

HTMLjava

<div class="square red"></div>
<div class="square blue"></div>複製代碼

CSSgit

.square {
    width: 80px;
    height: 80px;
}
.red {
    background-color: #F44336;
    margin-bottom: 40px;
}
.blue {
    background-color: #2196F3;
    margin-top: 30px;
}複製代碼

紅色方塊與藍色方塊的上下間距是40px，而不是70px。解決外邊距摺疊的方法有不少種，對於初學者來講最簡單的就是全部元素只使用一個方向上的margin，好比上下的外邊距咱們通通使用margin-bottom。github

2.使用flex進行佈局

flex彈性佈局的出現是有緣由的。浮動和inline-block雖然也能實現不少的佈局效果，但它們本質上是文本和塊元素佈局的工具，而不是面向整個網頁的。flex能夠很容易的按照咱們預期的方式建立佈局。npm

flex擁有一組面向「彈性容器」的屬性和一組面向「彈性項目」的屬性，一旦你學會了它們，作任何響應式佈局都是小菜一碟。目前各種瀏覽器的最新版本對flex的支持性也是沒有任何問題的，因此你應該多多使用flex佈局。編程

.container {
    display: flex;
}複製代碼

3.重置元素的CSS樣式

儘管這些年來有了很大的改善，可是不一樣瀏覽器對於各類元素的默認樣式仍然存在很大的差別。解決這個問題的最佳辦法是在CSS開頭爲全部的元素設置通用的CSS Reset重置代碼，這樣你是在沒有任何默認內外邊距的基礎上進行佈局，因而所產生的效果也就是統一的。瀏覽器

網絡上已經有成熟的CSS代碼庫爲咱們解決瀏覽器不一致問題，例如normalize.css、minireset和ress，你能夠在你的項目中引用它們。若是你不想使用第三方代碼庫，你可使用下面的樣式來進行一個很是基本的CSS reset：網絡

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}複製代碼

上面的代碼看起來有些霸道，將全部元素的內外邊距都設置爲0了，而正是沒有了這些默認內外邊距的影響，使得咱們後面的CSS設置會更加的容易。同時box-sizing: border-box也是一個很棒的設置，咱們緊接着就會介紹它。

4.全部元素設置爲Border-box

大多數初學者都不知道box-sizing這個屬性，但實際上它很是重要。box-sizing屬性有兩個值：

content-box（默認） - 當咱們設置一個元素的寬度或高度時，就是設置它的內容的大小。全部的padding和邊框值都不包含。例如，一個div的寬度設置爲100，padding爲10，因而這個元素將佔用120像素（100+2*10）。
border-box - padding與邊框包含在元素的寬度或高度中，一個設置爲width: 100px和box-sizing:
border-box的div元素，他的總寬度就是100px，不管它的內邊距和邊框有多少。

將全部元素都設置爲border-box，能夠更輕鬆的改變元素的大小，而沒必要擔憂padding或者border值會將元素撐開變形或者換行顯示。

5.將圖片做爲背景

當給頁面添加圖片時，尤爲須要圖片是響應式的時候，最好使用background屬性來引入圖片，而不是<img>標籤。

這看起來使用圖片會更復雜，但實際上它會使設置圖片的樣式變得更加容易。有了background-size, background-position和其它的屬性，保持或改變圖片原始尺寸和寬高比會更方便。

舉個例子
HTML

<section>
    <p>Img element</p>
    <img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle">
</section>

<section>
    <p>Div with background image</p>
    <div></div>
</section>複製代碼

CSS

img {
    width: 300px;
    height: 200px;
}

div {
    width: 300px;
    height: 200px;
    background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');
    background-position: center center;
    background-size: cover;
}

section{
    float: left;
    margin: 15px;
}複製代碼

background引入圖片的一個缺點是頁面的Web可訪問性會受到輕微的影響，由於屏幕閱讀器和搜索引擎沒法正確地獲取到圖像。這個問題能夠經過CSS object-fit屬性解決，到目前爲止除了IE瀏覽器其餘的瀏覽器均可以使用object-fit。

6.更好的表格邊框

HTML中的表格老是很難看的。它們很難作成響應式的，並且整體上很難改變樣式。例如，若是要向表格及其單元格添加簡單的邊框，則最可能的結果是：

如你所見，有不少重複的邊框，看起來很很差看。這裏有一個快速的方法來刪除全部的雙倍邊框：border-collapse: collapse，只需設置這個屬性後，表格的邊框看起來就順眼多了：

7.更友好的註釋

CSS也許不是一種編程語言，但其代碼仍然須要文檔化。添加一些簡單的註釋能夠將代碼分類區分，方便本身和同過後期維護。

對於大的區域劃分或者重要的組件可使用下面的註釋樣式：

/*--------------- #Header ---------------*/
header { }

header nav { }

/*--------------- #Slideshow ---------------*/
.slideshow { }複製代碼

對於細節和不過重要的樣式可使用單行的註釋方式：

/* Footer Buttons */
.footer button { }

.footer button:hover { }複製代碼

另外，請記住，CSS中沒有//註釋，只有/**/註釋：

/* 正確 */
p {
    padding: 15px;
    /*border: 1px solid #222;*/
}

/* 錯誤 */
p {
    padding: 15px;
    // border: 1px solid #222; 
}複製代碼

8.短橫線命名

當class或者ID包含多個單詞時，應使用連字符（-），CSS不區分大小寫，所以不能使用駝峯式命名。一樣，CSS中也不建議使用下劃線鏈接的命名方式。

/* 正確 */
.footer-column-left { }

/* 錯誤 */
.footerColumnLeft { }

.footer_column_left { }複製代碼

當涉及到命名時，您還能夠考慮BEM，它遵循一組原則，提供基於組件並增長一致性的開發方法。

9.不要重複設置

大多數CSS屬性的值都是從DOM樹中向上一級的元素繼承的，所以才被命名爲級聯樣式表。以font屬性爲例-它老是從父級繼承的，您沒必要爲頁面上的每一個元素都單獨設置。

只需將要設置的字體樣式添加到<html>或<body>元素中，而後讓它們自動向下繼承。

html {
    font: normal 16px/1.4 sans-serif;
}複製代碼

而後咱們就能夠統一的一次改變頁面上全部的文字樣式了。固然，CSS中並非全部的屬性都是可繼承的，對於這些屬性咱們仍然須要在每一個元素上單獨設置。

10.使用transform屬性來建立動畫

最好使用transform()函數來建立元素的位移或大小動畫，儘可能不要直接改變元素的width，height以及left/top/bottom/right屬性值。

下面的例子中，咱們給.ball元素添加了一個從左向右的移動動畫。推薦使用transform: translateX()函數來代替left屬性。

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}

/* 不建議 */
.ball.slide-out {
    left: 500px;
}

/* 建議 */
.ball.slide-out {
    transform: translateX(450px);
}複製代碼

transform以及它的全部函數（translate, rotate, scale等）幾乎沒有瀏覽器兼容性問題，能夠隨意使用。

11.不要DIY，多使用代碼庫

CSS社區很是龐大，不斷有新的代碼庫出現。它們有各類用途，從微小的片斷到構建響應式應用程序的總體框架。其中大多數也是開源的。

下一次當你面對一個CSS問題時，在你試圖費盡全力解決它以前，檢查一下Github或Codepen上是否已經有了一個可用的解決方案。

12.保持選擇器的低權重

css的選擇器並不都是平等的。當初學習CSS時，我老是認爲選擇器會覆蓋它上面的全部內容。然而，狀況並不是如此，就如咱們在下面的示例中所說明的：

HTML

<a href='#' id='blue-btn' class="active">按鈕</a>複製代碼

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;
}複製代碼

15.Em, Rem與px

設置元素與文本的大小應該用哪一種單位，em，rem，仍是px？一直以來都有不少的爭論。事實是，這三種選擇都是可行的，都有其利弊。

在何時在什麼項目使用哪一種單位是沒有一個定論的，開發人員的習慣不一樣，項目的要求不一樣，均可能會使用不一樣的單位。然而，雖然沒有固定的規則，可是每種單位仍是有一些要注意的地方的：

em - 設置元素爲1em，其大小與父元素的font-size屬性有關。這個單位用於媒體查詢中，特別適用於響應式開發，可是因爲em單位在每一級中都是相對於父元素進行計算的，因此要得出某個子元素em單位對應的px值，有時候是很麻煩的。
rem - 相對於<html>元素的font-size大小計算，rem使得統一改變頁面上的全部標題和段落文本大小變得很是容易。
px - 像素單位是最精確的，可是不適用於自適應的設計。px單位是可靠的，而且易於理解，咱們能夠精細的控制元素的大小和移動到1px。

最重要的是，不要懼怕嘗試，嘗試全部方法，看看最適合什麼。有時候，em和rem能夠節省不少工做，尤爲是在構建響應式頁面時。

16.對於大型項目使用預處理器

你必定據說過它們 - Sass, Less, PostCSS, Stylus。預處理器是CSS的將來。它們提供諸如變量、CSS函數、選擇器嵌套和許多其餘很酷的功能，使CSS代碼更易於管理，特別是在大型項目中。

舉個簡單的例子，下面是一個SASS代碼的片斷，它使用到了一些CSS變量和函數：

$accent-color: #2196F3;
a {
    padding: 10px 15px;
    background-color: $accent-color;
}
a:hover {
    background-color: darken($accent-color,10%);
}複製代碼

預處理器的惟一的不足之處是它們任然須要編譯成普通的CSS。而CSS推出的自定義屬性則是真正意義上的預處理。