css页面布局的感想,css布局实践感想(示例代码)

自己的一些‘想法’，想要记录下来。在实际写的时候经常会“随心所欲”，希望这个笔记能让自己更"规范"。

我的业务主要是围绕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>

我想要，最好是结构清晰，便于编写和后续他人维护的布局。嘛，自己多注意吧。