OOCSS—概念篇
来源:互联网 发布:js函数返回true false 编辑:程序博客网 时间:2024/05/29 15:52
OOCSS—概念篇
OOCSS(面向对象的CSS) 其实这个东西早在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有两个原则:
- 独立的结构和样式
- 独立的容器和内容
独立的结构和样式就是把布局样式和设计样式独立出来。实现这一点最好的方式就是使用网格布局系统。
独立的容器和内容所指的是把内容从容器中分离出来,换过句话说任何对象(容器),应该适应接受任何形式的内容。
综合上述,OOCSS最关键的一点就是:提高他的灵活性和可重用性。
这个也是OOCSS最重要的一点。
使用面向对象的CSS的理由
我们为什么要使用OOCSS来编写我们的样式呢?
理由很简单,OOCSS编写样式其中给我们带来一个最大的好处:
- 将我们的CSS样式更具有重用性
- 另外也使用我们的样式变得更小
- 第三个好处就是我们可以容易的改变一个网站的设计
如何使用面向对象的CSS
以下几点是创建OOCSS的关键部分
- 创建一个组件库
- 独立的容器和内容,并且避免样式来依赖位置
- 独立的结构和样式
- 使用类名为扩展基本对象
- 坚持以语义类来命名类名
创建一个组件库
找出所有可重用的组件,并给这个组件创建HTML和CSS样式规则。
独立的容器和内容,并且避免样式来依赖位置
把容器和内容独立出来,这样的好处是,样式组件插入到任何容器中都可以。
独立的结构和样式
在给这个刚创建的对象写样式时,需要把样式和其结构独立出来。
定义一个组件库中定义一个基础类,我们不应该给样式创建类似于“border,width,height,background”等样式规则,不然在不同容器中使用就会发生杯具。
这样基础类就会变为特定的组件了,在其它的容器中就难以重用了。
使用类名为扩展基本对象
通过对基础对象扩展类名,从而达到基础对象的可重用性。
坚持以语义类来命名类名
始终坚持以逻辑和语义来给元素定义类名才是王道。
面向对象的CSS的优点和缺点
OOCSS的缺点
- OOCSS适合真正的大型网站开发,因为大型网站用到的可重用性组件特别的多,如果运用在小型项目中可能见不到什么成效。所以用不用OOCSS应该根据你的项目来决定。
- 如果没用巧妙的使用,创建组件可能对于你来说是一堆没用的东西,成为一烂摊子,给你的维护带来意想不到的杯具,说不定还是个维护的噩梦。
- 最好给每一个组件备写一份说明文档,有助于调用与维护
OOCSS的优点
- 减少CSS代码
- 具有清洁的HTML标记,有语义的类名,逻辑性强的层次关系
- 语义标记,有助于SEO
- 更好的页面优化,更快的加载时间(因为有很多组件重用)
- 可扩展的标记和CSS样式,有更多的组件可以放到库中,而不影响其他的组件
- 能轻松构造新的页面布局,或制作新的页面风格
- OOCSS—概念篇
- OOCSS——概念篇
- OOCSS——核心篇
- 面向对象的 CSS —— OOCSS
- Css设计模式-理论篇之OOCSS、SMACSS与BEM
- OOCSS FAQ
- css框架[1]-oocss
- oocss ; LESS;SASS
- 面向对象的CSS(OOCSS)
- 使用Sass来写OOCSS
- 面向对象的 CSS (OOCSS)
- 基础—概念篇
- Atitit OOCSS vs bem
- 前端规范(ES6\BEM\OOCSS\SMACSS)
- 概念篇
- 概念篇
- 如何写好CSS?(OOCSS\DRY\SMACSS)
- CSS 代码组织和管理规范BEM,OOCSS,SMACSS,ACSS
- Java POI 导出EXCEL经典实现以及 Java导出Excel弹出下载框
- 那两年炼就的Android内功修养
- 一位资深程序员大牛给予Java初学者的学习路线建议
- 踩坑,踩的坑真好,PreView仅供参考
- H5实现摇一摇技术总结
- OOCSS—概念篇
- angular-请求数据
- JPA架构
- 克隆二叉树
- MooFest
- eclipse的常用快捷键
- openGL-learn01 学习OpenGL前的准备工作
- 屏蔽google adsense和百度推广的广告
- Java面试常见问题