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

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

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

“面向对象的编程”的概念，开发商之间普遍存在的，他成为任何现代编程语言的一种基本形式，数据的抽象化、模块化和继承等特点在编写代码中得到了的应用。oop的概念面向对象的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}
			

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

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