【翻譯】使用這20個好的css技巧提高你的CSS技能

http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips 原文地址 下面對篇文章的大體翻譯學習

前端開發愈來愈關注效率：經過選擇器的使用和簡化代碼來快速加載渲染。像Less、SCSS這樣的預處理器在工做的時候，須要繞的路較長，而直接使用css速度會快。這裏涵蓋了20個css技巧來幫助你減小重複規則和複寫，在佈局中標準化樣式流程，不只能夠幫助你高效地建立本身的框架，並且能夠解決許多常見的問題。

一、使用CSS重置（reset）

css重置庫如normalize.css已經被使用不少年了，它們能夠爲你的網站樣式提供一個比較清晰的標準，來確保跨瀏覽器之間的一致性。大多數項目並不須要這些庫包含的全部規則，能夠經過一條簡單的規則來應用於佈局中的全部元素，刪除全部的margin、padding改變瀏覽器默認的盒模型。

*{
 box-sizing:border-box;
 margin:0;
 padding:0
 }
複製代碼

使用box-sizing聲明是可選擇，若是你使用下面繼承的盒模型形式能夠跳過它

二、繼承盒模型

讓盒模型從html 繼承：

html {    
    box-sizing: border-box;  
}    
*, *:before, *:after {    
    box-sizing: inherit;  
}
複製代碼

三、使用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%;
}
複製代碼

四、使用:not() 解決lists邊框的問題

在web設計中，咱們一般使用：last-child nth-child 選擇器來覆蓋原先聲明應在父選擇器上的樣式。好比說一個導航菜單，經過使用borders 來給每一個連接Link建立分割符，而後再在加上一條規則 解除最後一個link的border

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

這是一種很混亂的方式，它不只強制瀏覽器以一種方式渲染，而後又經過特定的選擇器來撤銷它。這樣覆蓋樣式是不可避免的。然而，最重要的是，咱們能夠經過使用：not僞類(pseudo-class) 在你想聲明的元素上僅僅只使用一種樣式：

.nav li:not(:last-child) {    
    border-right: 1px solid #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;  
}
複製代碼

這裏會詳細的介紹全部能夠垂直居中的方法 ：http://webdesignerwall.com/tutorials/css-vertical-centering-everything-need-know

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）

待更新。。。