自己的一些‘想法’，想要记录下来。在实际写的时候经常会“随心所欲”，希望这个笔记能让自己更"规范"。
我的业务主要是围绕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>
我想要，最好是结构清晰，便于编写和后续他人维护的布局。嘛，自己多注意吧。
原文地址：https://www.cnblogs.com/Merrys/p/8644193.html