前言

隨著前端開(kāi)發(fā)越來(lái)越關(guān)注效率：通過(guò)選擇器的使用和簡(jiǎn)化代碼來(lái)快速加載渲染样漆。像Less、SCSS這樣的預(yù)處理器在工作的時(shí)候晦闰，需要繞的路較長(zhǎng)放祟，而直接使用css速度會(huì)更快。這里涵蓋了20個(gè)css技巧來(lái)幫助你減少重復(fù)規(guī)則和復(fù)寫(xiě)呻右，在布局中標(biāo)準(zhǔn)化樣式流程跪妥，不僅可以幫助你高效地創(chuàng)建自己的框架，而且可以解決許多常見(jiàn)的問(wèn)題声滥。

1眉撵、使用CSS重置（reset）

css重置庫(kù)如normalize.css已經(jīng)被使用很多年了，它們可以為你的網(wǎng)站樣式提供一個(gè)比較清晰的標(biāo)準(zhǔn)落塑，來(lái)確迸ε保跨瀏覽器之間的一致性。大多數(shù)項(xiàng)目并不需要這些庫(kù)包含的所有規(guī)則憾赁，可以通過(guò)一條簡(jiǎn)單的規(guī)則來(lái)應(yīng)用于布局中的所有元素污朽，刪除所有的margin、padding改變?yōu)g覽器默認(rèn)的盒模型龙考。

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

使用box-sizing聲明是可選擇蟆肆，如果你使用下面繼承的盒模型形式可以跳過(guò)它

2矾睦、繼承盒模型

讓盒模型從html 繼承：

html{box-sizing:border-box;}*,*:before,*:after{box-sizing:inherit;}

3、使用flexbox布局來(lái)避免margin的問(wèn)題 （Get Rid of Margin hacks width Flexbox）

當(dāng)你多少次試著去設(shè)計(jì)柵格布局如：組合或者圖片畫(huà)廊颓芭，如果使用浮動(dòng)的方式顷锰，那么就需要去清除浮動(dòng)和重置外邊距來(lái)使其分解成所需要行數(shù)。為了避免nth-亡问、first-官紫、last-child 問(wèn)題 ，可以使用flexbox 的space-between 屬性值

.flex-container{display:flex;justify-content:space-between;}.flex-container.item{flex-basis:23%;}

4州藕、使用:not() 解決lists邊框的問(wèn)題

在web設(shè)計(jì)中束世，我們通常使用：last-child nth-child 選擇器來(lái)覆蓋原先聲明應(yīng)在父選擇器上的樣式。比如說(shuō)一個(gè)導(dǎo)航菜單床玻，通過(guò)使用borders 來(lái)給每個(gè)鏈接Link創(chuàng)建分割符毁涉，然后再在加上一條規(guī)則 解除最后一個(gè)link的border

.nav li{border-right:1px solid #666;}.nav li:last-child{border-right:none;}

這是一種很混亂的方式，它不僅強(qiáng)制瀏覽器以一種方式渲染锈死，然后又通過(guò)特定的選擇器來(lái)撤銷(xiāo)它贫堰。這樣覆蓋樣式是不可避免的。然而待牵，最重要的是其屏，我們可以通過(guò)使用：not偽類(lèi)(pseudo-class) 在你想聲明的元素上僅僅只使用一種樣式：

.nav li:not(:last-child){border-right:1px solid #666;}

上面就是，除了最后一個(gè)li以外缨该，所有的 .nav li? 都加上了border樣式偎行，是不是很簡(jiǎn)單！

當(dāng)然贰拿，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有語(yǔ)義化（semantic）和容易理解的蛤袒。

5、body上加入line-height樣式

導(dǎo)致低樣式效率（inefficient stylesheets）的一件事就是不斷的重復(fù)聲明膨更。最好是做下項(xiàng)目規(guī)劃和組合規(guī)則妙真，這樣CSS會(huì)更流暢。實(shí)現(xiàn)這一點(diǎn)荚守，就需要我們理解級(jí)聯(lián)（cascade）,以及如何在通用選擇器寫(xiě)的樣式可以繼承在其他地方隐孽。行間距（line-height）可以作為 給你的整個(gè)項(xiàng)目設(shè)置的一個(gè)屬性，不僅可以減小代碼量健蕊，而且可以讓你的網(wǎng)站的樣式給一個(gè)標(biāo)準(zhǔn)的外觀

body{line-height:1.5;}

請(qǐng)注意菱阵，這里的聲明沒(méi)有單位，我們只是告訴瀏覽器 讓它渲染行高是 渲染字體大小的1.5倍

6缩功、垂直居中任何元素? (vertical-center anything)

在沒(méi)有準(zhǔn)備使用CSSGrid 布局的時(shí)候晴及，設(shè)置垂直居中布局的全局規(guī)則是一個(gè)很好的方式，可以為優(yōu)雅（elegantly）的設(shè)置內(nèi)容布局奠定一個(gè)基礎(chǔ)

html,body{height:100%;margin:0;}body{-webkit-align-items:center;-ms-flex-align:center;align-items:center;display:-webkit-flex;display:flex;}

《這15種CSS居中的方式嫡锌，你都用過(guò)哪幾種虑稼？》

7琳钉、使用SVG icons

SVG使用于所有分辨類(lèi)，并且所有瀏覽器也都支持蛛倦。所以可以將.png .jpg .gif 等文件 丟棄歌懒。FontAwsome5中 也提供了SVG的圖標(biāo)字體。設(shè)置SVG的格式就跟其他圖片類(lèi)型一樣：

.logo{background:url("logo.svg");}

溫馨提示：如果將SVG用在可交互的元素上比如說(shuō)button溯壶，SVG 會(huì)產(chǎn)生無(wú)法加載的問(wèn)題及皂。可以通過(guò)下面這個(gè)規(guī)則來(lái)確保SVG可以訪問(wèn)到（確保在HTML中已設(shè)置適當(dāng)?shù)腶ria屬性）

.no-svg.icon-only:after{content:attr(aria-label);}

8且改、使用 “OWL選擇器”

使用通用選擇器（universal selector）* 和相鄰的兄弟選擇器（adjacent sibling selector）+ 可以提供一個(gè)強(qiáng)大的的CSS功能验烧，給緊跟其他元素中的文檔流中的所有元素設(shè)置統(tǒng)一的規(guī)則

*+*{margin-top:1.5rem;}

這是一個(gè)很棒的技巧，可以幫你創(chuàng)建更加均勻的類(lèi)型跟間距又跛。在上面的列子中碍拆，跟在其他元素后面的元素，比如說(shuō)H3后面的H4慨蓝，或者一個(gè)段落之后的一個(gè)段落感混，他們之間至少1.5rems的間距（大約為30px）

9、一致的垂直結(jié)構(gòu)（Consistent Vertical Rhythm）

一致的垂直節(jié)奏提供了一種視覺(jué)美學(xué)礼烈，使內(nèi)容更具可讀性浩习。如果owl選擇器過(guò)于通用，請(qǐng)?jiān)谠貎?nèi)使用通用選擇器（*）為布局的特定部分創(chuàng)建一致的垂直節(jié)奏：

.intro>*{margin-bottom:1.25rem;}

10济丘、對(duì)更漂亮的換行文本使用box-decoration-break

假設(shè)您希望對(duì)換行到多行的長(zhǎng)文本行應(yīng)用統(tǒng)一的間距、邊距洽蛀、突出顯示或背景色摹迷，但不希望整個(gè)段落或標(biāo)題看起來(lái)像一個(gè)大塊。Box Decoration Break屬性允許您僅對(duì)文本應(yīng)用樣式郊供，同時(shí)保持填充和頁(yè)邊距的完整性峡碉。如果要在懸停時(shí)應(yīng)用突出顯示，或在滑塊中設(shè)置子文本樣式以具有突出顯示的外觀驮审，則此功能尤其有用：

.p{display:inline-block;box-decoration-break:clone;-o-box-decoration-break:clone;-webkit-box-decoration-break:clone;}

內(nèi)聯(lián)塊聲明允許將顏色鲫寄、背景、頁(yè)邊距和填充應(yīng)用于每行文本疯淫，而不是整個(gè)元素地来，克隆聲明確保將這些樣式均勻地應(yīng)用于每行。

11熙掺、等寬表格單元格

表格可能很難處理未斑，所以嘗試使用table-layout：fixed來(lái)保持單元格相等寬度：

.calendar{table-layout:fixed;}

12、強(qiáng)制使用屬性選擇器顯示空鏈接

這對(duì)于通過(guò)CMS插入的鏈接特別有用币绩，CMS通常不具有類(lèi)屬性蜡秽，并幫助您在不影響級(jí)聯(lián)的情況下對(duì)其進(jìn)行特定樣式設(shè)置府阀。例如，<a>元素沒(méi)有文本值芽突，但href屬性有一個(gè)鏈接：

a[href^="http"]:empty::before{content:attr(href);}

13试浙、樣式“默認(rèn)”鏈接

說(shuō)到鏈接樣式，您可以在幾乎每個(gè)樣式表中找到一個(gè)通用的A樣式寞蚌。這迫使您為子元素中的任何鏈接編寫(xiě)額外的覆蓋和樣式規(guī)則田巴，并且在使用像WordPress這樣的CMS時(shí)，可能會(huì)導(dǎo)致您的主鏈接樣式比按鈕文本顏色更容易出現(xiàn)問(wèn)題睬澡。嘗試這種較少干擾的方式為“默認(rèn)”鏈接添加樣式：

a[href]:not([class]){color:#999;text-decoration:none;transition:all ease-in-out.3s;}

14固额、比率框

要?jiǎng)?chuàng)建具有固有比率的框，您需要做的就是將頂部或底部填充應(yīng)用于div：

.container{height:0;padding-bottom:20%;position:relative;}.container div{border:2px dashed #ddd;height:100%;left:0;position:absolute;top:0;width:100%;}

使用20％進(jìn)行填充使得框的高度等于其寬度的20％煞聪。無(wú)論視口的寬度如何斗躏，子div都將保持其縱橫比（100％/ 20％= 5：1）。

15昔脯、風(fēng)格破碎的圖像

這個(gè)技巧不是關(guān)于代碼縮減啄糙，而是關(guān)于細(xì)化設(shè)計(jì)細(xì)節(jié)的。破碎的圖像發(fā)生的原因有很多云稚，要么不雅觀隧饼，要么導(dǎo)致混亂（只是一個(gè)空元素）。用這個(gè)小小的CSS創(chuàng)建更美觀的效果：

img{display:block;font-family:Helvetica,Arial,sans-serif;font-weight:300;height:auto;line-height:2;position:relative;text-align:center;width:100%;}img:before{content:"We're sorry, the image below is missing :(";display:block;margin-bottom:10px;}img:after{content:"(url: "attr(src)")";display:block;font-size:12px;}

16静陈、使用rem進(jìn)行全局大小調(diào)整燕雁；使用em進(jìn)行局部大小調(diào)整

在設(shè)置根目錄的基本字體大小后，例如html字體大芯ㄓ怠：15px拐格；，可以將包含元素的字體大小設(shè)置為rem:

article{font-size:1.25rem;}aside{font-size:.9rem;}

然后將文本元素的字體大小設(shè)置為em

h2{font-size:2em;}p{font-size:1em;}

現(xiàn)在刑赶，每個(gè)包含的元素都變得分區(qū)化捏浊，更易于樣式化、更易于維護(hù)和靈活撞叨。

《web開(kāi)發(fā)中該用 em 還是 rem 呢金踪？》

17、隱藏未靜音的自動(dòng)播放視頻

當(dāng)您處理無(wú)法從源代碼輕松控制的內(nèi)容時(shí),這對(duì)于自定義用戶(hù)樣式表來(lái)說(shuō)是一個(gè)很好的技巧牵敷。這個(gè)技巧將幫助您避免在加載頁(yè)面時(shí)自動(dòng)播放視頻中的聲音干擾訪問(wèn)者胡岔，并再次提供了精彩的：not（）偽選擇器：

video[autoplay]:not([muted]){display:none;}

18、靈活運(yùn)用root類(lèi)型

響應(yīng)布局中的字體大小應(yīng)該能夠自動(dòng)調(diào)整到視區(qū)枷餐，從而保存編寫(xiě)媒體查詢(xún)的工作姐军，以處理字體大小。可以使用:not和視區(qū)單位奕锌，根據(jù)視區(qū)高度和寬度計(jì)算字體大兄酢：

:root{font-size:calc(1vw+1vh+.5vmin);}

現(xiàn)在，您可以使用根em單位惊暴，該單位基于:not：

body{font:1rem/1.6sans-serif;}

結(jié)合上面的rem/em技巧以獲得更好的控制饼丘。有關(guān)管理Safari舊版本的提示，請(qǐng)參閱CSS Fix for iOS VH Unit Bug辽话。

19肄鸽、在表單元素上設(shè)置字體大小，以獲得更好的移動(dòng)體驗(yàn)

為了避免移動(dòng)瀏覽器（iOS Safari等）在點(diǎn)擊<select>下拉列表時(shí)放大HTML表單元素油啤，請(qǐng)?jiān)谔砑觙ont-size樣式：

input[type="text"],input[type="number"],select,textarea{font-size:16px;}

20典徘、CSS變量

最后，最強(qiáng)大的CSS級(jí)別來(lái)自于CSS變量益咬，它允許您聲明一組公共屬性值逮诲，這些值可以通過(guò)樣式表中任何位置的關(guān)鍵字重用。你可能有一套顏色在整個(gè)項(xiàng)目中使用幽告，以保持一致性梅鹦。在CSS中反復(fù)重復(fù)這些顏色值不僅是件煩人的事情，而且還容易出錯(cuò)冗锁。如果某個(gè)顏色在某個(gè)時(shí)刻需要改變齐唆，你就不得不去尋找和替換，這是不可靠或不快速的冻河，當(dāng)為最終用戶(hù)構(gòu)建產(chǎn)品時(shí)箍邮，變量使得定制變得容易得多。例如：

:root{--main-color:#06c;--accent-color:#999;}h1,h2,h3{color:var(--main-color);}a[href]:not([class]),p,footer span{color:var(--accent-color);}