欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

分享一个去年鼓捣的前端开发框架,望能抛砖引玉 htmlcss前端开发框架 

程序员文章站 2024-02-24 20:42:58
...

当初弄这个是发现即使再好的命名规范,因为思想和水平不同,页面结构五花八门,样式命名虽然按规范,但冲突再所难免,结果还是相当混乱。当初就想要是有个 大的框架可套用再配合样式定义规范,让前端人员套下框架,然后就只要关注自己负责的模块结构和样式,这样就能消除大部分问题。不废话了,直接看内容:

页面分为两层:一层布局层、一层部件层。

先看布局层:

布局层由行(.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.部件层样式定义规范
部件层的所有样式定义都是从自身层级的类名开始,例如:
分享一个去年鼓捣的前端开发框架,望能抛砖引玉
            
    
    
        htmlcss前端开发框架 

同一个部件差异化样式可以以自身的ID或所在列、行的ID来定义,不能使用布局层的类名来进行差异化定义。这样做的好处是显而易见的,每个部件都是一个独立的整体,层级也一样,部件内部的类名即使一样,也不会互相影响。

不知道有没有表述清楚,希望有人能看懂