css重用的思想启发

叠加语言的设计思想

【什么是叠加】
百度解释:
叠加原理;superposition principle
　　在数学物理中经常出现这样的现象：几种不同原因的综合所产生的效果，等于这些不同原因单独产生效果的累加.
【为什么要叠加】

原因:

以前做网站一直到思考css重用的问题,如何控制布局多变的网站的css元素数量(注:css里面的类样式,标签样式,ID样式为了表述方便统称为css元素),如何避免css元素命名的冲突,如何组织css文件.这些以前都是令我十分头疼的事,因为如果不组织css元素,我就要不断的新建css元素以满足我的布局需求,而且我通常会在一个<div>标签中应用一个css的类样式,例如:

<div class=”body_style”></div>

当css元素(不是指css文件)的数量达到百位的级别,给css元素取一个恰如其意的名字都是一件十分艰难的事(例如:不同的页面往往具有不同的body_style样式),你会发现当你引用css文件,将body_style元素应用到很多其他页面时候,你已经处在命名冲突的边缘了.

有些人这时候可能会说我可以把body_style元素写在html里面,并不使用引用css文件的方式 (例如: <link href="/smartytext/css/page.css" rel="stylesheet" type="text/css" />)加载它,这样就可以在不同的html文件里面修改body_style的样式了.当你采用这种方式的时候或许单个body_style没有问题,但是你能确定css元素数量增加的时候,你知道什么css元素是该放在html文件里面还是放在引用的css文件里面?显然没有足够的分析时间和足够的经验是做不到这一点的.即使你有足够的精力去分析css元素的去向,那你是否依然说你的开发效率没有受到影响?

这些只是其中的一些弊端,还有一些更复杂的问题.

例如:你将css元素写在了html页面里面,那么另一个html页面里的css元素的命名该怎样去参照前一个达到统一?(显然你不可能记得你命名过多少css元素,有时候你会写一些新名字出来而功能却和前一个html页面里面的某个css元素一样.你不会一个一个元素去对照吧?).

例如:当你制作第一个html页面的时候,你写在html页面里面的css元素数量为10个,制作第二个的页面时候写在html里面的css元素数量也为10个,当你做5个html页面的时候,你会发现css元素的总数量惊人的增长到了50个,这种成倍的增长关系最终会让你在寻找修改css元素的时候在它里面久久徘徊,不可自拔.

这个时候你也许还会想,要是在引用的css里面有类似命名空间的处理方式,那么这些问题就迎难而解了.

简单一点的是使用目录文件的方式(物理方式),一个页面引用一个css文件,如果采用复制css文件的方式可以保证css元素命名的统一,但是这样也会出现很多共用的css元素重复出现在不同的css文件中,而且在css文件增加新的样式会出现css文件一个比一个大的情况,有时候css元素多到一定的级别,css元素命名困难的问题又会再此出现,所以我不推荐这种方式.

如果css扩展了命名空间的功能(逻辑方式),使用命名空间也是一件极不理智的行为,虽然他可以解决一些问题,但是也带来了一些不必要的复杂性.有什么办法在不增加css复杂性的同时,又能解决命css元素命名艰难的方法?或者说是控制css元素的数量增长,这就是我一直到思考的,也是我想要表达的---叠加设计思想.

【怎样去叠加】

在最近做毕业设计网站的时候,我给一个会员登陆表单设置了css样式并且使用标签样式input,后来我又需要将用户名和密码并排写在一行,无意中写了一个类样式login_align,在这个login_align中我只添加了一个float=left属性.这是启发我写这篇文章的灵感的关键.因为在后面的多个页面布局中我都使用了这个login_align样式,在我书写一个<div>的长宽属性时候,我再也不把float属性与长宽属性写在一个css元素里面,我通过这样的方式<div class="clearance_three login_align "></div>将clearance_three 和login_align 的效果叠加起来.我发现login_align的重用率很高,这使我省下了很多书写新的css元素的时间.虽然这个使用css的方法在我初期学习css的时候就已经接触,但是那时候我没有重视.相信很多人都没有重视,或者重视了但是没有扩展它的思想.

到现在为止,我已经能够很大程度的重用css元素了,我在做完毕业设计之后一直到思考让css元素封装多少个属性(float,font,color这些)的时候它的重用率比较大.后来我将他们进行了比较彻底的拆分,让一个css元素只带有一个属性,比如字体大小写一个css元素,字体颜色设置一个元素,漂浮设置一个元素.象下面这样:
.Float_left {

float: left;
}
.Font_family_song {

font-family: "宋体";
}
.Font_family_size_12 {

font-size: 12px;
}
这样一看名字你就能知道它的显示样式.你可以将所有的css样式写成这样的一个一个css元素,在使用的时候,只需要你动动鼠标选择目标将他们的显示效果叠加起来就行了.这种叠加方式使开发效率,css重用都达到了非常理想的效果.一个css文件毫不夸张的说可能解决一个网站的布局设计.
例如这样的使用:
<div class="Float_left Font_family_song Font_family_size_12" ></div>
当你看到这里的时候,是不是发现与html的标签属性有点类似了?不错就是这样.你可能又会问,既然这样,为什么不使用html标签属性而要使用这种可读性差的css? 我想说的是,这样的css书写作用的是一个区域与html标签属性作用的是一个标签是不一样,所以你并不需要频繁的书写这样的<div>标记.这就是div的好处.还有一点就是css的样式控制能力比html标签属性要强大很多.还有一点就是html标签属性需要成对出现,多出了很多垃圾代码,这几点综合的弊端才是放弃html标签属性的关键.
为什么不使用table+css? 同样的你会发现table的结构比div要复杂,但是创建table比较简单,这就是table+css与div+css共存的原因.抱歉这里有点偏题了,但是我想既然讲到这个份上了,也不在乎再详细一点了.

【叠加的思想扩展】

虽然,我这里讲的比较多的是css,但是我想让大家的眼光不仅仅是停留在css上面, 我使用css做例子只是想让大家更加形象的理解我的思路,我们下面还需要扩展这种css重用的思想,这才是我想要表达的关键.
在c++或者php里面我们经常会看到一些include语句加载文件,其实这也是一种叠加的思想,比如一个php页面包括:页头,页肚,页尾3部分,我们通过叠加的方式将他们组成一个完整的页面.
通过这些方式让你感觉到叠加似乎不是一件很麻烦的事情.如果有谁开发一种基于叠加思想的语言,能将一些基础功能的函数叠加,将一些变量叠加,将变量与函数叠加等,我相信我们可以利用这种叠加,创造出一些功能很强大的组件,这与面向对象的继承似乎有点象,但是它却没有继承的那些约束和面向对象那些让人难以理解的概念,这种叠加的创造力将是惊人的,都说面向对象是基于人类思考的方式书写代码,但是我觉得我的思考方式与面向对象格格不入.这也是我希望有人开发出一种超越面向对象的语言的动机.叠加思想我觉得是一个不错的参考.
叠加思想的一些优点,在我前面的css讲解中已经充分体现出来了,这里不在重复.
目前我对软件的一些认识还比较局限,许多地方考虑的还不够充分,但是我觉得这片文章最少也能有一个抛砖引玉的作用.希望中国人也能开发出一种卓越的编程语言.


说明:
本文属于原创 作者:陈钰文转载,引用请注明作者
联系我QQ:279537592
时间:2008-12-26

对大家了解CSS有帮助。

嗯.
不过观点有点不敢认同.

了解一下，自己也要有判断能力。

我只看看 我不说话

有一定的启发。谢谢了

了解一下

到后面你只是将CSS的页面的css项目数转化成横向的名称复杂了。而且组合时候还不如手写CSS代码。页面风格统一意味着你页面应用的css尽量通用和精简，而不是说一个页面增加10个这样的累加。技术方面有借鉴的地方，但是做法真是不敢苟同。

看看 ，正好在学习呢

这种方法有体会，就是将多用的属性定义为一个class或一个ID，独自的属性各自写，
调用时就 多用的和独自的一起。

css也可以加载文件
例如：
@import(color.css);
@import(layout.css);
@import(font.css);
值得一提的是当前文件中的类会覆盖引用文件中同名的类，这也是一种叠加的思想吧。
css加载文件存在一些兼容的问题，好在IE7快普及了。

可以设置一些常用的基本类，在font.css中定义“.font_size_16”、“.font_size_80percent”  ......        在layout中定义“.float_left”、“.float_clear”  ......

网站的设计通常还是统一风格的，对于一些特殊的页面可以定义模块类文件，比如form.css和display.css等。

css是一种精简的语言，如果定义元素到达百位的级别，那么可以考虑要优化了。

css的设计通常还是先定义基本元素（body、p、h、ul、ol、li、a、img、table、tbody、th、td等），再定义框架元素（top、main、content、、foot等），再定义特殊元素（logo、banner、menu、box、list等）。最后做一些细节的定义，top h2{}、main div 、content p{}、foot span{} 或者main .display_box{}、main .display_box img{}等等。
对于像.font_size_16这样引入的类，还是通过js添加class内容好些。

css其实也可以像js一样定义一些命名空间，例如你的系统以yoursite_为开头，然后定义一堆常用或可用的类，各类之间遵从统一的命名风格。这样可以在后台随意的操作页面的管理和显示。
不过带来的负面影响就是第一次浏览的时候会很慢，保养会很麻烦。

简单那的可以  比如颜色，加粗 什么的，并且有时候的却很方便。如果多了那样用会复杂逻辑，使版面混乱。
我建议你参考下 163 的CSS表，有点你说的那个重用，但数量并不多。

如果用纯面向对象的思路去解决CSS 问题，应该是行不通的！

谢谢LZ的热心分享~！

只有异想天开才会有创新。
但是好像你对OOP的理解有点片面，除了继承，还有封装，封装有利于松耦合，也是很重要的软件工程原则。这种叠加有点继承的味道，但是不具备封装的特性。

楼主，辛苦了