OO CSS的个人理解

　　这两天的学习，学到了OO CSS的部分，说实话，我还是有些不太懂得的。作为学习笔记记录下来现在的我的想法（如有错误还望可以给予我指正）和学习到的知识（OO CSS的概念解读），日后可能学习的更多我会有更新的理解。

　　先讨论一下问题产生的背景。CSS代码遇到的问题？

　　　　1.需要书写大量看似无逻辑的代码，不方便维护及拓展；

　　　　2.可重用性差，面对不同的CSS名称，不清楚到底被哪些模块引用到了，也不敢修改和删除，后面的样式只能往上面堆积；

　　　　3.怕重名，怕修改错，胡乱堆积，导致CSS越来越大；

　　这时候就需要面向对象的CSS（OO CSS）来管理我们的样式。OO CSS将页面可重用元素抽象成一个类，用class加以描述，而与其对应的HTML即可看成是此类的一个实例。在面向对象编程中，每一个类都有一个实例。而在HTML和CSS相互配合中，当一个HTML可以应用上一个class时，当前的这个元素就是这个类的实例。当我们建一个父类的class，比如在其中设置“color:red”，此时我们想重写这个父类，我们就可以在其中继续重写，而且其中的每一个具体的类都可以向上对应一个抽象的类。而且OO CSS也具有封装、继承、多态这样的特性。但是我们也没有什么必要强制的将面向对象的css 和面向对象编程的各种特点扣在一起，最主要的是要体会OO CSS中的类，我们可以复用类还可以重写类。由此也引出了OO CSS的一个应用范围，当项目很小的使用，用不用OO CSS影响都不是很大，因为本身去维护这些CSS的成本就不大。但是当遇到大型项目的时候，就需要有整体的概念，并且也方便其他的开发人员通过父类去修改、添加。随着CSS的发展，CSS3的应用，以及CSS对大部分浏览器的支持。现在的CSS，也拥有了前置处理器（用来很好的编写样式）和后置处理器（完善不同浏览器所实现的前缀）。

　　接下来我们讨论一下OO CSS的作用和注意事项

　　作用：

　　1.加强代码复用以方便维护。

　　2.减小CSS体积（因为他有父类，父类替我们做了很多无需重复的劳动，这时，该父类下面的子类就不要重写在父类中已经有的方法。）

　　3.提升渲染效率（父类先渲染整体轮廓，在让在其中的子类逐层进行内部渲染）

　　4.组件库思想（建立大型项目需具备：建立一个整体项目公用的大型的父类，这个父类里面有所有的公用的东西）栅格布局可公用，减少选择器，方便扩展。

　　注意事项：

　　1.不要直接定义子节点，应把共性声明放到父类。

代码示例：

.mod .inner{......}   //声明.mod下面的inner，在mod中做了很多公用操作
.inner{......} //不建议直接声明.inner，因为不可重用。

　　2.结构与皮肤相分离。

代码示例：

<div>class="container simpleExt"></div>//html结构，外面是container（容器），里面是simpleExt（皮肤）。不应该把所有的都写在一起。应该各司其职。
.container
{......}    //控制结构的class
.simpleExt
{......}    //控制皮肤的class

　　3.容器与内容相分离。

代码示例：

<div class="container"><ul><li>排行</li></ul></div>    //html结构
.container ul{......}    //ul依赖了容器<div class="container"><ul class="rankList"><li>排行</li></ul></div>
.rankList ul{......}    //解除与容器的依赖，可以从一个容器转移到其他容器

　　4.抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面。

　　5.往你想要扩展的对象本身增加class，而不是他的父节点。（因为父节点自有它公用的特性，并不是专用于任何一个，它是针对全局）

　　6.对象应该保留独立性。

代码示例：

<div class="container"><div class="mod"></div></div>    //html结构
.container {......} .container .mod {......}    //控制结构的css
与其写这个之上的两个结构，不如结合成一个结构来写。
<div class="container mod"></div>

　　7.避免使用ID选择器，权重太高，无法重用。（ID选择器主要针对JS使用）

　　8.避免位置相关的样式。

代码示例：

#header .container{......}, #footer .container{......}    //当header和footer里面都有container而且两个都有相同的共性，则把他们提出来成为一个（如下）
.container{}#header h1{......}, #footer h1{......}    //当header和footer中的h1要不一样的时候，可以写成如下
h1,.h1{}  h2,.h2{}  <h1><class="h6"</h1>    //写成h1和.h1这样一直写到h6，分别定义成不一样的，然后再把h1中设一个class，这时这个h1就长h6的样子了。

　　9.保证选择器相同的权重。（选择器权重不好协调，不方便升级）

　　10.类名简短清晰语义化OOCSS的名并不影响HTML语义化。

最后要说，对一个新知识最好的理解，就是去实践它！

转载于:https://www.cnblogs.com/nnnlillian/p/6102337.html

OO CSS的个人理解相关推荐

div+css+jquery仿写HTML京东首页的练习及一些关于oo css的总结
整个工程: https://download.csdn.net/download/weixin_43388844/10864383 前言前几天看b站上极客学院的web前端开发第二部分时了解到OO C ...
转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
CSS：CSS 在工程中改变——面向对象的CSS （OO CSS）
一.OO CSS 的概念解读 (一)众多开发者忽视了CSS的表现,认为其太过简单,是一种机械的工作,而把更多关注在JS的性能或者其他方面. (二)OO CSS 将页面可重用元素抽象成一个类,用cla ...
OO CSS（面向对象 CSS）
面向对象的CSS OO CSS的概念解读 OO CSS的作用和注意事项 OO CSS代码实战众多开发者忽视了CSS的表现(认为他太过简单,是一种机械的工作),而且更多关注在JavaScript的性能 ...
css display属性理解
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
CSS之深入理解 flex 布局以及计算
起因:对于Flex布局,阅读了大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文档 ...
CSS层叠样式表的理解（一）
使用css时,很多的问题都出现在盒子模型,所以要深刻理解盒子模型,才能够做好css. 盒子模型: margin:外边距与父亲标签的content边界之间的距离(可以认为content边界位置存在,但 ...
【18】CSS基础(3)——理解层叠式
本篇学习目标: 理解CSS的层叠式(层叠式包含继承性和层叠性)比较重点 CSS 的概念回顾:点击查看 ★CSS:cascading style sheet层叠样式表,是一种用来表示HTML样式的计算机 ...
css 长度单位的理解
简介:CSS 中有两种类型的长度--相对长度和绝对长度.重要的是要知道它们之间的区别,以便理解他们控制的元素将变得有多大. 一.绝对长度单位以下都是绝对长度单位--它们与其他因素之间都没有关系,通常 ...
【CSS】深入理解BFC原理及应用
BFC的定义 Block Formatting Context,中文直译为块级格式上下文.BFC就是一种布局方式,在这种布局方式下,盒子们自所在的containing block顶部一个接一个垂直排列 ...

OO CSS的个人理解

OO CSS的个人理解相关推荐

最新文章

热门文章