自己的一些‘想法’，想要記錄下來。在實際寫的時候經常會“隨心所欲”，希望這個筆記能讓自己更"規範"。

我的業務主要是圍繞webApp和微信端，思想上靠近移動端布局。

1.最大的容器

通常使用類名<container>做外部最大容器，這也是很多ui框架選擇的。這個容器通常也代表了一個需要單獨顯示的頁面，在模擬router切換的時候，我通常會給它一個id<page-name>方便操作。

2.業務獨立模塊

一個單頁面通常是由多個獨立的業務模塊組成的，通常使用類名<content>做獨立模塊。在此上邊，可以添加一些通用的樣式，例如添加新類名<content-pad>使這個模塊具有四周的內邊距，添加新類名<content-pad-vertical>添加上下的內邊距。

3.模塊細分

一個單獨的模塊通常由標題和主題組成。通常標題使用類名<content-header>，標題內容使用h2~h4標簽包裹，再添加一些其他的零部件，例如常見的<more>。通常主題使用類名<content-main>，具體內容結構的類名定義可以具名思議，例如左圖右文的結構可以<media-img><media-feature>，表單可以<form-name><form-input>，脫離content的命名限制，可以更加的具名思議。

4.列表模塊

一個單獨的列表模塊在移動端布局中也是相當的常見。這是<3>的列表版本，為了區分每個結構會使用更多的嵌套，實例會像是：

div.content>div.list-warp>.list-header+.list-main>(.list-content>list-content-header+list-content-main>list-content-main-img+list-content-main-feaure)*n

.list-content中的具體內容和<3>中的具體內容是一樣的。這裏就見了一個很尷尬的問題，想要簡明思議，但卻太長。這種時候，我傾向於使用less，將反復的工作交給工具處理；或是使用簡寫（使用類名首字母和下劃線_）。這個方式同樣適用於form表單，它只是一個比較特殊的列表。

如果一個頁面有多個相同的列表模塊？這種時候我可能會把多個列表<list-warp>當成業務獨立模塊,使用content將他們隔離開；或是給這些列表模塊再warp一層，例如<list-group>，這並不會影響內部模塊和外部的content，只是明確了這些UI相同的列表模塊是一個整體的獨立模塊。也會有更‘麻煩的‘結構，像是我想給這個<list-group>中的<list-warp>在加一個標題，雖然麻煩，但也算是結構清晰。

5.在App中的topBar

對於這種”意義“非凡的頁面元素，我們通常都會給它命名成<header>。實例會像是：

.header>.back+h1+.right

6.在App中的navBar

同樣‘意義‘非凡，我們給它命名為<nav>。實例會像是：

.nav>.nav-main>.nav-item*n

7.命名中的狀態

未選中狀態，選中狀態<active>，不可用狀態<disabled>，或是<_active><_disabled>

我想要，最好是結構清晰，便於編寫和後續他人維護的布局。嘛，自己多註意吧。

css布局實踐感想