前端規範-佈局和模組命名

1、前言

為了能更好的分工協作，使用模組化來開發，每個人負責一個模組，互不干擾，下面簡要的說說模組化的構思。

2、佈局層

2.1、大塊佈局

所有頁面公用頭部和尾部，這兩部分拿出來公用，分別用#h和#f命名，主體部分每個頁面都不同用#b命名。.w代表公用的寬度，如果是1280的就定義.w{width:1280px;margin:0 auto;}這樣全部的都能居中。

2.2、格子

每個大塊再進行細分，.r表示行，.c表示列，每一行每一列都有唯一的索引，方便定義寬度和間距。比如導航欄的佈局可以用選擇器#h .r1 .c2來定義寬度。.fl左浮動.fr右浮動.clearfix清除浮動。

3、模組

3.1、模組外層

格子裡面再放入模組，模組相互獨立不影響，使用php include進來。同一個頁面相同樣式的可以為模組定義class。單獨的用佈局+模組選擇器定義就可以了。比如搜尋#h .r2 .c2 .m1,就不用為模組單獨想一個class，避免樣式衝突。

3.1、模組內層

模組內層結構再進行細分，頭部用.h，主體部分用.b，尾部用.t，跟大塊佈局類似，只是id換成class。

4、結語

這樣的缺點是選擇器比較長，之後嘗試用less或者sass看有沒有更簡便的寫法。