20個CSS快速提升技巧
本文涵蓋了20個css技巧，可以解決許多工作中常見的問題。
1、使用CSS重置(reset)
css重置庫如normalize.css已經被使用很多年了，它們可以為你的網站樣式提供一個比較清晰的標準，來確保跨瀏覽器之間的一致性。
大多數專案並不需要這些庫包含的所有規則，可以通過一條簡單的規則來應用於佈局中的所有元素，刪除所有的margin、padding改變瀏覽器預設的盒模型。
*{
box-sizing:border-box;
margin:0;
padding:0}
使用box-sizing宣告是可選擇，如果你使用下面繼承的盒模型形式可以跳過它。
2、繼承盒模型
讓盒模型從html 繼承：
html{
box-sizing:border-box;
}
*,*:before,*:after{
box-sizing:inherit;
}3、使用flexbox佈局來避免margin的問題 (Get Rid of Margin hacks width Flexbox)
當你多少次試著去設計柵格佈局如：組合或者圖片畫廊，如果使用浮動的方式，那麼就需要去清除浮動和重置外邊距來使其分解成所需要行數。為了避免nth-、first-、last-child 問題 ，可以使用flexbox 的space-between 屬性值。
.flex-container{
display:flex;
justify-content:space-between;
}
.flex-container.item{
flex-basis:23%;
}
4、使用:not() 解決lists邊框的問題
在web設計中，我們通常使用：last-child nth-child 選擇器來覆蓋原先宣告應在父選擇器上的樣式。比如說一個導航選單，通過使用borders 來給每個連結Link建立分割符，然後再在加上一條規則 解除最後一個link的border
.navli{border-right:1pxsolid#666;}.navli:last-child{border-right:none;}
這是一種很混亂的方式，它不僅強制瀏覽器以一種方式渲染，然後又通過特定的選擇器來撤銷它。這樣覆蓋樣式是不可避免的。然而，最重要的是，我們可以通過使用：not偽類(pseudo-class) 在你想宣告的元素上僅僅只使用一種樣式：
.navli:not(:last-child){border-right:1pxsolid#666;}
上面就是，除了最後一個li以外，所有的 .nav li 都加上了border樣式，是不是很簡單!
當然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有語義化(semantic)和容易理解的。
5、body上加入line-height樣式
導致低樣式效率(inefficient stylesheets)的一件事就是不斷的重複宣告。最好是做下專案規劃和組合規則，這樣CSS會更流暢。實現這一點，就需要我們理解級聯(cascade),以及如何在通用選擇器寫的樣式可以繼承在其他地方。
行間距(line-height)可以作為給你的整個專案設定的一個屬性，不僅可以減小程式碼量，而且可以讓你的網站的樣式給一個標準的外觀
body{line-height:1.5;}
請注意，這裡的宣告沒有單位，我們只是告訴瀏覽器 讓它渲染行高是 渲染字型大小的1.5倍
6、垂直居中任何元素 (vertical-center anything)
在沒有準備使用CSSGrid 佈局的時候，設定垂直居中佈局的全域性規則是一個很好的方式，可以為優雅(elegantly)的設定內容佈局奠定一個基礎
html,body{height:100%;margin:0;}body{-webkit-align-items:center;-ms-flex-align:center;align-items:center;display:-webkit-flex;display:flex;}
7、使用SVG icons
SVG使用於所有分辨類，並且所有瀏覽器也都支援。所以可以將.png .jpg .gif 等檔案 丟棄。FontAwsome5中 也提供了SVG的圖示字型。設定SVG的格式就跟其他圖片型別一樣：
.logo{background:url("logo.svg");}
溫馨提示：如果將SVG用在可互動的元素上比如說button，SVG 會產生無法載入的問題。可以通過下面這個規則來確保SVG可以訪問到(確保在HTML中已設定適當的aria屬性)
.no-svg.icon-only:after{content:attr(aria-label);}
8、使用 “OWL選擇器”
使用通用選擇器(universal selector)* 和相鄰的兄弟選擇器(adjacent sibling selector)+ 可以提供一個強大的的CSS功能，給緊跟其他元素中的文件流中的所有元素設定統一的規則
*+*{margin-top:1.5rem;}
這是一個很棒的技巧，可以幫你建立更加均勻的型別跟間距。在上面的列子中，跟在其他元素後面的元素，比如說H3後面的H4，或者一個段落之後的一個段落，他們之間至少1.5rems的間距(大約為30px)
9、一致的垂直結構(Consistent Vertical Rhythm)
一致的垂直節奏提供了一種視覺美學，使內容更具可讀性。如果owl選擇器過於通用，請在元素內使用通用選擇器(*)為佈局的特定部分建立一致的垂直節奏：
.intro>*{margin-bottom:1.25rem;}
10、對更漂亮的換行文字使用 box-decoration-break
假設您希望對換行到多行的長文字行應用統一的間距、邊距、突出顯示或背景色，但不希望整個段落或標題看起來像一個大塊。Box Decoration Break屬性允許您僅對文字應用樣式，同時保持填充和頁邊距的完整性。
如果要在懸停時應用突出顯示，或在滑塊中設定子文字樣式以具有突出顯示的外觀，則此功能尤其有用：
.p{display:inline-block;box-decoration-break:clone;-o-box-decoration-break:clone;-webkit-box-decoration-break:clone;}
內聯塊宣告允許將顏色、背景、頁邊距和填充應用於每行文字，而不是整個元素，克隆聲明確保將這些樣式均勻地應用於每行。
11、等寬表格單元格
表格可能很難處理，所以嘗試使用table-layout：fixed來保持單元格相等寬度：
.calendar{table-layout:fixed;}
12、強制使用屬性選擇器顯示空連結
這對於通過CMS插入的連結特別有用，CMS通常不具有類屬性，並幫助您在不影響級聯的情況下對其進行特定樣式設定。例如，元素沒有文字值，但href屬性有一個連結：
a[href^="http"]:empty::before{content:attr(href);}
13、樣式“預設”連結
說到連結樣式，您可以在幾乎每個樣式表中找到一個通用的A樣式。這迫使您為子元素中的任何連結編寫額外的覆蓋和樣式規則，並且在使用像WordPress這樣的CMS時，可能會導致您的主連結樣式比按鈕文字顏色更容易出現問題。
嘗試這種較少干擾的方式為“預設”連結新增樣式：
a[href]:not([class]){color:#999;text-decoration:none;transition:allease-in-out.3s;}
14、比率框
要建立具有固有比率的框，您需要做的就是將頂部或底部填充應用於div：
.container{height:0;padding-bottom:20%;position:relative;}.containerdiv{border:2pxdashed#ddd;height:100%;left:0;position:absolute;top:0;width:100%;}
使用20%進行填充使得框的高度等於其寬度的20%。無論視口的寬度如何，子div都將保持其縱橫比(100%/ 20%= 5：1)。
15、風格破碎的影象
這個技巧不是關於程式碼縮減，而是關於細化設計細節的。破碎的影象發生的原因有很多，要麼不雅觀，要麼導致混亂(只是一個空元素)。用這個小小的CSS建立更美觀的效果：
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'resorry,theimagebelowismissing:(";display:block;margin-bottom:10px;}img:after{content:"(url:"attr(src)")";display:block;font-size:12px;}
16、使用rem進行全域性大小調整;使用em進行區域性大小調整
在設定根目錄的基本字型大小後，例如html字型大小：15px;，可以將包含元素的字型大小設定為rem:
article{font-size:1.25rem;}aside{font-size:.9rem;}
然後將文字元素的字型大小設定為em
h2{font-size:2em;}p{font-size:1em;}
現在，每個包含的元素都變得分割槽化，更易於樣式化、更易於維護和靈活。
17、隱藏未靜音的自動播放視訊
當您處理無法從原始碼輕鬆控制的內容時,這對於自定義使用者樣式表來說是一個很好的技巧。這個技巧將幫助您避免在載入頁面時自動播放視訊中的聲音干擾訪問者，並再次提供了精彩的：not()偽選擇器：
video[autoplay]:not([muted]){display:none;}
18、靈活運用root型別
響應佈局中的字型大小應該能夠自動調整到視區，從而儲存編寫媒體查詢的工作，以處理字型大小。可以使用:not和視區單位，根據視區高度和寬度計算字型大小：
:root{font-size:calc(1vw+1vh+.5vmin);}
現在，您可以使用根em單位，該單位基於:not：
body{font:1rem/1.6sans-serif;}
結合上面的rem/em技巧以獲得更好的控制。
19、在表單元素上設定字型大小，以獲得更好的移動體驗
為了避免移動瀏覽器（iOS Safari等）在點選<select>下拉列表時放大HTML表單元素，請在新增font-size樣式：
input[type="text"],input[type="number"],select,textarea{font-size:16px;}
20、CSS變數
最後，最強大的CSS級別來自於CSS變數，它允許您宣告一組公共屬性值，這些值可以通過樣式表中任何位置的關鍵字重用。你可能有一套顏色在整個專案中使用，以保持一致性。
在CSS中反覆重複這些顏色值不僅是件煩人的事情，而且還容易出錯。如果某個顏色在某個時刻需要改變，你就不得不去尋找和替換，這是不可靠或不快速的，當為終端使用者構建產品時，變數使得定製變得容易得多。例如：
:root{
--main-color:#06c;
--accent-color:#999;
}
h1,h2,h3{
color:var(--main-color);
}
a[href]:not([class]),
p,
footerspan{
color:var(--accent-color);
}
本文涵蓋了20個css技巧，可以解決許多工作中常見的問題。
1、使用CSS重置(reset)
css重置庫如normalize.css已經被使用很多年了，它們可以為你的網站樣式提供一個比較清晰的標準，來確保跨瀏覽器之間的一致性。
大多數專案並不需要這些庫包含的所有規則，可以通過一條簡單的規則來應用於佈局中的所有元素，刪除所有的margin、padding改變瀏覽器預設的盒模型。
- *{
- box-sizing:border-box;
- margin:0;
- padding:0
- }
使用box-sizing宣告是可選擇，如果你使用下面繼承的盒模型形式可以跳過它。
2、繼承盒模型
讓盒模型從html 繼承：
- html{
- box-sizing:border-box;
- }
- *,*:before,*:after{
- box-sizing:inherit;
- }
3、使用flexbox佈局來避免margin的問題 (Get Rid of Margin hacks width Flexbox)
當你多少次試著去設計柵格佈局如：組合或者圖片畫廊，如果使用浮動的方式，那麼就需要去清除浮動和重置外邊距來使其分解成所需要行數。為了避免nth-、first-、last-child 問題 ，可以使用flexbox 的space-between 屬性值。
- .flex-container{
- display:flex;
- justify-content:space-between;
- }
- .flex-container.item{
- flex-basis:23%;
- }
4、使用:not() 解決lists邊框的問題
在web設計中，我們通常使用：last-child nth-child 選擇器來覆蓋原先宣告應在父選擇器上的樣式。比如說一個導航選單，通過使用borders 來給每個連結Link建立分割符，然後再在加上一條規則 解除最後一個link的border
- .navli{
- border-right:1pxsolid#666;
- }
- .navli:last-child{
- border-right:none;
- }
這是一種很混亂的方式，它不僅強制瀏覽器以一種方式渲染，然後又通過特定的選擇器來撤銷它。這樣覆蓋樣式是不可避免的。然而，最重要的是，我們可以通過使用：not偽類(pseudo-class) 在你想宣告的元素上僅僅只使用一種樣式：
- .navli:not(:last-child){
- border-right:1pxsolid#666;
- }
上面就是，除了最後一個li以外，所有的 .nav li 都加上了border樣式，是不是很簡單!
當然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有語義化(semantic)和容易理解的。
5、body上加入line-height樣式
導致低樣式效率(inefficient stylesheets)的一件事就是不斷的重複宣告。最好是做下專案規劃和組合規則，這樣CSS會更流暢。實現這一點，就需要我們理解級聯(cascade),以及如何在通用選擇器寫的樣式可以繼承在其他地方。
行間距(line-height)可以作為給你的整個專案設定的一個屬性，不僅可以減小程式碼量，而且可以讓你的網站的樣式給一個標準的外觀
- body{
- line-height:1.5;
- }
請注意，這裡的宣告沒有單位，我們只是告訴瀏覽器 讓它渲染行高是 渲染字型大小的1.5倍
6、垂直居中任何元素 (vertical-center anything)
在沒有準備使用CSSGrid 佈局的時候，設定垂直居中佈局的全域性規則是一個很好的方式，可以為優雅(elegantly)的設定內容佈局奠定一個基礎
- html,body{
- height:100%;
- margin:0;
- }
- body{
- -webkit-align-items:center;
- -ms-flex-align:center;
- align-items:center;
- display:-webkit-flex;
- display:flex;
- }
7、使用SVG icons
SVG使用於所有分辨類，並且所有瀏覽器也都支援。所以可以將.png .jpg .gif 等檔案 丟棄。FontAwsome5中 也提供了SVG的圖示字型。設定SVG的格式就跟其他圖片型別一樣：
- .logo{
- background:url("logo.svg");
- }
溫馨提示：如果將SVG用在可互動的元素上比如說button，SVG 會產生無法載入的問題。可以通過下面這個規則來確保SVG可以訪問到(確保在HTML中已設定適當的aria屬性)
- .no-svg.icon-only:after{
- content:attr(aria-label);
- }
8、使用 “OWL選擇器”
使用通用選擇器(universal selector)* 和相鄰的兄弟選擇器(adjacent sibling selector)+ 可以提供一個強大的的CSS功能，給緊跟其他元素中的文件流中的所有元素設定統一的規則
- *+*{
- margin-top:1.5rem;
- }
這是一個很棒的技巧，可以幫你建立更加均勻的型別跟間距。在上面的列子中，跟在其他元素後面的元素，比如說H3後面的H4，或者一個段落之後的一個段落，他們之間至少1.5rems的間距(大約為30px)
9、一致的垂直結構(Consistent Vertical Rhythm)
一致的垂直節奏提供了一種視覺美學，使內容更具可讀性。如果owl選擇器過於通用，請在元素內使用通用選擇器(*)為佈局的特定部分建立一致的垂直節奏：
- .intro>*{
- margin-bottom:1.25rem;
- }
10、對更漂亮的換行文字使用 box-decoration-break
假設您希望對換行到多行的長文字行應用統一的間距、邊距、突出顯示或背景色，但不希望整個段落或標題看起來像一個大塊。Box Decoration Break屬性允許您僅對文字應用樣式，同時保持填充和頁邊距的完整性。
如果要在懸停時應用突出顯示，或在滑塊中設定子文字樣式以具有突出顯示的外觀，則此功能尤其有用：
- .p{
- display:inline-block;
- box-decoration-break:clone;
- -o-box-decoration-break:clone;
- -webkit-box-decoration-break:clone;
- }
內聯塊宣告允許將顏色、背景、頁邊距和填充應用於每行文字，而不是整個元素，克隆聲明確保將這些樣式均勻地應用於每行。
11、等寬表格單元格
表格可能很難處理，所以嘗試使用table-layout：fixed來保持單元格相等寬度：
- .calendar{
- table-layout:fixed;
- }
12、強制使用屬性選擇器顯示空連結
這對於通過CMS插入的連結特別有用，CMS通常不具有類屬性，並幫助您在不影響級聯的情況下對其進行特定樣式設定。例如，元素沒有文字值，但href屬性有一個連結：
13、樣式“預設”連結
說到連結樣式，您可以在幾乎每個樣式表中找到一個通用的A樣式。這迫使您為子元素中的任何連結編寫額外的覆蓋和樣式規則，並且在使用像WordPress這樣的CMS時，可能會導致您的主連結樣式比按鈕文字顏色更容易出現問題。
嘗試這種較少干擾的方式為“預設”連結新增樣式：
- a[href]:not([class]){
- color:#999;
- text-decoration:none;
- transition:allease-in-out.3s;
- }
14、比率框
要建立具有固有比率的框，您需要做的就是將頂部或底部填充應用於div：
- .container{
- height:0;
- padding-bottom:20%;
- position:relative;
- }
- .containerdiv{
- border:2pxdashed#ddd;
- height:100%;
- left:0;
- position:absolute;
- top:0;
- width:100%;
- }
使用20%進行填充使得框的高度等於其寬度的20%。無論視口的寬度如何，子div都將保持其縱橫比(100%/ 20%= 5：1)。
15、風格破碎的影象
這個技巧不是關於程式碼縮減，而是關於細化設計細節的。破碎的影象發生的原因有很多，要麼不雅觀，要麼導致混亂(只是一個空元素)。用這個小小的CSS建立更美觀的效果：
- 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'resorry,theimagebelowismissing:(";
- display:block;
- margin-bottom:10px;
- }
- img:after{
- content:"(url:"attr(src)")";
- display:block;
- font-size:12px;
- }
16、使用rem進行全域性大小調整;使用em進行區域性大小調整
在設定根目錄的基本字型大小後，例如html字型大小：15px;，可以將包含元素的字型大小設定為rem:
- article{
- font-size:1.25rem;
- }
- aside{
- font-size:.9rem;
- }
然後將文字元素的字型大小設定為em
- h2{
- font-size:2em;
- }
- p{
- font-size:1em;
- }
現在，每個包含的元素都變得分割槽化，更易於樣式化、更易於維護和靈活。
17、隱藏未靜音的自動播放視訊
當您處理無法從原始碼輕鬆控制的內容時,這對於自定義使用者樣式表來說是一個很好的技巧。這個技巧將幫助您避免在載入頁面時自動播放視訊中的聲音干擾訪問者，並再次提供了精彩的：not()偽選擇器：
- video[autoplay]:not([muted]){
- display:none;
- }
18、靈活運用root型別
響應佈局中的字型大小應該能夠自動調整到視區，從而儲存編寫媒體查詢的工作，以處理字型大小。可以使用:not和視區單位，根據視區高度和寬度計算字型大小：
- :root{
- font-size:calc(1vw+1vh+.5vmin);
- }
現在，您可以使用根em單位，該單位基於:not：
- body{
- font:1rem/1.6sans-serif;
- }
結合上面的rem/em技巧以獲得更好的控制。
19、在表單元素上設定字型大小，以獲得更好的移動體驗
為了避免移動瀏覽器（iOS Safari等）在點選<select>下拉列表時放大HTML表單元素，請在新增font-size樣式：
- input[type="text"],
- input[type="number"],
- select,
- textarea{
- font-size:16px;
- }
20、CSS變數
最後，最強大的CSS級別來自於CSS變數，它允許您宣告一組公共屬性值，這些值可以通過樣式表中任何位置的關鍵字重用。你可能有一套顏色在整個專案中使用，以保持一致性。
在CSS中反覆重複這些顏色值不僅是件煩人的事情，而且還容易出錯。如果某個顏色在某個時刻需要改變，你就不得不去尋找和替換，這是不可靠或不快速的，當為終端使用者構建產品時，變數使得定製變得容易得多。例如：
- :root{
- --main-color:#06c;
- --accent-color:#999;
- }
- h1,h2,h3{
- color:var(--main-color);
- }
- a[href]:not([class]),
- p,
- footerspan{
- color:var(--accent-color);
- }