咱們應該如何寫好HTML&CSS

這應該是最容易讓人忽略的一個問題，容易到不少工做幾年的前端開發工程師都不太注意如何寫好html及css

HTML&CSS 重要嗎

相比於JavaScript,HTML&CSS確實凸顯不出它的重要性,由於HTML&CSS不承載業務邏輯,具體來講他們不能稱之爲編程語言,那HTML&CSS真的就那麼簡單到不起眼嗎？

佈局是項目易維護的重要基礎

當咱們拿到項目ui圖後,建議你們不要一行一行的去畫頁面，這樣不經效率低並且寫出來的頁面代碼比較臃腫,下面是Element-ui的柵格佈局及佈局容器圖：

一旦有了項目的大致架構，咱們就能夠作到手裏有糧心中不慌了
咱們以京東首頁爲例，來講明下良好的佈局應該是什麼樣子的

能夠看到，我在首頁任意調換兩個div,頁面的佈局也跟着調換過來並且沒有亂,這就是一個良好的佈局。你也能夠在本身的項目這樣試一試

管理好CSS有助於提升項目性能

說到CSS咱們是勢必要說到兩個概念：重繪&重排

• 重繪 重繪是指當 DOM 元素的屬性發生變化 (如 color) 時, 瀏覽器會通知render 從新描繪相應的元素, 此過程稱爲重繪。
• 重排 重排是指某些元素變化涉及元素佈局 (如width), 瀏覽器則拋棄原有屬性, 從新計算，此過程稱爲重排。（重排必定會重繪，重繪不必定重排）。

頁面渲染的通常過程爲JS > CSS > 計算樣式 > 佈局 > 繪製 > 渲染層合併而在這個過程當中其中,重排和重繪是整個環節中最爲耗時的兩環,從重繪和重排的概念上看，重排比重繪更加的消耗性能,因此咱們儘可能避免着這兩個環節。從性能方面考慮,最理想的渲染流水線是沒有佈局和繪製環節的,只須要作渲染層的合併便可。

如何更好的寫CSS&HTML

說了這麼多,那在項目中應該怎麼規劃咱們的佈局及樣式呢,一下是我我的的總結,和你們分享

• 首先定義項目的基準樣式：如重置樣式,公用樣式變量,兼容性處理等,且最好用less/sass/stylus等來寫咱們的css
• 把項目的公共佈局及樣式抽離出來：如公用的頭部，公用的尾部，公用的tab等
• 避免樣式重複賦值,避免樣式重疊:如避免在業務或者組件裏面寫全局樣式,樣式層級不要過深
• 用好z-index,position

最後

只要咱們在項目中花點心思管理好咱們的CSS和HTML,你會發現後面不少問題都會變的簡單