CSS有哪些提高效率的使用技巧

這篇文章給大家分享的是有關CSS中提高效率的使用技巧。小編覺得挺實用的，因此分享給大家學習。如下資料是關于CSS樣式使用技巧的內(nèi)容。

這些技巧分別是注意外邊距折疊，使用flex進行布局，所有元素設置為Border-box，重置元素的CSS樣式，使用transform屬性來創(chuàng)建動畫，短橫線命名，不要使用!important，使用AutoPrefixer達到更好的兼容性，Caniuse和驗證。 

1、注意外邊距折疊

與其他大多數(shù)屬性不同，上下的垂直外邊距margin在同時存在時會發(fā)生外邊距折疊。這意味著當一個元素的下邊緣接觸到另一個元素的上邊緣時，只會保留兩個margin值中較大的那個。例如：

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

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

CSS.square {

width: 80px;

height: 80px;

}

.red {

background-color: #F44336;

margin-bottom: 40px;

}

.blue {

background-color: #2196F3;

margin-top: 30px;

}

2、使用flex進行布局

flex彈性布局的出現(xiàn)是有原因的。浮動和inline-block雖然也能實現(xiàn)很多的布局效果，但它們本質(zhì)上是文本和塊元素布局的工具，而不是面向整個網(wǎng)頁的。flex可以很容易的按照我們預期的方式創(chuàng)建布局。

flex擁有一組面向&ldquo;彈性容器&rdquo;的屬性和一組面向&ldquo;彈性項目&rdquo;的屬性，一旦你學會了它們，做任何響應式布局都是小菜一碟。目前各類瀏覽器的最新版本對flex的支持性也是沒有任何問題的，所以你應該多多使用flex布局。

.container {

display: flex;

}

3、所有元素設置為Border-box

大多數(shù)初學者都不知道box-sizing這個屬性，但實際上它非常重要。box-sizing屬性有兩個值：content-box（默認） - 當我們設置一個元素的寬度或高度時，就是設置它的內(nèi)容的大小。所有的padding和邊框值都不包含。例如，一個div的寬度設置為100，padding為10，于是這個元素將占用120像素（100+2*10）。
border-box - padding與邊框包含在元素的寬度或高度中，一個設置為width: 100px和box-sizing:
border-box的div元素，他的總寬度就是100px，無論它的內(nèi)邊距和邊框有多少。

將所有元素都設置為border-box，可以更輕松的改變元素的大小，而不必擔心padding或者border值會將元素撐開變形或者換行顯示。

4、重置元素的CSS樣式

盡管這些年來有了很大的改善，但是不同瀏覽器對于各種元素的默認樣式仍然存在很大的差異。解決這個問題的最佳辦法是在CSS開頭為所有的元素設置通用的CSS Reset重置代碼，這樣你是在沒有任何默認內(nèi)外邊距的基礎上進行布局，于是所產(chǎn)生的效果也就是統(tǒng)一的。

網(wǎng)絡上已經(jīng)有成熟的CSS代碼庫為我們解決瀏覽器不一致問題，例如normalize.css、minireset和ress，你可以在你的項目中引用它們。如果你不想使用第三方代碼庫，你可以使用下面的樣式來進行一個非?；镜腃SS reset：

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

上面的代碼看起來有些霸道，將所有元素的內(nèi)外邊距都設置為0了，而正是沒有了這些默認內(nèi)外邊距的影響，使得我們后面的CSS設置會更加的容易。同時box-sizing: border-box也是一個很棒的設置，我們緊接著就會介紹它。
5、使用transform屬性來創(chuàng)建動畫

最好使用transform()函數(shù)來創(chuàng)建元素的位移或大小動畫，盡量不要直接改變元素的width，height以及l(fā)eft/top/bottom/right屬性值。

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

.ball {

left: 50px;

transition: 0.4s ease-out;

}

/* 不建議 */

.ball.slide-out {

left: 500px;

}

/* 建議 */

.ball.slide-out {

transform: translateX(450px);

}

transform以及它的所有函數(shù)（translate, rotate, scale等）幾乎沒有瀏覽器兼容性問題，可以隨意使用。

6、短橫線命名

當class或者ID包含多個單詞時，應使用連字符（-），CSS不區(qū)分大小寫，因此不能使用駝峰式命名。同樣，CSS中也不建議使用下劃線連接的命名方式。

/* 正確 */

.footer-column-left { }

/* 錯誤 */

.footerColumnLeft { }

.footer_column_left { }

7、不要使用!important

說真的，不要使用!important?，F(xiàn)在看起來可以快速的解決問題，但最終可能會導致大量的重寫。相反，我們應該花點時間找到CSS選擇器不工作的原因并更改它。

唯一可以使用的!important的地方是當您想要覆蓋HTML中的內(nèi)聯(lián)樣式時，但是內(nèi)聯(lián)樣式同樣也是一個壞的習慣，應該盡量的避免。

8、使用AutoPrefixer達到更好的兼容性

瀏覽器前綴是CSS中最煩人的事情之一，每個屬性需要的前綴是不一致的，你永遠不知道到底需要哪一個，如果真的要把它一個一個手動添加到樣式表中，那無疑是一個無聊的噩夢。

值得慶幸的是，有工具可以自動為我們提供添加瀏覽器前綴的功能，甚至可以決定需要支持哪些瀏覽器：
在線工具：Autoprefixer

文本編輯器插件：Sublime Text, Atom

代碼庫：Autoprefixer (PostCSS)

9、Caniuse

對于CSS的屬性Web瀏覽器仍然存在許多兼容性不一致的地方。使用caniuse來檢查您使用的屬性是否得到了廣泛的支持？是否需要前綴？或者是否在某個瀏覽器中使用有要注意的地方？有了caniuse你在寫CSS時就會更得心應手了。

10、驗證

驗證CSS可能不像驗證HTML或JavaScript代碼那么重要，但是通過工具運行一下你的代碼仍然非常有用。它會告訴你是否犯了任何錯誤，警告錯誤的用法，并為您提供改進代碼的提示。

就像壓縮和Autoprefixer一樣，有免費的工具可以利用：
在線

工具：W3 Validator, CSS Lint

文本編輯器插件：Sublime Text, Atom

代碼庫：stylelint (Node.js, PostCSS), css-validator (Node.js)

關于CSS中提高效率的使用技巧就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果喜歡這篇文章，不如把它分享出去讓更多的人看到。