提升您的CSS 20 Pro CSS技巧

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

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

1–使用CSS重置

CSS重置的圖書館一樣，normalize.css已經多年了，對于你的網站的風格，有助于確保跨瀏覽器的一致性更好的提供一個干凈的石板。大多數項目不需要所有這些圖書館的規則包括，可以得到一個簡單的規則來消除所有的利潤和填料應用于大多數元素在你的布局由瀏覽器默認的盒模型：

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

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

讓盒尺寸被繼承HTML：

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

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

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

。Flex容器{
 
顯示：彎曲；
 
證明內容：空間之間；
 
 }
 
。Flex容器。項目{
 
柔性基礎

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

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

李{
。資產凈值
邊境：1px solid # 666；
 
 }
 
。導航李：最后一個孩子{
 
邊境權：無

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

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

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

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

5–添加線高度到身體

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

而不是增加線高度每一個

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

體{
 
線高度：1.5；

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

設置一個全局規則垂直中心布局是設置基礎設置內容布局優雅，你不準備使用CSS網格的一個好方法。

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

我們進入細節你可以垂直中心事物的方式CSS垂直居中一切你需要知道的
7–使用SVG圖標

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

。標志{
 
背景：URL（”標志。SVG）；

可提示：如果你使用SVG為交互元素，如按鈕和SVG加載失敗，這樣的規定將幫助保持可達性（確保有適當的詠嘆調屬性設置在HTML）：

。沒有SVG。圖標：
 
內容后，{：attr（詠嘆調
標簽）；

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

使用通用選擇器（*與相鄰同胞選擇器（）+）提供了一個強大的CSS的能力，使我們能夠對所有元素在文檔流，特別跟其他元素設置規則：

* + * {
 
邊距：1.5rem；

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

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

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

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

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

P {
 
顯示：內聯塊；
 
箱裝飾的休息：克隆；
 
 - o-box-decoration-break：克隆；
 
 WebKit的盒子

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

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

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

{
 
。日歷表布局：
固定；

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

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

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

13–風格的“默認”的鏈接

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

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

現在的方式只適用于自己，否則沒有其他樣式規則的鏈接。
14–內在比盒

創建一個盒子，一種內在的比例，所有你需要做的是將頂部或底部填充div：

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

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

這個提示是不是代碼的減少和更多的精煉你的設計細節。破碎的形象發生了一些原因，也不美觀或導致混亂（只是一個空元素）。創建此點CSS更討人喜歡：

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

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

在根設置基礎字體大小，例如html {字體大小：15px；}，你可以設置字體大小含有元素REM：

第{
 
字體大小：1.25rem；
 
 }
 
一邊{
 
字體大小：。9rem

然后設置字體大小的文本元素的EM：

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

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

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

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

18–使用root靈活型

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

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

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

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

結合睡眠/ EM技巧上面更大的控制。看到CSS修復iOS VH單位的bug提示管理舊版本的Safari。
19–集字體大小為更好的移動體驗的形式元素

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

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

20–使用CSS變量！

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

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