CSS代碼技巧有哪些

小編給大家分享一下CSS代碼技巧有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1.注意外邊距折疊

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

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

紅色方塊與藍(lán)色方塊的上下間距是40px，而不是70px。解決外邊距折疊的方法有很多種，對(duì)于初學(xué)者來(lái)說(shuō)最簡(jiǎn)單的就是所有元素只使用一個(gè)方向上的margin，比如上下的外邊距我們統(tǒng)統(tǒng)使用margin-bottom。

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.重置元素的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ì)介紹它。

4.所有元素設(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)變形或者換行顯示。

5.將圖片作為背景

當(dāng)給頁(yè)面添加圖片時(shí)，尤其需要圖片是響應(yīng)式的時(shí)候，最好使用background屬性來(lái)引入圖片，而不是<img>標(biāo)簽。

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

舉個(gè)例子
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引入圖片的一個(gè)缺點(diǎn)是頁(yè)面的Web可訪(fǎng)問(wèn)性會(huì)受到輕微的影響，因?yàn)槠聊婚喿x器和搜索引擎無(wú)法正確地獲取到圖像。這個(gè)問(wèn)題可以通過(guò)CSS object-fit屬性解決，到目前為止除了IE瀏覽器其他的瀏覽器都可以使用object-fit。

6.更好的表格邊框

HTML中的表格總是很難看的。它們很難做成響應(yīng)式的，而且總體上很難改變樣式。例如，如果要向表格及其單元格添加簡(jiǎn)單的邊框，則最可能的結(jié)果是：

如你所見(jiàn)，有很多重復(fù)的邊框，看起來(lái)很不好看。這里有一個(gè)快速的方法來(lái)刪除所有的雙倍邊框：border-collapse: collapse，只需設(shè)置這個(gè)屬性后，表格的邊框看起來(lái)就順眼多了：

7.更友好的注釋

CSS也許不是一種編程語(yǔ)言，但其代碼仍然需要文檔化。添加一些簡(jiǎn)單的注釋可以將代碼分類(lèi)區(qū)分，方便自己和同事后期維護(hù)。

對(duì)于大的區(qū)域劃分或者重要的組件可以使用下面的注釋樣式：

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

header nav { }

/*---------------
    #Slideshow
---------------*/
.slideshow { }

對(duì)于細(xì)節(jié)和不太重要的樣式可以使用單行的注釋方式：

/*   Footer Buttons   */
.footer button { }

.footer button:hover { }

另外，請(qǐng)記住，CSS中沒(méi)有//注釋?zhuān)挥?**/注釋?zhuān)?/p>

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

/*  錯(cuò)誤  */
p {
    padding: 15px;
    // border: 1px solid #222;  
}

8.短橫線(xiàn)命名

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

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

/*  錯(cuò)誤  */
.footerColumnLeft { }

.footer_column_left { }

當(dāng)涉及到命名時(shí)，您還可以考慮BEM，它遵循一組原則，提供基于組件并增加一致性的開(kāi)發(fā)方法。

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

大多數(shù)CSS屬性的值都是從DOM樹(shù)中向上一級(jí)的元素繼承的，因此才被命名為級(jí)聯(lián)樣式表。以font屬性為例-它總是從父級(jí)繼承的，您不必為頁(yè)面上的每個(gè)元素都單獨(dú)設(shè)置。

只需將要設(shè)置的字體樣式添加到<html>或<body>元素中，然后讓它們自動(dòng)向下繼承。

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

然后我們就可以統(tǒng)一的一次改變頁(yè)面上所有的文字樣式了。當(dāng)然，CSS中并不是所有的屬性都是可繼承的，對(duì)于這些屬性我們?nèi)匀恍枰诿總€(gè)元素上單獨(dú)設(shè)置。

10.使用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)題，可以隨意使用。

11.不要DIY，多使用代碼庫(kù)

CSS社區(qū)非常龐大，不斷有新的代碼庫(kù)出現(xiàn)。它們有各種用途，從微小的片段到構(gòu)建響應(yīng)式應(yīng)用程序的整體框架。其中大多數(shù)也是開(kāi)源的。

下一次當(dāng)你面對(duì)一個(gè)CSS問(wèn)題時(shí)，在你試圖費(fèi)盡全力解決它之前，檢查一下Github或Codepen上是否已經(jīng)有了一個(gè)可用的解決方案。

12.保持選擇器的低權(quán)重

css的選擇器并不都是平等的。當(dāng)初學(xué)習(xí)CSS時(shí)，我總是認(rèn)為選擇器會(huì)覆蓋它上面的所有內(nèi)容。然而，情況并非如此，就如我們?cè)谙旅娴氖纠兴f(shuō)明的：

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類(lèi)中設(shè)置的樣式會(huì)生效使按鈕變?yōu)榧t色。但是它并不會(huì)起作用，因?yàn)榘粹o在上面有一個(gè)ID選擇器，它同樣設(shè)置了background-color，ID選擇器具有更高的權(quán)重，所以按鈕的顏色是藍(lán)色的。選擇器的權(quán)重大小規(guī)格如下：

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

權(quán)重也會(huì)疊加，于是a#button.active的權(quán)重要比a#button的高。一開(kāi)始就使用高權(quán)重的選擇器會(huì)導(dǎo)致你在后面的維護(hù)中不斷的使用更高權(quán)重的選擇器，最終選擇使用!important，這是非常不推薦的，具體的原因緊接著就會(huì)講到。

13.不要使用!important

說(shuō)真的，不要使用!important?，F(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)該盡量的避免。

14.使用text-transform轉(zhuǎn)換字母為大寫(xiě)

本條適用于英文環(huán)境，不適合中文

在HTML中，可以將某個(gè)單詞全部寫(xiě)為大寫(xiě)字母來(lái)表達(dá)強(qiáng)調(diào)的含義。比如：

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

如果你需要將某段文字全部轉(zhuǎn)化為大寫(xiě)，我們可以在HTML中正常書(shū)寫(xiě)，然后通過(guò)CSS來(lái)轉(zhuǎn)化。這樣可以保持上下文內(nèi)容的一致性。

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

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

15.Em, Rem與px

設(shè)置元素與文本的大小應(yīng)該用哪種單位，em，rem，還是px？一直以來(lái)都有很多的爭(zhēng)論。事實(shí)是，這三種選擇都是可行的，都有其利弊。

在什么時(shí)候在什么項(xiàng)目使用哪種單位是沒(méi)有一個(gè)定論的，開(kāi)發(fā)人員的習(xí)慣不同，項(xiàng)目的要求不同，都可能會(huì)使用不同的單位。然而，雖然沒(méi)有固定的規(guī)則，但是每種單位還是有一些要注意的地方的：

• em - 設(shè)置元素為1em，其大小與父元素的font-size屬性有關(guān)。這個(gè)單位用于媒體查詢(xún)中，特別適用于響應(yīng)式開(kāi)發(fā)，但是由于em單位在每一級(jí)中都是相對(duì)于父元素進(jìn)行計(jì)算的，所以要得出某個(gè)子元素em單位對(duì)應(yīng)的px值，有時(shí)候是很麻煩的。

• rem - 相對(duì)于<html>元素的font-size大小計(jì)算，rem使得統(tǒng)一改變頁(yè)面上的所有標(biāo)題和段落文本大小變得非常容易。

• px - 像素單位是最精確的，但是不適用于自適應(yīng)的設(shè)計(jì)。px單位是可靠的，并且易于理解，我們可以精細(xì)的控制元素的大小和移動(dòng)到1px。

最重要的是，不要害怕嘗試，嘗試所有方法，看看最適合什么。有時(shí)候，em和rem可以節(jié)省很多工作，尤其是在構(gòu)建響應(yīng)式頁(yè)面時(shí)。

16.對(duì)于大型項(xiàng)目使用預(yù)處理器

你一定聽(tīng)說(shuō)過(guò)它們 - Sass, Less, PostCSS, Stylus。預(yù)處理器是CSS的未來(lái)。它們提供諸如變量、CSS函數(shù)、選擇器嵌套和許多其他很酷的功能，使CSS代碼更易于管理，特別是在大型項(xiàng)目中。

舉個(gè)簡(jiǎn)單的例子，下面是一個(gè)SASS代碼的片段，它使用到了一些CSS變量和函數(shù)：

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

預(yù)處理器的唯一的不足之處是它們?nèi)稳恍枰幾g成普通的CSS。而CSS推出的自定義屬性則是真正意義上的預(yù)處理。

17.使用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)

18.壓縮CSS文件

為了提高網(wǎng)站和應(yīng)用程序的加載速度和頁(yè)面負(fù)載，您應(yīng)該使用壓縮后的資源。壓縮版本的文件將刪除所有空白和重復(fù)，從而減少總文件的體積。當(dāng)然，這個(gè)過(guò)程也會(huì)使樣式表完全不可讀，所以要在生產(chǎn)環(huán)境中使用.min版本，同時(shí)為開(kāi)發(fā)保留常規(guī)版本。

有許多不同的方法來(lái)壓縮CSS代碼：

在線(xiàn)工具：CSS Minifier, CSS Compressor

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

Atom代碼庫(kù)：Minfiy (PHP), CSSO, CSSNano (PostCSS, Grunt, Gulp)

根據(jù)您的工作流程，可以使用上述任何一種方式。

19.Caniuse

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

20.驗(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)

以上是“CSS代碼技巧有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！