我們應該如何寫好HTML&CSS

語言: CN / TW / HK

這應該是最容易讓人忽略的一個問題,容易到很多工作幾年的前端開發工程師都不太注意如何寫好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,你會發現後面很多問題都會變的簡單