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

成都創(chuàng)新互聯(lián)長(zhǎng)期為近千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏(yíng)平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為思明企業(yè)提供專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站，思明網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

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

1、注意外邊距折疊

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

HTML

CSS.square {

width: 80px;

height: 80px;

}

.red {

background-color: #F44336;

margin-bottom: 40px;

}

.blue {

background-color: #2196F3;

margin-top: 30px;

}

2、使用flex進(jìn)行布局

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

flex擁有一組面向“彈性容器”的屬性和一組面向“彈性項(xiàng)目”的屬性，一旦你學(xué)會(huì)了它們，做任何響應(yīng)式布局都是小菜一碟。目前各類(lèi)瀏覽器的最新版本對(duì)flex的支持性也是沒(méi)有任何問(wèn)題的，所以你應(yīng)該多多使用flex布局。

.container {

display: flex;

}

3、所有元素設(shè)置為Border-box

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

將所有元素都設(shè)置為border-box，可以更輕松的改變?cè)氐拇笮。槐負(fù)?dān)心padding或者border值會(huì)將元素?fù)伍_(kāi)變形或者換行顯示。

4、重置元素的CSS樣式

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

網(wǎng)絡(luò)上已經(jīng)有成熟的CSS代碼庫(kù)為我們解決瀏覽器不一致問(wèn)題，例如normalize.css、minireset和ress，你可以在你的項(xiàng)目中引用它們。如果你不想使用第三方代碼庫(kù)，你可以使用下面的樣式來(lái)進(jìn)行一個(gè)非常基本的CSS reset：

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

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

最好使用transform()函數(shù)來(lái)創(chuàng)建元素的位移或大小動(dòng)畫(huà)，盡量不要直接改變?cè)氐膚idth，height以及l(fā)eft/top/bottom/right屬性值。

下面的例子中，我們給.ball元素添加了一個(gè)從左向右的移動(dòng)動(dòng)畫(huà)。推薦使用transform: translateX()函數(shù)來(lái)代替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等）幾乎沒(méi)有瀏覽器兼容性問(wèn)題，可以隨意使用。

6、短橫線(xiàn)命名

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

/* 正確 */

.footer-column-left { }

/* 錯(cuò)誤 */

.footerColumnLeft { }

.footer_column_left { }

7、不要使用!important

說(shuō)真的，不要使用!important。現(xiàn)在看起來(lái)可以快速的解決問(wèn)題，但最終可能會(huì)導(dǎo)致大量的重寫(xiě)。相反，我們應(yīng)該花點(diǎn)時(shí)間找到CSS選擇器不工作的原因并更改它。

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

8、使用AutoPrefixer達(dá)到更好的兼容性

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

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

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

代碼庫(kù)：Autoprefixer (PostCSS)

9、Caniuse

對(duì)于CSS的屬性Web瀏覽器仍然存在許多兼容性不一致的地方。使用caniuse來(lái)檢查您使用的屬性是否得到了廣泛的支持？是否需要前綴？或者是否在某個(gè)瀏覽器中使用有要注意的地方？有了caniuse你在寫(xiě)CSS時(shí)就會(huì)更得心應(yīng)手了。

10、驗(yàn)證

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

就像壓縮和Autoprefixer一樣，有免費(fèi)的工具可以利用：
在線(xiàn)

工具：W3 Validator, CSS Lint

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

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

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