OOCSS—概念篇

OOCSS—概念篇

OOCSS(面向对象的ＣＳＳ) 其实这个东西早在2008年被提出，只不过是一种新CSS的写法。

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

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

面向对象的CSS是一种容易重用的一种CSS规则，也是OOP的概念，从而降低了页面的加载时间，提高了页面的性能。

这里关键的一点就是如何在页面中识别，创建和模块化可重用的对象，并在页面中任何需要的地方重用，并扩展其附加功能。

在这里我们所说的对象其实很简单，就是指基本的HTML标签和CSS样式规则。

现在最关键的，也是最具有挑战性的一点就是确定“对象”，并给这个对象创建CSS样式规则。

这样一来，大家对OOCSS心中就有一个清晰的概念性存在了，其实OOCSS不是一个框架，也不是一种技术，更不是一种新的语言，他只不过是一种方法，一种书写方法，换句话说OOCSS其核心就是用最简单的方式编写最整洁，最于净的CSS代码，从而使代码更具重用性，可维护性和可扩展性。

您可能在平时写代码时使用了这个概念，只不过可能不知道这个术语罢了。

举个栗子：

传统CSS写法：

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

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

OOCSS写法：（样式拆分到每一个组件上）

<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理论

面向对象的CSS有两个原则：

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

独立的结构和样式就是把布局样式和设计样式独立出来。实现这一点最好的方式就是使用网格布局系统。

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

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

这个也是OOCSS最重要的一点。

使用面向对象的CSS的理由

我们为什么要使用OOCSS来编写我们的样式呢？

理由很简单，OOCSS编写样式其中给我们带来一个最大的好处：

1. 将我们的CSS样式更具有重用性
2. 另外也使用我们的样式变得更小
3. 第三个好处就是我们可以容易的改变一个网站的设计

如何使用面向对象的CSS

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

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

创建一个组件库

找出所有可重用的组件，并给这个组件创建HTML和CSS样式规则。

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

把容器和内容独立出来，这样的好处是，样式组件插入到任何容器中都可以。

独立的结构和样式

在给这个刚创建的对象写样式时，需要把样式和其结构独立出来。

定义一个组件库中定义一个基础类，我们不应该给样式创建类似于“border,width,height,background”等样式规则，不然在不同容器中使用就会发生杯具。

这样基础类就会变为特定的组件了，在其它的容器中就难以重用了。

使用类名为扩展基本对象

通过对基础对象扩展类名，从而达到基础对象的可重用性。

坚持以语义类来命名类名

始终坚持以逻辑和语义来给元素定义类名才是王道。

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

OOCSS的缺点

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

OOCSS的优点

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