前端规范-布局和模块命名

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看有没有更简便的写法。