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

flower_emma發表於2018-03-15
CSS
http://webdesignerwall.com/tutorials/level-css-skills-20-pro-css-tips 原文地址 下面對篇文章的大致翻譯學習

前端開發越來越關注效率：通過選擇器的使用和簡化程式碼來快速載入渲染。像Less、SCSS這樣的前處理器在工作的時候，需要繞的路較長，而直接使用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

.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）

待更新。。。

相關文章