OOP是什么_域完整性的设置方法_oop的概念(4)

4、使用类名来扩展基础对象（Extend base objects using class names）

在“独立容器和内容”一节中，我们讨论过，为了让基础对象可重用，我们在不同的地方将其放入不同的容器中，从而通过上下文选择器的使用，让基础对象达到重用的作用。虽然这样表面上达到了重用性，但对于OOCSS来说并不是最理想的方法，那么为了避免上下文选择器的使用，将基础对象从他们的父容器中独立分解出来，从而将整个基础对象达到真正的可重用生，从而让基础对象在不同容器中实现不同的变化。实现这一点我们需要怎么做呢？为了解决这个问题，并不是像前面的一样，将基础对象插入一个父容器中，而是将基础对象进行扩展，根据上下文，通过更多的类名，让基础对象在不同位置实现不同的效果，从而实现了我们前面所说的重用性。简单点说就是通过对基础对象扩展类名，从而达到基础对象的可重用性。沿着前面的实例，我们看看如何进行修改。

将前面不理想的结构修改一下，如：

				/*post中的meta-data*/
					<p class=”metadata postMetaData”>
						<a>Author name</a>commented on<a>21-02-2010</a>@
					</p>
				/*comment中的meta-data*/
					<p class=”metadata commentMetaData”>
						<a>Author name</a>commented on<a>21-02-2010</a>@
					</p>
				/*userinfo中的meta-data*/
					<p class=”metadata useInfoMetaData”>
						<a>Author name</a>commented on<a>21-02-2010</a>@
					</p>
			

分别在post,comment,userinfo三个地方的基础对象meta data的基础上扩展了一个相对应的类名，如：postMetaData,commentMetaData,userInfoMetaData。那么我们在来看其样式规则的变化：

				.metadata{font-size:1.2em; margin:10px 0;}
				.commentMetaData{font-size:1em; margin:0 0 10px 0; color:#063070; }
				.postMetaData{ color:#063070; }
				.useInfoMetaData{ color:#fff; }
			

这是一个非常简单的实例演示，我们利用一个博客中的"meta data"用为原型，针对创建OOCSS的几个要点一步一步介绍如何创建这样的一个meta data对象，主要是让大家理解面像对象的CSS概念和如何更好的创建一个ＯＯＣＳＳ的原型。

5、坚持以语义来定义类的名称

在制作一个高规模或者说大型的web项目，对于如何给元素命名将是一个挑战性的工作，要在一定的语义环境下确保有语义的类名或者ID名，交且可以重复使用这些有语义的名称，我想大家都非常的头痛，特别是一些新同学。另外随着OOCSS中对基础对象的扩展，让大家更容易跳进了创建“表像类名”的陷井中。比如大家平时中常定义的类名：leftCol,midCol,bottom,top,bigText,redText,borderText等；这样的类名是不能重复使用的，在OOCSS中对基础对象提高他的扩展性也带来相当大的障碍。所以始终坚持以逻辑和语义来给元素定义类名才是王道。比如说我们给web页面中的错误信息块（红色背景文本块），我们不应定义类名为“redText”,定义为"warning"将更有语义化，更具有重用性。

五、面向对象的CSS的优点和缺点

我们中国人所说的万物都是相生相克的，OOCSS也是一样的，有其优点也有他的缺点存在。

OOCSS的缺点

OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。

如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。

最好给每一个组件备写一份说明文档，有助于调用与维护

OOCSS的优点

减少CSS代码

具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系

语义标记，有助于SEO

更好的页面优化，更快的加载时间（因为有很多组件重用）

可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件

能轻松构造新的页面布局，或制作新的页面风格

如需转载烦请注明出处：W3CPLUS

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-26782-4.html