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

承接前面的实例，我们把“meta-data”放在不同的容器中，并给这个容器指定相应的类名或id名，如：

HTML Markup

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

CSS规则

				.post .metadata {css code}
				.comment .metadata {css code}
				.userInfo .metadata {css code}
			

在面向对象的CSS中，不提倡这种做法，也就是说OOCSS的做法主张避免这种类型的处理方法。OOCSS主张是通过在基础组件中添加更多的类，从而扩展基础组件的CSS规则，这也就是我们前面所说的OOCSS的扩展性。 下在我们一起看看如何扩展类。

3、独立的结构和样式规则(Separate structure and skin)

在创建一个组件库（Create a component library）一节中我们特别强调过，如何创建一个可重用的组件，并且说了可重用性的组件的重要性创建基础的结构(HTML)和创建基础的类名。当我们按前面所介绍的创建好了这样的一个基础对象，有一点我们需要特别的注意：在给这个刚创建的对象写样式时，需要把样式和其结构独立出来。换句话说，定义一个组件库中定义一个基础类，我们不应该给样式创建类似于“border,width,height,background”等样式规则，不然在不同容器中使用就会发生杯具。在上面的实例基础上看这个问题：

下面这个是基础类上创建的样式

				.metadata{font-size:1.2em; text-align:left; margin:10px 0;}
			

如果在基础类上添加更多的样式，如：

				.metadata{
					font-size:1.2em; 
					margin:10px 0; 
					/*在基础组件上新加的样式*/
					width:500px; 
					background-color:#efefef; 
					color:#fff;
				}
			

这样一来杯具的事情就发生了，前面创建的基础组件“meta data”就成了一个特定的组件了，在其他的容器中就难以重用了，从而失去了我们最开始使用OOCSS的宗旨了，那需要如何解决这样的冲突呢？接着看下面：

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