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框 ...
随机推荐
- 初识ABP vNext（5）：ABP扩展实体
Tips:本篇已加入系列文章阅读目录,可点击查看更多相关文章. 目录 前言 开始 扩展实体 路由整理 最后 前言 上一篇实现了前端vue部分的用户登录和菜单权限控制,但是有一些问题需要解决,比如用户头 ...
- powerdesigner16.5 生成sql语句
1.首先安装好designer. 2.打开之后新建一个project. 3.创建之后可能会生成这样的页面. 4.点击这个图标就能调出那个视图框. 5.在project处单机右键,New一个Concep ...
- Linux MPI环境配置
参考:https://blog.csdn.net/lusongno1/article/details/61709460 注意点: 1. /etc/profile.d/user.sh和/etc/ld.s ...
- LG P4161 [SCOI2009]游戏/LG P6280 [USACO20OPEN]Exercise G
Description(P4161) windy学会了一种游戏. 对于1到N这N个数字,都有唯一且不同的1到N的数字与之对应. 最开始windy把数字按顺序1,2,3,……,N写一排在纸上. 然后再在 ...
- 用Python的Pandas和Matplotlib绘制股票KDJ指标线
我最近出了一本书,<基于股票大数据分析的Python入门实战 视频教学版>,京东链接:https://item.jd.com/69241653952.html,在其中给出了MACD,KDJ ...
- 【WEB自动化测试之控件定位】基于HTML5控件的唯一控件属性定位
一.WEB控件定位是什么 要想弄懂这个问题,我们还是基于实践来学习.我们先来看一条入门级别自动化测试用例的构成. DemoCase:正确用户名和密码登录博客园,登录成功 URL: https:// ...
- akka-grpc - 应用案例
上期说道:http/2还属于一种不算普及的技术协议,可能目前只适合用于内部系统集成,现在开始大面积介入可能为时尚早.不过有些项目需求不等人,需要使用这项技术,所以研究了一下akka-grpc,写了一篇 ...
- 如何配置node环境变量
1,安装node.js 最后安装的目录在 检测node安装成功 node -v 如果报错 没有默认装在c盘 pro 需要配置环境变量 Npm node package manag ...
- 做一名合格的DBA
Oracle DBA的角色定义 开发型DBA 数据库安装 数据库架构设计(架构和建模) 代码开发(存储过程,SQL) 运维型DBA 数据库日常监控 故障处理 性能优化 数据备份,容灾 数据库安全规划 ...
- Dos简易基础及常用Dos命令
Dos简易基础及常用Dos命令 什么是cmd? cmd是command的缩写,意指操作系统中的命令行程序,一般说的都是Windows中的Dos系统. 如何打开cmd? 键盘操作:Win + R 输入c ...