现代 CSS

OOCSS——概念篇

作者：大漠 日期：2011-08-17 点击：20674

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

“Object Oriented”直译就是面向对象，对于这个词，大家并不陌生，但是加上一个CSS也就是说Object Oriented CSS，对于这个还是第一次见过，被叫作OOCSS(面向对象的ＣＳＳ)，其实这个东西早在2008年被提出，有些同学也在自己的项目中用过了。但有很多同学并不清楚，就拿我来说，我一开始还以为OOCSS是一个新语言或者是CSS框架，其实都不是，他只不过是一种新的写法。那么下面就通过“什么是OOCSS”,“OOCSS理论”等几个部分和大家一起来学习OOCSS。

一、什么是面向对象的CSS(OOCSS)

“面向对象的编程”的概念，开发商之间普遍存在的，他成为任何现代编程语言的一种基本形式，数据的抽象化、模块化和继承等特点在编写代码中得到了大规模的应用。面向对象的CSS是一种容易重用的一种CSS规则，也是OOP的概念，从而降低了页面的加载时间，提高了网面的性能。这里关键的一点就是如何在页面中识别，创建和模块化可重用的对象，并在页面中任何需要的地方重用，并扩展其附加功能。在这里我们所说的对象其实很简单，就是指基本的HTML标签和CSS样式规则。现在最关键的，也是最具有挑战性的一点就是确定“对象”，并给这个对象创建CSS样式规则。

这样一来，大家对OOCSS心中就有一个清晰的概念性存在了，其实OOCSS不是一个框架，也不是一种技术，更不是一种新的语言，他只不过是一种方法，一种书写方法，换句话说OOCSS其核心就是用最简单的方式编写最整洁，最于净的CSS代码，从而使代码更具重用性，可维护性和可扩展性。您可能在平时写代码时使用了这个概念，只不过可能不知道这个术语罢了，下面大家先来看一个实例，比如说，我们有一个容器是页面page的1/4宽，有一个蓝色的背景，1px灰色的边框，10px的左右边距，5px的上边距，10px的下边距，以前对于这样一个样式，我们常常给这个容器创建一个类，并把这些样式全部加上，如

				<div class="size1of4"></div>

把相应的样式加在这个容器上

				.size1of4 {
					background: blue;
					border: 1px solid #ccc;
					margin: 5px 10px 10px;
					width: 25%;
				}

然而使用oocss的话，我们不这样做，我把为这个容器创建更多的类，并且每个样式对应一个类，这样是为了后面可以重复使用这些组件的样式，避免重复写相同的样式，就拿这个实例来说，我们给这个容器增加下面的类：bgBlue,solidGray,mts,mlm,mrm,mbm，如：

				<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>

样式拆分到每一个组件上

				.size1of4 {width: 25%;}
				.bgBlue {background:blue}
				.solidGray {border: 1px solid #ccc}
				.mts {margin-top: 5px}
				.mrm {margin-right: 10px}
				.mbm {margin-bottom: 10px}
				.mlm {margin-left: 10px}

二、面向对象的CSS理论

引用OOCSS之父Nicole Sullivan话来说， 面向对象的CSS有两个原则：

  1. 独立的结构和样式
  2. 独立的容器和内容

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

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

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

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

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

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

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

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

  1. 创建一个组件库
  2. 独立的容器和内容，并且避免样式来依赖位置
  3. 独立的结构和样式
  4. 使用类名为扩展基本对象
  5. 坚持以语义类来命名类名

那么究竟要如何来编写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的基本要求之一，这里的核心思想是，把容器和内容独立出来，这样的好处是，内从插入到任何容器中都可以。但在页面制作中，常常碰到一个组件出同在不 的容器中，也出现在页面的不同位置之处。对于这样的现象，前端工程师一般都会通过其父元素容器给特定的组件设置不同的样式规则。

承接前面的实例，我们把“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的宗旨了，那需要如何解决这样的冲突呢？接着看下面：

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的缺点

  1. OOCSS适合真正的大型网站开发，因为大型网站用到的可重用性组件特别的多，如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。
  2. 如果没用巧妙的使用，创建组件可能对于你来说是一堆没用的东西，成为一烂摊子，给你的维护带来意想不到的杯具，说不定还是个维护的噩梦。
  3. 最好给每一个组件备写一份说明文档，有助于调用与维护

OOCSS的优点

  1. 减少CSS代码
  2. 具有清洁的HTML标记，有语义的类名，逻辑性强的层次关系
  3. 语义标记，有助于SEO
  4. 更好的页面优化，更快的加载时间（因为有很多组件重用）
  5. 可扩展的标记和CSS样式，有更多的组件可以放到库中，而不影响其他的组件
  6. 能轻松构造新的页面布局，或制作新的页面风格

上面简单的介绍了OOCSS的一些概念性知识，并通过一个实例简单介绍啊一下OOCSS的基础对象是怎么创建的，让大家在脑海中对OOCSS有一个感性的认识，后面我会介绍OOCSS的其它相关知识，比如说其几个核心内容：Template,Grids,Module和Content，当然还有更细的东西，这些都可以根据您自己的项目来决定。如果您对这个东西感兴趣，可以观注本站有关于这方面的更新。

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

nike air max 2019 basketball
返回顶部