Rekey's WebSpace

CSS分为三个部分

1. Reset
2. Layout
3. Mod

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

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

CSS Mod : 各种模块集合.

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

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

CSS关键字列表

如Author , Title , time 之类的

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的话:

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

配乐 : 找朋友

[audio:http://bu.lonelylive.cn/COFFdD0xMjY5ODcyMTI1Jmk9MTE0LjI0OS4yMzMuMTU1JnU9U29uZ3MvdjEvZmFpbnRRQy9kMC8wNGMwZjRlNWZjNzYxNjkwM2RmYjRkZDY4ZDk1OGVkMC5tcDMmbT1hMTJiODJmY2Y1NDY1MTRkZmRiMDA5MmUxNTM1YTI4YiZ2PSZwPW4=.mp3]

回家的路上到是想了挺多.到家了反而忘了.汗..
在交流会上,大家都在诉苦.说程序员怎么怎么样.其实:

程序员只是提供数据,他为什么会跟你有那么多矛盾冲突?

我唯一联想到的就是一张图

也许想明白了这张图怎么做.也大概知道了为什么程序员那么苦闷了.

引用龙哥的话

网页设计不是平面设计，不能胡来！

Web标准化交流会（w3ctech.com）3月报名过百，国内领先互联网企业前端开发团 队悉数加盟。据来自W3CTech的相关人员介绍，本月交流会主题为：前端开发在研发流程中与其他岗位协作效率的提升；论题一经提出及得到了业内的众多响 应。互联网是一个新型行业，而前端开发这个概念也在国内方兴未艾；抛弃片面强调前端思想，将Web标准化应用整个开发过程中，是所有互联网企业削减技术成 本的有效手段。

从刀耕火种的混杂模式到日新月异的集约型开发，前端开发在中国走过了 从无到有的阶段，Web标准化进行不仅仅影响到了浏览器端的技术领域，伴随微格式的流行，万维网标准化体系也逐渐渗透到数据层开发和内容发布等领域，成为 了一项系统工程；从不理解到了解，从了解到配合，本月W3CTech将邀请所有与互联网有关的IT人士，共同探讨标准化Web协作开发的标准之路。

本次交流互动将于3月27日在四个城市同时开始，北京站、深圳站由腾讯公司提 供场地，广州站由新浪提供场地,上海站将在携程网进行，W3CTech也希望更多有识之士参与讨论，努力推进国内web标准化进程。

W3CTech访问地址 请猛击 : http://www.w3ctech.com/
原文地址:http://tech.qq.com/a/20100315/000504.htm

web标准化交流会（w3ctech.com）已经成功举办三次，除北京、上海、广州外，将继续向深圳等城市发展。在普及W3C标准的基础上，交流 会将集合国内前端开发者的力量，在未来2~3年的时间内形成即与国际接轨又符合中国国情的web标准体系。

web标准化在国内称为网站重构，是旨向提升网站访问效能，面向未来浏览器的一项网页改进工程。伴随w3c组织全力推进html5.0草案进度，未 来的web前端技术将变成什么样，越来越受到了全球开发者的重视，中国web标准化交流会应运而生。

主题明晰的线下交流

每次Web标准化交流会都在围绕某一主题在多个城市同时进行，各分会场都汇聚了国内前端开发的100~200位精英，通过分享和讨论总结在国内网站 开发中的典型应用，并且汇聚成为文档通过万维网与更多从业者分享。

虽然网站重构的概念进入中国已经近6年的时间，但是并没有如此的大规模参与进行知识积累与总结，通过交流会的形式让改变了以往“自学+个人摸索”的 模式，让尊重标准和合理架构逐渐的成为了前端开发的主流。

知名IT厂商的全力支持

“让标准快速转化为实践应用”是Web标准化交流会的另一优势，也是众多国内外知名厂商深度参与其中的原因。百度、谷歌、网易、新浪、携程、腾讯、豆瓣等网络企业都很关注web标准在中国的发展，其前端开发团队成员也作为交流会重要成 员参与分享。

经过碰撞和相互探讨，当每一个交流会的参与者返回到各自的工作岗位都将把交流成果快速的应用到各个网站中去。这种快速的产生技术应用的模式带来了一 系列的连锁效应，同时也逐步的形成了良性竞争和相互认同的局面，也就是这种技术上的交流与认同才为有中国特色的Web标准化奠定了基础。

力图形成有中国特色前端技术体系

Ajax、jQuery、YahooUI等技术近几年生在国内盛行，已经成为了前端开发领域的热点应用，而实际上这些技术并非凭空产 生，都是基于W3C组织的一系列技术而衍生出来的标准化应用架构。由此，在Web标准化交流会的基础上，吸收和借鉴国内外先进的应用手段，逐步形成有中国 特色的前端技术体系也成为了必然的选择。

近一时期，全世界的网络公司都在关注各大浏览器厂商的激烈竞争；而在频繁的推出新的浏览器内核以及软件的同时，如何面向未来浏览器，如何让网站在更 多的浏览器中表现优秀，不仅仅是是Web开发领域的重要课题，也是整个科技领域都将面临的问题。Web标准化是趋势，也是中国互联网必须经历的一场变革。

原文地址:http://tech.163.com/10/0127/10/5U1CLU0P000915I3.html