css模塊化的思想讓后期維護變得簡單

2024-07-11 08:44:09

字體：大中小

來源：轉載

供稿：網友

這里著重講一下模塊化開發為后期維護帶來的好處！
首先，不管了不了解，鬼哥的這篇文章都可以看一下，從宜家的家具設計講模塊化http://www.survivalescaperooms.com/css/divcss-10075.html
并不是多高深的東西，在工作中，應用div css操作，你應該會逐步的去想，怎樣提高效率，怎樣兼容，怎樣精煉代碼，怎樣讓后期維護變的更加簡單。你可能每過一段時間，都想把自己以前寫的東西重構一下。這是很好的想法，也是很好的表現，因為你一直在不斷的進步。模塊化的思想，必定會在你的逐漸進步之中被你領悟！
這里著重講一下模塊化開發為后期維護帶來的好處！
在工作中，我做了一個如下圖結構的網站。
點擊在新窗口中瀏覽此圖片

首先要說一下繆同學，（備注，不是我公司里的徒弟），繆同學是一個很羅嗦很繁瑣的人。這兩個形容詞其實都不恰當。這不，第二天，他讓我把B和C左右互換個位置，我說沒問題，打開css，把side_list和side_content的left的值改了一下。他依舊很羅嗦。第四天，他讓我把B1和B3的位置換一下，我說沒問題，打開css，把sub_list_1和sub_list_3的top的值改了一下。第六天，他讓我把B1放到C里的下邊并居中。好吧，我打開html，把包含文件中的sub_list_1剪切到side_content的底部。
在做這些的過程中，我只是因為兩個模塊內有相同的hx而針對他們寫了一個!important。
當然，這僅僅是模塊化設計的好處之一。
需要注意的地方：
·上下級模塊內相同標簽的優先級問題。
·全局樣式的和模塊樣式的優先級。
·良好的擴展性。
·盡量做到具有相同標簽的模塊是平行關系。
·優化你的全局樣式，讓模塊代碼更簡潔。
在我這里，設計到切圖布局都是一個人，所以，不存在命名沖突問題。多人協作的時候，模塊化設計同樣可以避免這一問題。有效的避免命名、樣式沖突等問題。
上邊說的注意的第三條，良好的擴展性。很多時候，比如，layout內有A/B/C三個元素，layout內有10px的邊，那么，這10px的邊，究竟是在layout上用padding表達還是在子元素上用margin表達？當然，不同情況不同對待！

上一篇：CSS教程:CSS控制網頁文字排版實例

下一篇：基于CSS的網站導航菜單