换肤系统（oocss方式）

标签：

近期想做一个换肤系统，参考过Bootstrap系统，思前想后，内容不难，但就是理不清楚，主要是换肤系统的css如何设计，怎样设计可重用性最好，后期更方便修改和维护，还有一个最头疼的就是怎么给css进行命名，没有一个系统的，清晰的，一目了然的命名恐怕自己做到最后也都忘了。今天看到咱们博客上的一篇文章，受益良多，面向对象CSS（OOCSS），原谅我才疏学浅，2008年就被提出来了，我现在才第一次见这个名词。虽然还有人没听过这个名词，但其实也许自己已经用过这个概念和方式，它不是针对换肤系统被提出的概念，但是换肤系统正采用的这种方式。给有需要的朋友一起分享。http://www.w3cplus.com/css/oocss-concept

换肤系统需要具有模块化，独立性，重用性，扩展性，可维护性

用面向对象的方法创建CSS，如何创建更好的OOCSS原型

1.创建一个组件库

2.独立的容器和内容，并且避免样式来依赖位置（注意）

3.独立的结构和样式

4.使用类名扩展基本对象

5.坚持以语义类来命名类名

第一步就是要创建一个组件库，创建一个基础对象（基础的HTML结构和基础的类名）找出那些组件是可以重用的，可以共用一套HTML结构模板，那么给这些组件创建对应HTML标签，并创建不同的样式风格

2.把容器和内容独立出来，这样的好处是，内从插入到任何容器中都可以。但在页面制作中，常常碰到一个组件出同在不 的容器中，也出现在页面的不同位置之处。对于这样的现象，前端工程师一般都会通过其父元素容器给特定的组件设置不同的样式规则。但这样并不是最理想的，接着往下看

3.有一点我们需要特别的注意：在给这个刚创建的对象写样式时，需要把样式和其结构独立出来。换句话说，定义一个组件库中定义一个基础类，我们不应该给样式创建类似于“border,width,height,background”等样式规则，不然在不同容器中使用就会发生杯具。

4.第二条说了，把对象插入父元素中控制并不是最理想的，那么为了避免上下文选择器的使用，从父元素中分解独立出来，达到真正的可重用性，从而让基础对象在不同容器中实现不同变化，应对基础对象进行扩展，通过对基础对象扩展类名，从而达到基础对象的可重用性

5.在制作一个高规模或者说大型的web项目，对于如何给元素命名将是一个挑战性的工作，让人头疼。所以始终坚持以逻辑和语义来给元素定义类名才是王道。

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

我们中国人所说的万物都是相生相克的，OOCSS也是一样的，有其优点也有他的缺点存在。

OOCSS的缺点

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

OOCSS的优点

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

换肤系统（oocss方式）

标签：

原文地址：http://www.cnblogs.com/bomi/p/5412060.html