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

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

1.最大的容器

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

2.業(yè)務(wù)獨立模塊

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

3.模塊細分

一個單獨的模塊通常由標(biāo)題和主題組成。通常標(biāo)題使用類名，標(biāo)題內(nèi)容使用h2~h4標(biāo)簽包裹，再添加一些其他的零部件，例如常見的。通常主題使用類名，具體內(nèi)容結(jié)構(gòu)的類名定義可以具名思議，例如左圖右文的結(jié)構(gòu)可以，表單可以，脫離content的命名限制，可以更加的具名思議。

4.列表模塊

一個單獨的列表模塊在移動端布局中也是相當(dāng)?shù)某Ｒ姟＿@是<3>的列表版本，為了區(qū)分每個結(jié)構(gòu)會使用更多的嵌套，實例會像是：

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中的具體內(nèi)容和<3>中的具體內(nèi)容是一樣的。這里就見了一個很尷尬的問題，想要簡明思議，但卻太長。這種時候，我傾向于使用less，將反復(fù)的工作交給工具處理；或是使用簡寫(使用類名首字母和下劃線_)。這個方式同樣適用于form表單，它只是一個比較特殊的列表。

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

5.在App中的topBar

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

.header>.back+h1+.right

6.在App中的navBar

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

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

7.命名中的狀態(tài)

未選中狀態(tài)，選中狀態(tài)，不可用狀態(tài)，或是<_active><_disabled>

我想要，最好是結(jié)構(gòu)清晰，便于編寫和后續(xù)他人維護的布局。嘛，自己多注意吧。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。