提升您的CSS 20 Pro CSS技巧

前端的快速發(fā)展越來越注重效率–更快的加載和渲染通過選擇器選擇和減少代碼。預(yù)處理器和麗不喜歡很長的路要走，我們所做的一些工作，但是有很多方式來寫最小，快速的CSS地道。本指南包括20 Pro CSS技巧來幫助你減少重復(fù)的規(guī)則和重寫，規(guī)范的造型在你的布局與流量將幫助您創(chuàng)建一個個人的框架，不僅是有效的，但是解決許多常見的問題。

如果你對CSS的相對較新的，看看權(quán)力的CSS選擇器和如何使用它們在很多超選擇這里的特色深入底漆。

1–使用CSS重置

CSS重置的圖書館一樣，normalize.css已經(jīng)多年了，對于你的網(wǎng)站的風(fēng)格，有助于確?？鐬g覽器的一致性更好的提供一個干凈的石板。大多數(shù)項目不需要所有這些圖書館的規(guī)則包括，可以得到一個簡單的規(guī)則來消除所有的利潤和填料應(yīng)用于大多數(shù)元素在你的布局由瀏覽器默認(rèn)的盒模型：

* {
 
盒尺寸：邊界盒；
 
保證金：0；
 
填充

使用盒尺寸聲明是可選的–如果你追隨繼承盒尺寸提示下，你可以跳過它。
2–繼承盒尺寸

讓盒尺寸被繼承HTML：

html {
 
盒尺寸：邊界盒；
 
 }
 
 *，*：前，后{
 
 *：盒尺寸：繼承

這使得它更容易改變盒尺寸當(dāng)代碼是通過第三方插件或使用不同行為的應(yīng)用介紹。
3–擺脫邊緣與flexbox黑客

有多少次你想設(shè)計一個網(wǎng)格，如組合或圖像畫廊，在那里你用彩車，然后清除或復(fù)位的利潤得到柱打入行您所要的號碼嗎？擺脫n，第一，和最后一個孩子的黑客利用空間之間在flexbox屬性值：

。Flex容器{
 
顯示：彎曲；
 
證明內(nèi)容：空間之間；
 
 }
 
。Flex容器。項目{
 
柔性基礎(chǔ)

現(xiàn)在列溝總是出現(xiàn)間隔均勻。了解更多關(guān)于flexbox與5個簡單的步驟，掌握CSS flexbox
4–使用：not()在列舉式的邊界

在網(wǎng)頁設(shè)計中一個很常見的做法是使用：最后一個孩子或：nth-child選擇器撤銷先前宣布的對父選擇器的樣式。想一個導(dǎo)航菜單，使用邊界創(chuàng)建鏈接之間的隔膜，和第二補充規(guī)則，以邊境關(guān)閉結(jié)束：

李{
。資產(chǎn)凈值
邊境：1px solid # 666；
 
 }
 
。導(dǎo)航李：最后一個孩子{
 
邊境權(quán)：無

這是相當(dāng)混亂，因為它不僅迫使瀏覽器渲染的一件事，然后解開它的特定的選擇器。復(fù)位方式這種方式有時是不可避免的，但是最重要的是，你可以使用：not()偽類僅適用于一個風(fēng)格，你想在一個聲明的元素：

李：不是。資產(chǎn)凈值（：最后一個孩子）{
 
邊框右：1px solid # 666；

這個說，把邊界上的所有資產(chǎn)凈值。除了最后一個列表項。簡單的！

當(dāng)然，你也可以使用資產(chǎn)凈值+李李。甚至李：第一個孩子。資產(chǎn)凈值~李，但：not()總會有更多的語義和容易理解。

5–添加線高度到身體

一件事導(dǎo)致低效的樣式是一遍又一遍的重復(fù)聲明。好讓你在規(guī)劃你的項目和組合規(guī)則，更流暢的將CSS。一個辦法是了解級聯(lián)和你如何寫通用選擇器的樣式可以繼承的其他地方。線的高度是一個屬性可以設(shè)置為您的整個項目，不僅可以減少代碼行，但執(zhí)行標(biāo)準(zhǔn)看你的網(wǎng)站的排版。

而不是增加線高度每一個

，< h >等，將它添加到身體：

體{
 
線高度：1.5；

請注意我們不申報單位在這里–我們告訴它做線高度的一倍半以上為呈現(xiàn)文本的字體大小。
6–垂直中心的東西

設(shè)置一個全局規(guī)則垂直中心布局是設(shè)置基礎(chǔ)設(shè)置內(nèi)容布局優(yōu)雅，你不準(zhǔn)備使用CSS網(wǎng)格的一個好方法。

HTML，體{
 
高度：100%；
 
保證金：0；
 
 }
 
體{
 
 WebKit項目：中心對齊；
 
 MS Flex對齊：中心；
 
對齊項目：中心；
 
顯示

我們進入細(xì)節(jié)你可以垂直中心事物的方式CSS垂直居中一切你需要知道的
7–使用SVG圖標(biāo)

SVG的規(guī)模以及決議所有類型和所有的瀏覽器都支持。所以放棄。PNG，JPG，GIF，或如果任何文件。即使FontAwesome現(xiàn)在提供SVG圖標(biāo)字體fontawesome 5。設(shè)置SVG工作就像任何其他的圖像類型：

。標(biāo)志{
 
背景：URL（”標(biāo)志。SVG）；

可提示：如果你使用SVG為交互元素，如按鈕和SVG加載失敗，這樣的規(guī)定將幫助保持可達性（確保有適當(dāng)?shù)脑亣@調(diào)屬性設(shè)置在HTML）：

。沒有SVG。圖標(biāo)：
 
內(nèi)容后，{：attr（詠嘆調(diào)
標(biāo)簽）；

8–使用“貓頭鷹”選擇器

使用通用選擇器（*與相鄰?fù)x擇器（）+）提供了一個強大的CSS的能力，使我們能夠?qū)λ性卦谖臋n流，特別跟其他元素設(shè)置規(guī)則：

* + * {
 
邊距：1.5rem；

這是一個很棒的技巧，可以幫助你創(chuàng)建更均勻型和間距。在上面的例子中，所有的元素，其他元素，如H4，如下一個H3，或一段一段，都會有至少1.5rems空間（約等于30px。）
9–垂直節(jié)奏一致

一致的垂直節(jié)奏提供了一個視覺審美，使內(nèi)容更可讀。在貓頭鷹選擇器可太一般，使用通用選擇器（*）元素內(nèi)創(chuàng)建你的布局的特定部分一致的垂直節(jié)奏：

。介紹> * {
 
 margin-bottom: 1.25rem；

10–使用包廂裝修打破對于漂亮的包裝文字

說你想應(yīng)用均勻間距，邊距，亮點或背景顏色的長長的文字，包多行，但不想整個段落或標(biāo)題看起來像一個大的塊。這個包廂裝修打破屬性允許您將樣式應(yīng)用于文本而不只是填充和邊緣完整。這是特別有用，如果你想申請的亮點在盤旋，或風(fēng)格的文本在一個滑塊有突出的樣子：

P {
 
顯示：內(nèi)聯(lián)塊；
 
箱裝飾的休息：克?。?br /> 
 - o-box-decoration-break：克?。?br /> 
 WebKit的盒子

這個內(nèi)聯(lián)塊聲明允許的顏色、背景、邊距與填充于每行文本而不是整個單元，和克隆宣言保證那些風(fēng)格一致的應(yīng)用于各個線一樣。

11–寬度相等的表格單元格

表格可以這樣嘗試使用與工作的痛苦表格布局：固定保持細(xì)胞的寬度相等：

{
 
。日歷表布局：
固定；

12–力空鏈接顯示屬性選擇器

這是插入通過CMS鏈接是非常有用的，它通常不具有階級屬性，有助于你的風(fēng)格特別不一般的影響級聯(lián)。例如，在<一>元素沒有文本價值但href屬性有一個鏈接：

一個[鏈接^ =“http”]：空：：{
之前
內(nèi)容：attr（鏈接）；

13–風(fēng)格的“默認(rèn)”的鏈接

說到鏈接的風(fēng)格，你可以找到一個通用的風(fēng)格在每一個樣式表。這迫使你寫額外的覆蓋和在子元素中的任何鏈接的樣式規(guī)則，當(dāng)工作與CMS一樣，WordPress可以引起你和國王的鏈接樣式取代按鈕文字顏色的問題，例如。試試這個低侵入性的方法來添加樣式為“默認(rèn)”鏈接：

一個[鏈接]：不（[類]）{
 
顏色：# 999；
 
文字裝飾：無；
 
過渡：都緩解了

現(xiàn)在的方式只適用于自己，否則沒有其他樣式規(guī)則的鏈接。
14–內(nèi)在比盒

創(chuàng)建一個盒子，一種內(nèi)在的比例，所有你需要做的是將頂部或底部填充div：

容器。{
 
高度：0；
 
填充底：20%；
 
位置：相對；
 
 }
 
。容器div {
 
邊境：2px沖# DDD；
 
高度：100%；
 
左：0；
 
位置

用20%填充使得盒等于20%的寬度高度。無論寬度的視口，孩子div將保持其縱橫比（100% / 20% = 5:1）。
15–式破碎的畫面

這個提示是不是代碼的減少和更多的精煉你的設(shè)計細(xì)節(jié)。破碎的形象發(fā)生了一些原因，也不美觀或?qū)е禄靵y（只是一個空元素）。創(chuàng)建此點CSS更討人喜歡：

img {
 
顯示：塊；
 
字體：黑體，Arial，sans-serif；
 
字體重量：300；
 
高度：汽車；
 
線高度：2；
 
位置：相對；
 
文本對齊：中心；
 
寬度：100%；
 
 
 }
圖片：在{
 
內(nèi)容：“我們很抱歉，下面的圖片是缺少：（”；
 
顯示：塊；
 
 margin-bottom: 10px；
 
 }
 
 img {：后
 
內(nèi)容：“（網(wǎng)址：“attr（

16–使用REM全球上漿；使用相對長度單位局部尺寸

在根設(shè)置基礎(chǔ)字體大小，例如html {字體大?。?5px；}，你可以設(shè)置字體大小含有元素REM：

第{
 
字體大?。?.25rem；
 
 }
 
一邊{
 
字體大?。?。9rem

然后設(shè)置字體大小的文本元素的EM：

H2 {
 
字體大?。?em；
 
 }
 
 p {
 
字體大小：1em

現(xiàn)在每個包含元素成為劃分和容易的風(fēng)格，更易于維護，靈活。
17–隱藏自動播放視頻，不柔和

這是一個自定義用戶樣式表的一大訣竅當(dāng)工作內(nèi)容你無法輕易的從源頭控制。這個技巧將幫助你避免惱人的訪問者的聲音從一個視頻播放時加載頁面，再表現(xiàn)精彩：not()偽選擇器：

視頻[自動]：不（[MUTED]）{
 
顯示：無；

18–使用root靈活型

在響應(yīng)式布局的字體大小可以調(diào)整視口自動，節(jié)省您的書寫媒體查詢只處理字體大小的工作。你可以計算字體大小基于視窗的高度和寬度的使用root和觀察單位：

：根{
 
字體大小：鈣（1vw + 1vh +。5vmin）；

現(xiàn)在你可以利用根相對長度單位基于計算的價值單位root

體{
 
字體：1rem / 1.6
 sans-serif；

結(jié)合睡眠/ EM技巧上面更大的控制?？吹紺SS修復(fù)iOS VH單位的bug提示管理舊版本的Safari。
19–集字體大小為更好的移動體驗的形式元素

為了避免移動瀏覽器（iOS的Safari，等。）從放大在HTML表單元素當(dāng)<選擇>下拉是抽頭，加字體大小的輸入方式：

輸入[類型=“文本”]，[
 
輸入type=“數(shù)”]，
 
選擇，
 
 textarea {

20–使用CSS變量！

最后但并非最不重要的，最強大的CSS水平來自CSS變量，它可以聲明一組常見的屬性值，可以通過在樣式表中任何一個關(guān)鍵詞。你的品牌可能有一系列的顏色是整個項目用來保持一致。這些顏色值的重復(fù)一遍又一遍的在你的CSS不僅是一件苦差事，但也容易出錯。如果顏色需要在某一點發(fā)生了變化，你不得不查找和替換，這是不可靠的或快，當(dāng)建筑產(chǎn)品的最終用戶進行定制的變量更容易。例如:

：根{
 
 --主色：# 06c；
 
 --顏色：# 999；
 
 }
 
 
 
 H1，H2，H3 {
 
顏色：VAR（主色）；
 
 }
 
 [鏈接]：一個沒有（[類]），
 
 P，
 
頁腳跨度{