CSS Secrets 翻譯筆記 01: CSS coding tips

Introduction

CSS SECRETS AMAZON 連接

本系列的文章是翻譯過程當中的心得，並不是原文的徹底照搬，須要PDF的同窗，歡迎向博主索取 :)。

Minimize code duplication

保證代碼的不重複(DRY)以及可維護(maintainable)是軟件開發中最大的挑戰，對於CSS開發，也是同樣的。從實踐的角度來講，一個大的組件咱們認爲它可維護性高的標準即爲：改動發生時，須要改變的代碼量極少。反面的例子：一個小的組件，咱們要作10個甚至更多的改動才能完成新的需求，讓狀況更糟糕的是，這個組件可能不是你寫的(這個機率太大了)。咱們不免有什麼遺漏，好吧，即便沒有任何遺漏，咱們用在仔細調整，一點點查代碼的時間原本能夠用來作不少更有意義的事。
更進一步的，即便不談將來可能遇到的改變，高靈活度的CSS開發使得咱們的CSS編碼自己，也會變的很舒服。由於，它讓CSS開發變的更像在寫代碼。
來看一個例子，下面是一個按鈕：
I'm BUTTON A
它的樣式是這樣的

padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px; 
line-height: 30px;

考慮到維護性，以上的代碼存在不少問題，不過，咱們能夠解決這些問題。最顯眼的是字體的問題。好比說咱們指望改變字體的大小，像這樣。

font-size: 26px;

I'm BUTTON A

咱們發現行內容與邊框的間距變小了，看到後，再給line-height打一個補丁

line-height: 39px;

I'm BUTTON A

絕對值(px)是易於編寫的(照着mock up比一比，量一量，填一填)可是，每一次有改動來臨時，都會有各類改動，有些仍是很難考慮到的。如下是解決方案：

font-size:  1.25em; 
line-height: 1.5;

以後，再有關於字體的改動，咱們只須要改變font-size就能夠了.可是比起最初的按鈕，好像仍是有那麼點區別，緣由是形如padding，也是用px指定的，咱們將它們也設置爲同font-size關聯。

當各類值有互相依賴時，咱們要找到將它們關聯的方法。

padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 .05em .25em #335166;
font-size: 1.3em; 
line-height: 1.5;

若是但願以根節點(如html這個根tag)的font-size爲參考點，那麼就選擇rem而不是em，咱們須要根據具體的應用場合，作出決定。

如今咱們的樣式的可擴展性更高了，咱們的border實際上用的仍是絕對值，故而，也不要一味的套em. 固然，大小可不是咱們惟一須要的改動，在舉個例子：顏色。咱們如今須要一個紅色的Cancel按鈕，一個綠色的OK按鈕，作的改動實際也很是多(border-color, background, box-shadow, text-shadow, 亮度值)。
藉助半透明，咱們能夠減輕後續改動的痛苦

padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0,0,0,.5); color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5); font-size: 125%;
line-height: 1.5;

若要指定白色半透明，hsla是很好的選擇。

爲兩個按鈕分別增長class

button.cancel { 
  background-color: #c00;
}
button.ok { 
  background-color: #6b0;
}

CANCEL

OK
如今，咱們每次只須要改動背景色，就能到達改動顏色的需求。

Maintainability versus brevity

不少時候，可維護性與簡潔性多是有一點互斥的。即便是咱們剛纔按鈕的例子，最後的代碼也比最初，多了很多。下面的代碼，給全部元素除了左邊側，都加了個border。

border-width: 10px 10px 10px 0;

若是咱們但願10 -> 11，那麼無疑，改動會有三次。咱們能夠將改動減爲1次，並使代碼可讀性更高。

border-width: 10px; 
border-left-width: 0;

後者在博主看來更可取。

On Responsive Web Design

一個常常發生的情節是：在各個分辨率下測試頁面顯示效果，爲CSS不斷的增長 media queries以解決顯示不正確的問題。可是，每個 media query都爲CSS增長了負擔，特別是針對將來須要的改動。每個將來的改動，都要測試相應的media query下的工做效果。media query越多，代碼越脆弱。
這並非說 media queries 是bad practice。只是說他們須要正確的使用，
如下是一些建議：

• 使用相對單位，或者相對viewport的單位(vw, vh, vmin, vmax)。
• 若是指望設定固定的寬度，使用max-width而不是width，這樣就不會影響到小設備。
• 不要忘了給img, object, video, iframe這樣的標籤打上max-width : 100%。
• 若是但願背景圖片覆蓋整個容器，background-size: cover 足矣。
• 若是但願多列排版圖片，那麼，藉助viewport的寬度來判斷列數就夠了。display:inline-block。
• 若是須要多列文本，使用column-width而不是column-count。這樣，在小設備上，就能夠只看到單列。

以上的建議本質上都是爲了不使用media queries。
當咱們的CSS中有了過多的media queries。從新回頭看看它們，儘可能經過以上的tips或者其它手段來減小使用，它們會使得代碼難以維護。

本文完。