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

smoke

浏览: 9859 次
性别:
来自: 厦门

最近访客更多访客>>

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (9)

社区版块

存档分类

html css 前端开发框架

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

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

先看布局层：

布局层由行（.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.部件层样式定义规范
部件层的所有样式定义都是从自身层级的类名开始，例如：
图片1.png

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

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