1 OOCSS的定义:

Object Oriented css(面向对象css)的缩写,是一种用最简单的方式编写的CSS代码,从而使代码 重用性,可维护性和可扩展性更好的书写方法。

 

2 OOCSS的用法:

例如:有两个大小 ,外边距相同的div。

我们可以这样写代码

.box1{

    width: 30%;
margin-left: 35%;
height: 300px;
margin-top: 50px;
text-align: center;
line-height: 300px;
color: white;
background-color: #8A2BE2;
font-size: 22px; } .box2{ width: 30%;
margin-left: 35%;
height: 300px;
margin-top: 50px;
text-align: center;
line-height: 300px;
color: white;
background-color: blue;
font-size: 23px;
}

但是,其中有很多代码是相同的, 所以上边这种写法会增加很多工作量而且也不便于维护,所以一般我们也会这样写,代码如下:

.box1,.box2{

    width: 30%;
margin-left: 35%;
height: 300px;
margin-top: 50px;
text-align: center;
line-height: 300px;
color: white;
} .box1{ background-color: #8A2BE2;
font-size: 22px; }


.box2{ background-color: blue;
font-size: 23px;
}

这样把重复的css代码拿出来,单独写一个样式表,然后将有相同样式的类添加到这个样式里就行,

但是后期如果再增加一个相同的div的时候就需要重新进入样式表添加类,如果是大型网站的话 这样也会降低我们的工作效率,所以我们这时候就需要利用OOCSS写法来降低维护难度及工作量。

写法很简单,只要将重复的样式拿出来单独写一个类,然后将类嵌入到HTML代码中就可以了,代码如下:

1)样式表代码

.box1{

    background-color: #8A2BE2;
font-size: 22px; } .box2{ background-color: blue;
font-size: 23px;
} .oocss1{
width: 30%;
margin-left: 35%;
height: 300px;
margin-top: 50px;
text-align: center;
line-height: 300px;
color: white;
}

2) HTML 代码(在类里边空格+重复样式类.OOCSS1就可以调用重复样式了):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试最小空间</title>
<link rel="stylesheet" href="测试最小空间.css">
</head>
<body> <div class="box1 oocss1">Div1</div>
<div class="box2 oocss1">Div2</div> </body>
</html>

后期我们继续增加相同的div,只要在Html代码中嵌入 oocss1类就可以了,不同的地方可以在类 box3中进行添加,代码及预览图如下

Html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试最小空间</title>
<link rel="stylesheet" href="测试最小空间.css">
</head>
<body> <div class="box1 oocss1">Div1</div>
<div class="box2 oocss1">Div2</div>
<div class="box3 oocss1">Div3</div> </body>
</html>

css代码

.box1{

    background-color: #8A2BE2;
font-size: 22px; } .box2{ background-color: blue;
font-size: 23px;
} .box3{
background-color: deeppink;
font-size:25px
} .oocss1{
width: 30%;
margin-left: 35%;
height: 300px;
margin-top: 50px;
text-align: center;
line-height: 300px;
color: white;
}

预览图

注意:

1)在 OOCSS 的观念中,强调重复使用 class,而应该避免使用 id 作为 CSS 的选择器。
 
2)用OOCSS样式的时候,需要提前确定重复样式或者将重复样式尽量进行拆分,这样便于后续调用重复样式,否则有一个样式不同,就没法调用这个重复样式
 
 
 

3 OOCSS的优缺点

1 优点:

  • css代码减少,降低工作量。
  • 样式重复利用,代码简洁,便于维护。
  • 代码少,加载速度快。
  • 能轻松构造新的页面布局,或制作新的页面风格

2 缺点:

  • 适用于大型网站项目(重复组件,样式多),小型项目优势不明显(代码少,可以直接利用第二种普通写法)。
  • 需要熟练运用,因为特定要求(强调重复使用类选择器,避免使用id选择器)如果运用不得当,反而可能会造成后续维护困难,所以最好写上注释。
 

OOCSS是什么,该如何用?的更多相关文章

  1. 如何用 MEF 扩展应用程序

    最近在写一篇关于如何扩展 Visual Studio 编辑器的文章时,用到了 MEF,因此打算写一篇文章提一下这个技术点.本篇文章并不打算详细介绍 MEF,只是一个最简单的入门,相信您在阅读本篇文章后 ...

  2. VS2015下如何用编译、调试程序。

    VS2015下如何用编译.调试程序. (通过实践给出截图) 安装步骤: 下载安装网址[VS2015下载地址](http://www.ithome.com/html/win10/164028.htm) ...

  3. 如何用Azure Web App Services接入微信公众号

    注:本文提到的代码示例下载地址>如何用Azure Web App Services接入微信公众号 如何用Azure Web App Services接入微信公众号 简介 此示例演示如何创建Azu ...

  4. 换肤系统(oocss方式)

    近期想做一个换肤系统,参考过Bootstrap系统,思前想后,内容不难,但就是理不清楚,主要是换肤系统的css如何设计,怎样设计可重用性最好,后期更方便修改和维护,还有一个最头疼的就是怎么给css进行 ...

  5. 如何用hypermesh生成包含interface的流体网格

    在计算气动声学的时候,有些情况是需要我们提取流体计算的结果作为声学分析的边界条件,但是,有些流体网格因为物理模型的问题需要我们设定interface,恰恰你是机械,对流体了解一点,又不想花费太多时间来 ...

  6. 如何用Qt做SolidWorks二次开发

    这个问题困扰了我2年了,之前找到的教程都是MFC的,ATL导入向导或是通过导入类型库的方式来调用控件,我一直都搞不明白. 最近学习了ActiveQT以及通过ActiveQT控制EXCEL.Word.P ...

  7. 如何用Node编写命令行工具

    0. 命令行工具 当全局安装模块之后,我们可以在控制台下执行指定的命令来运行操作,如果npm一样.我把这样的模块称之为命令行工具模块(如理解有偏颇,欢迎指正) 1.用Node编写命令行工具 在Node ...

  8. 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)

    前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...

  9. 如何用ORM支持SQL语句的CASE WHEN?

    OQL如何支持CASE WHEN? 今天,一个朋友问我,OQL可否支持CASE WHEN语句?他给的示例SQL如下: then '启用' else '停用' from tb_User OQL是SOD框 ...

随机推荐

  1. python爬虫用drony转发进行抓包转发

    转载至https://www.cnblogs.com/lulianqi/p/11380794.html#l_2 实际操作步骤(Android) 笔者这里直接使用上面提到第3种方法(方法1在对于手机AP ...

  2. 第4章 DDL数据定义

    第4章 DDL数据定义 4.1 创建数据库 1)创建一个数据库,数据库在HDFS上的默认存储路径是/user/hive/warehouse/*.db. hive (default)> creat ...

  3. python3在科学计算中的三种常用数据结构

    在科学研究中,数据运算是必不可少的,下面介绍python语言在科学计算中常用的数据结构和运算函数. 主要数据结构: (1)列表,用中括号表示,元素之间逗号分隔,每个元素可以是数字,字符,也可以是列表, ...

  4. Golang omitempty 的用法

    原文链接:https://blog.csdn.net/skh2015java/article/details/90720692omitempty作用是在json数据结构转换时,当该字段的值为该字段类型 ...

  5. SEO需要分析哪些网站数据

    http://www.wocaoseo.com/thread-227-1-1.html 一.网站的基本数据 1.网站流量详情(ip.pv.需要看pv与ip的比) 2.网站的跳出率(可以看出一个网站的用 ...

  6. Javascript数组与函数初识

    1 - 数组 1.1 数组的概念 数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式. 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素.数组是一种将一组数 ...

  7. 位运算处理字符大小写转换 - 关联Leetcode 709. 转成小写字母

    大写变小写.小写变大写 : 字符 ^= 32; 大写变小写.小写变小写 : 字符 |= 32; 小写变大写.大写变大写 : 字符 &= -33; 题目 实现函数 ToLowerCase(),该 ...

  8. 前端模块化IIFE,commonjs,AMD,UMD,ES6 Module规范超详细讲解

    目录 为什么前端需要模块化 什么是模块 是什么IIFE 举个栗子 模块化标准 Commonjs 特征 IIFE中的例子用commonjs实现 AMD和RequireJS 如何定义一个模块 如何在入口文 ...

  9. HDU-4417-Super Mario(主席树解法)

    Mario is world-famous plumber. His “burly” figure and amazing jumping ability reminded in our memory ...

  10. Redux异步解决方案之Redux-Thunk原理及源码解析

    前段时间,我们写了一篇Redux源码分析的文章,也分析了跟React连接的库React-Redux的源码实现.但是在Redux的生态中还有一个很重要的部分没有涉及到,那就是Redux的异步解决方案.本 ...