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

独立的结构和样式

独立的容器和内容

那么如何才能充分表现出OOCSS这两个原理呢？

独立的结构和样式就是把布局样式和设计样式独立出来。实现这一点最好的方式就是使用网格布局系统，比如说960s、YUI Grids、Blueprint CSS、YAML、1140Grids、Columnal或者是你自己创建的布局。当然你也可以不使用网格系统，你只要定义页面上的主要对像的结构就行了。oop的概念

独立的容器和内容所指的是把内容从容器中分离出来，换过句话说任何对象（容器），应该适应接受任何形式的内容。

综合上述，OOCSS最关键的一点就是：提高他的灵活性和可重用性。这个也是OOCSS最重要的一点。

三、使用面向对象的CSS的理由

我们为什么要使用OOCSS来编写我们的样式呢？理由很简单，OOCSS编写样式其中给我们带来一个最大的好处：将我们的CSS样式更具有重用性，另外也使用我们的样式变得更小；第三个好处就是我们可以容易的改变一个网站的设计。

四、如何使用面向对象的CSS

以下几点是创建OOCSS的关键部分

创建一个组件库

独立的容器和内容，并且避免样式来依赖位置

独立的结构和样式

使用类名为扩展基本对象

坚持以语义类来命名类名

那么究竟要如何来编写OOCSS?了解了OOCSS一些基础后，我们就通过实践来编写OOCSS。下面就开始吧：

1、创建一个组件库（Create a component library）

在创建OOCSS第一步需要做的就是创建一个组件库，这也是创建OOCSS最烦锁的过程，所发时间也是最长的一个过程，但同时也是最关键的一个过程。因为你要去寻找哪些组件是可以重用的，然后给这些组件创建一个对应的HTML标签，并创建各自UI所需要的样式风格，例如一个博客中，有一个"meta data(作者发布时间相关信息)"将在一个页面不同地方出现，如下图所示：

经过观察和思考，你发现上图中三个"meta data"虽然位置在不同地，并且UI风格不一样，但他们都有一个共同点，就是HTML结构可以是一样的。这样一来，你就可以选择一个标记，作为HTML的基础结构，如：

Base Markup

				<p class=”metadata”>
					<a>Author name</a>commented on<a>21-02-2010</a>@
				</p>
			

Base Css

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

这样我们就把“meta data”单独独立出来了，使用了一个相同的HTML模板，并且有一个一样的样式，不管他在页面什么位置出现，都会是一样的结构一样的样式。但是从上图我们明显可以看到，有多个组件在变化，说简单点就是"meta data"估页面不同地方，样式不一样，解决这样的我们都是使用css来处理。后面我们会进一步介绍如何来解决这样的不同样式效果。

在这里只是想通过这样的实例来告诉大家，我们可以通过之种方式，找出所有可重用的组件，并给这个组件创建HTML和CSS样式规则。我们甚至可以创建一个单独的CSS组件库，可以细化到margin,padding，border等，然后在拼合到一起。

2、独立的容器和内容，并且避免样式来依赖位置

独立的容器和内容，并且避免样式依赖位置也是用面向对象的方法创建CSS的基本要求之一，这里的核心思想是，把容器和内容独立出来，这样的好处是，内从插入到任何容器中都可以。但在页面制作中，常常碰到一个组件出同在不 的容器中，也出现在页面的不同位置之处。对于这样的现象，前端工程师一般都会通过其父元素容器给特定的组件设置不同的样式规则。

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