分享一个去年鼓捣的前端开发框架,望能抛砖引玉 htmlcss前端开发框架
当初弄这个是发现即使再好的命名规范,因为思想和水平不同,页面结构五花八门,样式命名虽然按规范,但冲突再所难免,结果还是相当混乱。当初就想要是有个
大的框架可套用再配合样式定义规范,让前端人员套下框架,然后就只要关注自己负责的模块结构和样式,这样就能消除大部分问题。不废话了,直接看内容:
页面分为两层:一层布局层、一层部件层。
先看布局层:
布局层由行(.row)和列(.col)两个基本元素组成,一个页面可以有多个行,一个行可以包含多个列。.col-wrap是可选的,放便习惯使用负边距布局的同学。
下面先来看布局示例:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>四方CSS框架</title> <style type="text/css"> .row:after, .col:after{content:'\20'; display:block; height:0; clear:both;} .row, .col{*zoom:1;} .col-wrap{ float:left; width:100%;} .row{ border:2px dashed #aaa; min-height:60px; margin-top:20px;} .col-wrap .col{background:#f9eba8;} .col{ min-height:60px; background:#ececec;} /* 2列 */ .C2LH .col{ float:left; width:50%;} .C2LH .c2{ width:49%; margin-left:1%;} .C2LNMH .c1{ margin-right:50%;} .C2LNMH .c2{ float:left; margin-left:-49%; width:49%;} /* 3列 */ .C3LNMH .c1{ margin-right:46%;} .C3LNMH .c2{ float:left; margin-left:-45%; width:22%;} .C3LNMH .c3{ float:left; margin-left:-22%; width:22%;} /* 2排-第2列两行 */ .C3LNM1-2_1_1 .c1{margin-right:20%;} .C3LNM1-2_1_1 .c2{ float:right; width:19%; margin-left:-19%;} .C3LNM1-2_1_1 .c3{ clear:right; float:right; width:19%; margin-left:-19%; margin-top:10px;} /* 4列 */ .C4LNMH .c1{ margin-right:60%;} .C4LNMH .c2{ float:left; margin-left:-59%; width:19%;} .C4LNMH .c3{ float:left; margin-left:-39%; width:19%;} .C4LNMH .c4{ float:left; margin-left:-19%; width:19%;} /* 2排-第2排第2行2列 */ .C4LNM1-3_1_2 .c1{margin:80px 20% 0 20%;} .C4LNM1-3_1_2 .c2{ float:left; margin-left:-19%; width:19%; margin-top:80px;} .C4LNM1-3_1_2 .c3{float:left; margin-left:-100%; width:19%;} .C4LNM1-3_1_2 .c4{float:left; margin-left:-80%; width:80%;} </style> </head> <body> <div class="row C2LH"> <div class="col c1"></div> <div class="col c2"></div> </div> <div class="row C2LNMH"> <div class="col-wrap"> <div class="col c1"></div> </div> <div class="col c2"></div> </div> <div class="row C3LNMH"> <div class="col-wrap"> <div class="col c1"></div> </div> <div class="col c2"></div> <div class="col c3"></div> </div> <div class="row C3LNM1-2_1_1"> <div class="col-wrap"> <div class="col c1"></div> </div> <div class="col c2"></div> <div class="col c3"></div> </div> <div class="row C4LNMH"> <div class="col-wrap"> <div class="col c1"></div> </div> <div class="col c2"></div> <div class="col c3"></div> <div class="col c4"></div> </div> <div class="row C4LNM1-3_1_2"> <div class="col-wrap"> <div class="col c1"></div> </div> <div class="col c2"></div> <div class="col c3"></div> <div class="col c4"></div> </div> </body> </html>
示例中C2LH,C3LH等是用来描述该行的布局样式,L前面的C2表示总列数是2列,L后面的H表示横向排列,默认就是2列并排。C3LH就是总列数3列,横向3列并排。列中的c1、c2、c3等表示该列的编号,用来区分索引各列,方便为各列单独定义样式。
C4LNM1-3_1_2这个类名有些抽象。L前面的C4不变还是表示总列数4列。L后面的NM表示负边距布局,1-3表示显示成2排,第1排1列,第2排3列。_1_2表示第2排分2层,第一层1列,第二层2列。有点绕,类名中的“-”表示并排,“_”表示分层,数字是指列数,命名方式就是:
C*L*-(并排)*_(分层)*_(分层)*。(*表示列数)
接下来看部件层
1.部件层命名规范
所有跟布局无关的内容我们都归为部件层,部件层类名的命名都是以.wgt-开头,后面可接有代表意义的缩写或单词,如.wgt-img,.wgt-text等。
2.部件层样式定义规范
部件层的所有样式定义都是从自身层级的类名开始,例如:
同一个部件差异化样式可以以自身的ID或所在列、行的ID来定义,不能使用布局层的类名来进行差异化定义。这样做的好处是显而易见的,每个部件都是一个独立的整体,层级也一样,部件内部的类名即使一样,也不会互相影响。
不知道有没有表述清楚,希望有人能看懂