CSS分为三个部分

1. Reset
2. Layout
3. Mod

CSS Reset : 通用设置,不需要处理.

CSS Layout : 根据设计稿定义的布局定义好整体布局,不频繁改动.

CSS Mod : 各种模块集合.

Reset 和 Layout 作为核心CSS定义.直接影响全局页面展示.所以不轻易进行修改.

Mod 为各个模块的集合.每个模块的CSS只控制模块内部展示,不对外部影响.

CSS关键字列表

由于模块元素的具有很多共同的元素,但是可能表现方式是一致的.所以需要定义一些自身定义的CSS关键字列表.在定义css关键字的类的时候不造成全局影响.

如Author , Title , time 之类的

Mod 开发

每个Mod的相关代码只影响Mod自身,不影响外部展示,比如

html代码:

<div class="mod-a”>
	<span class="img">
		<img src="demo.jpg" alt="" />
	</span>
	<div class="info">
		<a class="title" href="#">item title</a>
		<a class="author" href="#">item author</a>
	</div>
</div>

如果要控制title和author的展示, 使用

CSS代码:

.mod-a .title{
	Color:#f60;
}
.mod-a .author{
	Color:#06f;
}

以用来保持只对mod-a内元素的控制

文件结构

1. Style.css
2. Base.css
3. Mod-a.css
4. Mod-b.css

Style.css作为一个统一的页面css,加载在页面当中.

Base.css 包含CSS Reset 和 CSS Layout ,作为基本样式

Mod-a.css , Mod-b.css 负责每个mod的样式.由不同的团队成员维护

Style.css包含代码

CSS代码:

@import url("base.css");
@import url("Mod-a.css");
@import url("Mod-b.css");

标题跟twinsen的走有中国特色的网站重构道路一样,实际上,一切都是幻觉,我要说的是另一件事情

引用下twinsen的言论先:

<div class="f14 cf60 fright">xxx</div>
肯定是14px大小 颜色f60
然后不改动html的时候改变样式，呵呵，SB了

他的言论其实是个引子,因为现在很流行这种开发方式

css代码:

.f14{
  font-size:14px;
}
.cf60{
  color:#f60;
}

html代码:

<div class="f14 cf60">14px的文字大小,颜色值是#f60</div>

于是乎,写html代码就真的变成了累积木的举动了.
大家一起高呼,哇,原来重构就这么容易啊.
等到某天.需要把某个div的颜色换成#333,傻逼了.这怎么改.改html.
顺便让asp,php,jsp,asp.net等各种程序员改改程序页面.
我举这么个例子不是想说这种思想错误.

只是我想突然想到一个问题.能不能换一种思维来想这个事情,尽管可能现在做不到.
以下代码是从未在css里出现过的..

诡异的CSS代码:

.f14{
  font-size:14px;
}
.cf60{
  color:#f60;
}
.mod{
  include: .f14 , .cf60;
}

并不诡异的html代码:

<div class="mod">14px的文字大小,颜色值是#f60</div>

这种方式我称之为零件式开发.
很简单,做一些.f14,.cf60之类的小零件,然后让模块(也就是.mod之类)在css中包含,然后体现在表现当中.
这样做,是否可以继续累积木,但是又不会累出问题呢?

再次引用twinsen的话:

时刻铭记你不是一个“页面仔”，是一个重构工程师；或者更进一层，你在影响人类信息化社会的发展。

Fergie以前是黑眼豆豆的主唱.听惯了她嘻哈.听到这首,其实感觉也真的很不错.我第一次听到这首歌是在2007年的格莱美颁奖典礼.那时候Fergie先喜欢,突然就唱了这首.因为我之前其实不知道她单飞.所以自然而然的记忆了.

周五和芸聊天.听到她哽咽甚至哭泣.
不禁想到这首歌.
女生,坚强,不哭.做自信绽放的玫瑰.

猛击这里观看MV

歌词奉上

fergie - big girls don't cry (personal)

da da da da
the smell of your skin lingers on me now
you're probably on your flight back to your hometown
i need some shelter of my own protection baby
be with myself in center, clarity, peace, serenity

i hope you know, i hope you know
that this has nothing to do with you
it's personal, myself and i
we got some straightening out to do
and i'm gonna miss you
like a child misses their blanket
but i've gotta get a move on with my life
it's time to be a big girl now
and big girls don't cry
don't cry, dont cry, dont cry

the path that i'm walking, i must go alone
i must take the baby steps til i'm full grown
fairy tales don't always have a happy ending do they
and i forseek the dark ahead if i stay

i hope you know, i hope you know
that this has nothing to do with you
it's personal, myself and i
we got some straightening out to do
and i'm gonna miss you
like a child misses their blanket
but i've gotta get a move on with my life
it's time to be a big girl now
and big girls don't cry
like a little school mate in the school yard
we'll play jacks and uno cards
i'll be your best friend
and you'll be my valentine
yes you can hold my hand if you want to
cuz i wanna hold yours too
we'll be playmates and lovers
and share our secret worlds
but it's time for me to go home
it's getting late, dark outside
i need to be with myself in center,
clarity, peace, serenity

i hope you know, i hope you know
that this has nothing to do with you
it's personal, myself and i
we got some straightening out to do
and i'm gonna miss you
like a child misses their blanket
but i've gotta get a move on with my life
it's time to be a big girl now
and big girls don't cry
don't cry, dont cry, dont cry
da da da da da da

东西做到一定程度的时候.需要暂停某个Element对象的click事件,想用个变量保存这个函数,但看了半天MooTools的API都没看到相关方法..
无奈自己翻源代码,找到了.

Element.retrieve('events')[event_type].keys;

通过上的方法得到的是一个事件的数组.

之前公司有要仿造一个国外网站的这样一个效果.可直接扣下来似乎效果不太好.所以我自己写了一个.idea非原创,代码自己写的.
再加上最近对mootools比较感兴趣.就用这个效果练手了.写了这么个效果.

鉴于js处理高亮太卡..请大家猛击以下连接查看效果..
demo link