【譯】設計師/後端工程師也能立刻實踐！前端設計（CSS設計）的技巧
本文是我在衆成翻譯平臺上認領並翻譯的：設計師/後端工程師也能立刻實踐！前端設計（CSS設計）的技巧 ，正文內容以下：css
你們好，我是2015年的應屆畢業生小原，職位是前端工程師。不久前我加入了新業務的開發，負責前端的設計和實現。我想在回顧當時作法的同時，總結出一套可以輕鬆實現的前端編程設計方法。html
什麼是高靈活性的前端開發設計
不論開發什麼樣的業務，均可能面臨界面樣式沒有徹底肯定，或者從此還須要增長或改變功能點的狀況。所以代碼開發與業務構思同樣，都須要具有高度的靈活性，對變化頻繁的前端來講更是如此。前端
前端開發的靈活性是指，前端代碼能在多大程度上高效的、持續地應對界面更新。web
咱們須要應對哪些變化
界面的變化需求是各類各樣的，好比「把這個按鈕的顏色和大小改一下」或者「把這塊內容往上移一些，讓它更醒目一點」之類的。這些修改需求雖然看起來五花八門，但其實均可以分爲【功能點的佈局】的變化和【功能點的外觀】的變化這兩類。編程
分離【功能點的佈局】與【功能點的外觀】
將這二者分離可以造成高效的敏捷性開發週期：從精益開發、設計構思到針對業務不斷地進行測試、逐步改善功能。在這種開發模式下，將用戶場景（接觸功能點的流程 → 功能點的佈局）和印象喚起（外觀引發的情緒性操做 → 功能點的外觀）分離並獨立修改的狀況也會不少。若是把【功能點的佈局】與【功能點的外觀】這兩個要素分離開來進行獨立開發，那麼其中一個要素改變的時候另外一個要素就不會產生bug（好比改變外觀的時候佈局被打亂）。這樣一來就可以實現快速響應更新的高效率開發了。另外，因爲可以將功能的各個組成部分像堆積木同樣組裝起來構建網站，開發人員還能夠輕鬆地嘗試各類各樣的佈局。後端
也就是說，在前端開發中，採用將【功能點的佈局】與【功能點的外觀】有意識地分離開來的設計，可以使代碼具有足夠的靈活性來應對業務改進的需求。並且這種設計實施起來很是簡單。前端工程師
明白這一點以後，即便你不懂前端，也能大體瞭解什麼是具備靈活性的良好編程設計了吧。ide
分離開發【功能點的佈局】與【功能點的外觀】的方法
引言說的有點多了，仍是來看看具體應該如何進行上文所述的前端開發吧。 整體思路是，在有關DOM構造和CSS的部分，遵循分離【功能點的佈局】與【功能點的外觀】這一規則進行代碼編寫。 ※ 詳細的規範：文件結構與佈局的命名遵循SMACSS風格，模塊的命名則遵循BEM風格。佈局
【功能點的外觀】代碼編寫方法
首先介紹【功能點的外觀】，這部分代碼我採用了流動設計。這裏的流動設計是指，元素的寬高尺寸依賴於外層元素，隨外層元素寬高尺寸的變化而變化。代碼實現以下所示：測試
// 例1 左邊欄設計 <div class="item"> //與item的外觀相關的全部css類名所有包含「item」 <div class="item__movie">...</div> <div class="item__body"> <div class="item__body__title">...</div> <div class="item__body__prof"> //在item中添加了prof組件 //一樣與prof的外觀相關的全部css類名所有包含"prof" <div class="prof"> <div class="prof__user"> <div class="prof__user__img"></div> <div class="prof__user__inf"></div> </div> </div> </div> <div class="item__body__tag">...</div> </div> <div class="underline"></div> </div>
/** 外層的.item的設計要注意 **/ .item{ width: 100%; /** 爲了將寬度的設置交給【item的佈局】css文件，在這裏將寬度設爲100% **/ /** float: left; 反例 設置【item的佈局】的css不要寫 **/ /** margin: 10px; 反例 設置【item的佈局】的css不要寫 **/ /** 如下是設置外觀的css **/ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.3); -moz-box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.3); box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; }
/** 爲避免在item外發生css干擾進行嵌套**/ /** 另外，使用__明確表示這是item的子元素**/ .item .item__body{ /** 自由設置css **/ ... } .item .item__body .item__body__title{ /** 自由設置css **/ .. }
// 例2 右邊欄設計 <div class="nav"> <div class="nav__title--l">...</div> <div class="nav__select"> <div class="nav__select__child">...</div> <div class="nav__select__child">...</div> <div class="nav__select__child">...</div> </div> <div class="nav__title--s">...</div> <div class="nav__title--s">...</div> <div class="nav__title--s">...</div> </div>
/** 外層的.nav的設計要注意 **/ .nav{ /**爲了將寬度的設置交給【nav的佈局】css，在這裏將寬度設爲100% **/ width: 100%; height: 100%; /** float, margin之類與佈局有關的css不要寫 **/ /** 如下是設置外觀的css */ -webkit-box-shadow: 1px 0px 3px rgba(153, 153, 153, 0.5); -moz-box-shadow: 1px 0px 3px rgba(153, 153, 153, 0.5); box-shadow: 1px 0px 3px rgba(153, 153, 153, 0.5); position: relative; color: #e9e8e8; background-color: #253038; }
/** 避免在nav外發生css干擾**/ .nav .nav__title{ /** 自由設置css **/ ... } .nav .nav__title.nav__title--l{ /** 自由設置css **/ ... } .nav .nav__select{ /** 自由設置css **/ .. }
爲何這樣寫？
這段代碼的目的是將class="item"和class="nav"這兩個元素內部包含的全部子元素的【功能點的外觀】整合起來。class="item"所包含的class="item__body"等內部元素的css設計也能夠進一步細化，但首先要注意的是，class="item"和class="nav"這兩個父元素的與【功能點的佈局】相關的css設計沒有寫在這個css文件中。
這樣一來，對class="item"和class="nav"這兩個元素來講，【功能點的外觀】就被獨立出來了。
※像class="nav__title--l"這樣包含「__"或「-」的命名方法是基於BEM記法的。在這裏的做用只是一種命名規範，好比爲了明確地防止在元素class="item"外發生css干擾。
【功能點的佈局】代碼編寫方法
接下來介紹【功能點的佈局】，爲了設定各個組成部分的位置，我準備了一個盒模型。代碼實現以下所示：
<html> <head>...</head> <body> <div class="l-wrap"> <div class="l-main"> <div class="l-header"></div> <div class="l-height-offset"></div> <div class="l-side"></div> <div class="l-cont"> <div class="l-cont__body"></div> </div> </div> </div> </body> </html>
/** 在設定佈局的代碼中加上前綴「l-」 **/ /** background, color, border等與外觀有關的css不要寫 **/ /** 感受就像在編寫只定義了大小和位置的透明盒子 **/ .l-wrap { width: 100%; height: 100%; /** 像這樣與外觀有關的css不要寫 **/ } .l-main { width: 100%; min-height: 100%; vertical-align: top; } /** 若是要寫設定外觀的代碼，要經過不一樣的類名來寫 **/ .main { background-color: #fbfbfc; } .l-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 48px; } .l-height-offset { height: 48px; } .l-side{ position: fixed; z-index: 99; top: 48px; width: 230px; height: 100%; max-height: 100%; } .l-cont{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding-left: 230px; margin: 0 auto; } .l-cont__body { -webkit-box-sizing: border-box; -moz-box-sizing: border