以下讨论的是和前端 布局 模块 命名相关的讨论网页前端CSS设计的布局构思和布局与模块命名 教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：
| 文章简介：前端规范-布局和模块命名。 |
1、前言
最近在思考怎么完全脱离视觉去思考结构，让写出来的结构更有语义？交互原型出来后，怎么让前端结构和视觉设计同时并行？结构写完可以先让程序套模板并且结构不会再修改？视觉设计出来后，前端写样式，写完样式链接到套好的模板？
参考了35王少峰的四方框架，他把结构层单独拿出来，然后画格子。 我觉得这个思路很好，布局是属于视觉的，应该先定义好，免得写样式的时候再来修改结构。我参考了一下他的思想，并结合自己的理解，谈谈布局层的构思。
2、布局
我们用r表示行，并且清除浮动。为每一行添加索引，方便每一行间距的调节，如图1所示。
图1
用c表示列，并且左浮动。为每一列添加索引，方便定义宽度和间距。我们把r2分成三列，如图2所示。
图2
我们再把r2c2分成两行，如图3所示。
图3
我们再把r2c2r1分成两列，如图4所示。
图4
3、总结
这样结构可以无限制的分下去，并且每一格都有唯一的索引，可以方便的来定义每一格的布局。思路刚成型，还得拿几个项目来尝试看看是否可行。
[page_break]
| 文章简介：前端规范-布局和模块命名。 |
1、前言
为了能更好的分工协作，使用模块化来开发，每个人负责一个模块，互不干扰，下面简要的说说模块化的构思。
2、布局层
2.1、大块布局
所有页面公用头部和尾部，这两部分拿出来公用，分别用#h和#f命名，主体部分每个页面都不同用#b命名。.w代表公用的宽度，如果是1280的就定义.w{width:1280px;margin:0 auto;}这样全部的都能居中。
2.2、格子
每个大块再进行细分，.r表示行，.c表示列，每一行每一列都有唯一的索引，方便定义宽度和间距。比如导航栏的布局可以用选择器#h .r1 .c2来定义宽度。.fl左浮动.fr右浮动.clearfix清除浮动。
3、模块
3.1、模块外层
格子里面再放入模块，模块相互独立不影响，使用php include进来。同一个页面相同样式的可以为模块定义class。单独的用布局+模块选择器定义就可以了。比如搜索#h .r2 .c2 .m1,就不用为模块单独想一个class，避免样式冲突。
3.1、模块内层
模块内层结构再进行细分，头部用.h，主体部分用.b，尾部用.t，跟大块布局类似，只是id换成class。
4、结语
这样的缺点是选择器比较长，之后尝试用less或者sass看有没有更简便的写法。
关于讨论网页前端CSS设计的布局构思和布局与模块命名的内容写到这里就结束啦，您可以收藏本页网址http://www.alixixi.com/web/
a/2018090491577.shtml方便下次再访问哦。