浅谈div+css的oop编写思想给css减肥
在编程的过程中,对oop思想并不陌生,那么能不能把oop思想利用到写css样式上和html源码上呢,下面我来说一下个人的看法,也不一写对,
我们先来了解一下何为oop
面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)是一种计算机编程架构。OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成。
OOP 达到了软件工程的三个主要目标:重用性、灵活性和扩展性。为了实现整体运算,每个对象都能够接收信息、处理数据和向其它对象发送信息。
先了解这么多吧,如果想更详细的来了解可以百度一下
下面我们来说一下div+css,不能完全的做到oop但是最少能做到多少是多少,下面来看一下例子
<div class="box1">第一个盒子</div> <div class="box2">第一个盒子</div> <div class="box3">第一个盒子</div> <style> .box1,.box2,.box3{float:left; display:inline} </style>
这个例子是传统的写法,可以让这三个div块,左浮动,如果说全局要是有好几个块都需要“左浮动”,那就得在每个块的css样式都加上“float:left; display:inline
”。这样很麻烦,后期也不好修改。
下面来换一种写法,来做这个浮动
<div class="box1 fleft">第一个盒子</div> <div class="box2 fleft">第二个盒子</div> <div class="box3 fleft">第三个盒子</div> <style> .fleft{float:left;display:inline}; </style>
这就看出来有什么不一样了,希望大家可以举一反三,可以先把全局能够通一用到的样式,先写下来,最后在Html里调用,这样就很方便了。
好了我先谈到这吧,希望高手们多多发表意见