您现在的位置： 365建站网 > 365文章 > Object-Oriented CSS (CSS面对对象)

Object-Oriented CSS (CSS面对对象)

文章来源：365jz.com 点击数：451 更新时间：2009-09-14 10:33 参与评论

Object-Oriented CSS = OOCSS

一、原理：

1，OOCSS把每个Components叫做Object

2.每个Components是固定的HTML structure,用一组CSS来控制其layout，在OOCSS里面，这一组CSS就叫做Structure.

3.再用另外一组Css来控制整个页面的显示，这就叫做Skin

注意：在OOCSS里面，必须要避免：location-based selectors，它是什么意思呢？看下面例子：

加入你站点的每个页面都有一个 sidebar, 代码可能如下：

Code
<div class="sidebar">
…sidebar content…
</div>

现在你很有多页面，在这些页面上你想有对sidebar应用不同的样式：

传统的做法：在 <body> 标签上增加class:

Code
<body class="onsale">

天才，你可能会想，之后你会继续这样：

Code
body.onsale .sidebar {
background-color: #FFA500;
}

OOCSS的方法有很大区别，做法是单纯创建一个新的class给每种不同的样式。

Code
.onsalesidebar {
/* extends .sidebar */
background-color: #FFA500;
}

用如下的方式应用到代码里：

Code
<div class="sidebar onsalesidebar">
…sidebar content…
</div>

现在，内容编辑人员能够很自信的复制、粘贴sidebar的代码到其他页面，甚至新的分支页面。

二、意义何在？

用OOCSS可以有一个较小的css文件和较大的html文件，这样做的目的，可以减少用户看到空白页面，换句话说，css文件较小，容易加载，那么呈现在用户面前的就是已经应用过css的界面。

三、值得这样做吗？

你觉得呢？

原文参考：

http://www.sitepoint.com/blogs/2009/06/16/first-look-object-oriented-css/

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！点击进入论坛

------分隔线----------------------------

大家感兴趣的内容