w3pop.com :: 网络学院 :: CSS :: CSS 模块化设计思路
CSS 模块化设计思路
作者:linyupark 翻译/整理:w3pop.com 发布:2007-08-21 浏览:3663 ::
::
从大学一年纪开始接触CSS布局设计，那时候是02年，除了w3cn.org基本没有其他网站是做这方面推广的，这么多年过去了，现在连网页设计师 的招聘要求里都写上了要熟练使用 DIV+CSS布局。呵呵，也不知道这个CSS+DIV是谁想出来的名词，不过当初我在学的时候貌似这么叫过，难道是我？？？呵呵
但随后我发表了一篇 《合理的使用HTML标签进行CSS布局》 来纠正了这一说法，当然那时候很多想法还是来自于国外的一些设计师。
用CSS布局的次数多了，也慢慢感觉到编写CSS代码的时候如果不注意一些规范或是自己定一套模式，想要重复利用代码基本上是不可能的。所以自己在此写一写如何才能更有效的管理以及利用自己曾经编写过的CSS代码。
1.一个全局，多个扩展
其实这个很像程序框架设计思路，先为整体的程序设定一个全局的参数或是初始设置。在设计CSS的第一步就应该是这项工作，现在我开始把这个初始的文件命名为 global .css
内容首先还是“扩展”的导入，这里的扩展其实就是另外的CSS文件，这个我也是从国外的一网站上学来的，因为要在一张页面的head区域写上太多的 CSS Link 标签总归不雅观，而且还会出现导入丢失的现象。
简单举例，我要分别把侧栏，头部，页脚的样式写在不同的文件，依次为 bar.css , header.css , footer.css 。那在往常或许要用到三次 <link href=’…’ rel=’stylesheet’ type=’text/css’ /> 。现在我们只导入 global.css 文件，要做到跟导入三条一样的效果就只需要在global.css文件里加入：
@import url(”header.css”) ;
@import url(”bar.css”) ;
@import url(”footer.css”) ;
在顶部导入扩展后就可以接着写全局设置了，比如
*{ .. }
html,body { .. }
….
2.活用样式的继承性
很多人都了解CSS的继承性，但真正发挥其优势的人不多。
比如有个
<span class=”small-yellow”>一些文字</span>
.small-yellow{
color:yellow;
font-size:11px;
}
突然你发觉有些地方需要11px，有些地方是要12px，可能你会在后面加上style=’font-size:12px’ 来解决（也的确是个好办法），但如果你在全局样式文件下加上一个
.f12px{
font-size:12px;
}
然后给上面的span 改成
<span class=”small-yellow f12px”>一些文字</span>
这样是不是更简洁美观呢？
其实编写CSS并没有绝对规范的模式，也正因为这样常常会导致后期修改上的困难，工程越大发生困难的几率就越高。所以在编写CSS代码的时候能够尽量细分，把最后的效果由多个样式搭配而成的话可以大大减少代码重复编写的几率。
3.科学的命名
这个话题也不新鲜了，所以不多说，有的喜欢用拼音，有的喜欢用英文。我是比较喜欢英文（可以顺便学学单词..）
最重要的还是能一目了然，不光自己，最好别人看了也清楚一些。
4.层次分明
这点虽然会多打很多字，但阅读起来更清晰，举例：
<div id=’header’><b class=’logo’>logo</b>
<dl class=’nav’><dd><a href=’/home’ class=’current’>home</a></dd></dl>
</div>
对应的要给上面的HTML写CSS样式，我认为这样比较合适：
#header{ … }
#header .nav{ … }
#header .nav a.current:link{ … }
….
虽然#header 反复出现没有必要，但这样写能很好的反映出你定义样式的层次。
评论 (6)
