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

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

1.最大的容器

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

2.業務獨立模塊

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

3.模塊細分

一個單獨的模塊通常由標題和主題組成。通常標題使用類名，標題內容使用h2~h4標簽包裹，再添加一些其他的零部件，例如常見的。通常主題使用類名，具體內容結構的類名定義可以具名思議，例如左圖右文的結構可以，表單可以，脫離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表單，它只是一個比較特殊的列表。

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

5.在App中的topBar

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

.header>.back+h1+.right

6.在App中的navBar

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

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

7.命名中的狀態

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

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

總結

以上是生活随笔為你收集整理的css页面布局的感想,css布局实践感想(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。