OOCSS是什么，该如何用？
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;
}
预览图
注意：
3 OOCSS的优缺点
1 优点：
- css代码减少，降低工作量。
- 样式重复利用，代码简洁，便于维护。
- 代码少，加载速度快。
- 能轻松构造新的页面布局，或制作新的页面风格
2 缺点：
- 适用于大型网站项目（重复组件，样式多），小型项目优势不明显（代码少，可以直接利用第二种普通写法）。
- 需要熟练运用，因为特定要求（强调重复使用类选择器，避免使用id选择器）如果运用不得当，反而可能会造成后续维护困难，所以最好写上注释。
OOCSS是什么，该如何用？的更多相关文章
- 如何用 MEF 扩展应用程序
最近在写一篇关于如何扩展 Visual Studio 编辑器的文章时,用到了 MEF,因此打算写一篇文章提一下这个技术点.本篇文章并不打算详细介绍 MEF,只是一个最简单的入门,相信您在阅读本篇文章后 ...
- VS2015下如何用编译、调试程序。
VS2015下如何用编译.调试程序. (通过实践给出截图) 安装步骤: 下载安装网址[VS2015下载地址](http://www.ithome.com/html/win10/164028.htm) ...
- 如何用Azure Web App Services接入微信公众号
注:本文提到的代码示例下载地址>如何用Azure Web App Services接入微信公众号 如何用Azure Web App Services接入微信公众号 简介 此示例演示如何创建Azu ...
- 换肤系统（oocss方式）
近期想做一个换肤系统,参考过Bootstrap系统,思前想后,内容不难,但就是理不清楚,主要是换肤系统的css如何设计,怎样设计可重用性最好,后期更方便修改和维护,还有一个最头疼的就是怎么给css进行 ...
- 如何用hypermesh生成包含interface的流体网格
在计算气动声学的时候,有些情况是需要我们提取流体计算的结果作为声学分析的边界条件,但是,有些流体网格因为物理模型的问题需要我们设定interface,恰恰你是机械,对流体了解一点,又不想花费太多时间来 ...
- 如何用Qt做SolidWorks二次开发
这个问题困扰了我2年了,之前找到的教程都是MFC的,ATL导入向导或是通过导入类型库的方式来调用控件,我一直都搞不明白. 最近学习了ActiveQT以及通过ActiveQT控制EXCEL.Word.P ...
- 如何用Node编写命令行工具
0. 命令行工具 当全局安装模块之后,我们可以在控制台下执行指定的命令来运行操作,如果npm一样.我把这样的模块称之为命令行工具模块(如理解有偏颇,欢迎指正) 1.用Node编写命令行工具 在Node ...
- 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)
前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...
- 如何用ORM支持SQL语句的CASE WHEN？
OQL如何支持CASE WHEN? 今天,一个朋友问我,OQL可否支持CASE WHEN语句?他给的示例SQL如下: then '启用' else '停用' from tb_User OQL是SOD框 ...
随机推荐
- 用java编程在10000到99999中的数字中找到aabcc类型的数字
package com.diyo.offer; public class FindNum { public static void main(String[] args) { int count = ...
- 构造vlan报文
#!/usr/bin/python from scapy.all import * packet = Ether(src='dc:99:14:01:a3:5e', dst='ff:ff:ff:ff:f ...
- git 生成并添加 SSH key
git config --global user.name "wangjunqiang" git config --global user.email "wangjunq ...
- 区块链入门到实战（37）之Solidity – 循环语句
与其他语言类似,Solidity语言支持循环结构,Solidity提供以下循环语句. while do ... while for 循环控制语句:break.continue. Solidity – ...
- 使用python制作趣味小游戏—投骰子
1.模拟真实环境掷骰子 从Python标准库中调用模块:random——random中包含以各种方式生成随机数的函数 从random中引用randint这一函数——骰子都是有固定面数 from ran ...
- oeasy教您玩转linux010103我在那pwd
我在哪pwd 回忆上次内容 我们上次列出了关于发行版详细信息文件的位置 ls /etc/*release 其中 ls是命令的名字,意味着list列表 /是整个文件系统的根root /etc是根目录下的 ...
- adb 打开手机端口进行无线模式调试
打开手机端口 让手机在指定的端口可以接收到TCP/IP连接. 确保手机开启了usb调试 用usb线把手机和电脑连接起来 执行命令:adb tcpip 5555 执行成功后就可以把usb线拔掉了,端口可 ...
- Mac系统下php.ini的位置
http://blog.csdn.net/meegomeego/article/details/25704645 /private/etc/php.ini /usr/local/etc/php/5.5 ...
- 时间选择器 element
<el-date-picker type="datetime" placeholder="选择上线日期" :picker-options="st ...
- Activiti7 获取资源信息及其查询流程历史信息
获取资源信息 /** * 获取资源信息 * * @throws IOException */ @Test public void getProcessResources() throws IOExce ...