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框 ...
随机推荐
- golang interface 多态
原文链接:http://www.52bd.net/code/210.html demo: package main import ( "fmt" ) //通知行为的接口 type ...
- consul、eureka、nacos对比
consul.eureka.nacos对比 配置中心 eureka 不支持 consul 支持 但用起来偏麻烦,不太符合springBoot框架的命名风格,支持动态刷新 nacos 支持 用起来简单, ...
- 90%的开发都没搞懂的CI和CD！
据IDC统计,2017年,DevOps的全球软件市场已达到约39亿美元的水平,预计到2022年市场将达到80亿美元左右! 在敏捷软件开发环境中,工作模型和操作需要对公司不断变化的需求具有超级灵活的能力 ...
- [PKUWC2018]Minimax 题解
根据题意,若一个点有子节点,则给出权值:否则可以从子节点转移得来. 若没有子节点,则直接给出权值: 若只有一个子节点,则概率情况与该子节点完全相同: 若有两个子节点,则需要从两个子节点中进行转移. 如 ...
- 如何利用微博客进行seo赚钱营销
http://www.wocaoseo.com/thread-130-1-1.html 我们知道做SEO就是用人的思维来模仿搜索引擎的习惯,尽量适应seo的规则,并按照搜索引擎的规则和习惯 ...
- centos 7 对用过yum更新的软件服务进行降级
centos 7 执行 yum update 会对现有服务软件进行更新,但是如果把不该升级的软件升级,彼此软件不兼容,如何进行降级,比如:kibana 必须与 elasticsearch 大版本相同, ...
- 安装oracleXE快捷版（一）
yum找不到包,参考了一些文章,用iso上的包安装了.在文章后面贴有我实际的操作(黑体)和日志. 更换yum源https://www.cnblogs.com/zrxuexi/p/11587173.ht ...
- Android开发之viewpager导报错误解决方法：错误代码 Caused by: java.lang.ClassNotFoundException: Didn't find class
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 Caused by: java.lang.ClassNotFoundException: Didn't ...
- USB Key
随着互联网和电子商务的发展,USB Key作为网络用户身份识别和数据保护的“电子钥匙”,正在被越来越多的用户所认识和使用.本文对USB Key的产生和未来的发展趋势作了一个简单的介绍. 目前市场上见到 ...
- 上海做假证t
上海做假证[电/薇:187ヘ1184ヘ0909同号]办各类证件-办毕业证-办离婚证,办学位证书,办硕士毕业证,办理文凭学历,办资格证,办房产证不. 这是一个简单的取最大值程序,可以用于处理 i32 数 ...