文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS的OOCSS架构是什么

2024-04-02 19:55

关注

本篇内容主要讲解“CSS的OOCSS架构是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS的OOCSS架构是什么”吧!

CSS的OOCSS架构是什么

面向对象编程

如果你有面向对象编程经验完全可以略过这一节。

在进入 OOCSS 的学习之前,我们要先了解下面向对象编程。面向对象编程 是1950 年代后期 开始在 MIT 的人工智能小组环境中出现,根据维基百科:

面向对象编程 (OOP) 是一种编程范式,它将概念表示为具有数据字段(描述对象的属性)和称为方法的相关过程的“对象”。对象是类的实例,用于相互交互以设计应用程序和计算机程序。

面向对象还有三大特征:继承、封装、多态。

OOP 已经在 JavaScript 和后端语言中广泛使用了几年,但根据其原则组织 CSS 仍然相对较新。通俗地说,OOP 是使您的代码可重用、高效且快速的实践。

过多概念就不用介绍了,来看看我们入门 JavaScript 的时候,相信每个人都学习实践过的 Animal 类来辅助我们理解 OOP:

// 基类 / 父类
class Animail {
    constructor() {}
    getName() {}
}
// 子类
class Cat extends Animail {
    constructor() {}
    run() {}
    jump() {}
}
// 子类
class Fish extends Animail {
    constructor() {}
    swim () {}
}

什么是 OOCSS?

概念总是难于理解的,所以我们快速进入一个示例,然后在了解什么是 OOCSS?

在我们还是 CSS 新手的时候,我们组织 CSS 代码的时候,有时候会写出如下代码:


.box-1 {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  border-radius: 10px;
}
.box-2 {
  border: 1px solid #ccc;
  width: 120px;
  height: 120px
  border-radius: 10px;
}

你不难发现,代码中有一些重复的样式出现,维护这段代码时,如果你想改变 border-radius 或 border 的属性值,不得不在两个地方同时修改。

为了便于维护,我们可以把重复的代码提取出来放到一个新的类名中,作为基础类名,这样当有新的更改就不需要去维护两份代码了:



.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}

在 HTML 结构中,我们就可以这样使用了:

<div class="box-border box-1">Learn OOP</div>
<div class="box-border box-2">Learn CSS</div>

如果我们把新改的 CSS 代码抽象下,我们就可以这样认为:

如果我们想让两个 div 的样式达到理想的效果,没有 box-border 这个公共类名,本身 box-1 和 box-2 单独作用是达不到理想的样式效果,换句话说 box-border 是基类 box-1 和 box-2 就是子类。

这就是在 CSS 中硬抽象出来的 OOP 概念,叫 OOCSS。

不过 OOCSS 的作者 Nicole Sullivan 是用下面这句话来总结 CSS 的面向对象编程,。

It’s a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript.

这是一个重复的视觉模式,可以抽象为 HTML、CSS 和可能的 JavaScript 的独立片段。

Nicole Sullivan

明白了什么是 OOCSS,相信你对 OOCSS 可以编写出可扩展、可维护的 CSS 也有一定的了解了,而此时你也应该明白,虽然之前我们可能你没听说过 OOCSS 的概念,但是项目中绝对在不知不觉的使用了这个技能。

好了,接下来我们来真正学习什么 OOCSS?

OOCSS (Object-Oriented CSS 翻译为 面向对象 CSS) 是组织 CSS 的领先的模块化或基于组件的系统。它是 Nicole Sullivan 在 2008 年在 Web Directions North 大会上首次提出的。

她同时提到,在构建 OOCSS 时,抽象是首先要考虑的,但还有两个基本原则要遵循:

记住这两个原则的核心就是编写可复用和可维护的样式。

分离结构和皮肤

皮肤是我们可见的视觉属性,例如:

结构当然就是我们不可见的视觉属性,例如:

这么分离也是有依据的,给你举个生动形象的例子,都打过王者荣耀吧,如果你是忠爱粉可能还花钱买过皮肤,刷刷的一换,英雄瞬间逼格高了不少,我们网页的结构和皮肤相互分离和王者的英雄换肤一个道理。

这个好例子就是我们上面举的这个例子:



.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}

在 HTML 结构:

<div class="box-border box-1">Learn OOP</div>
<div class="box-border box-2">Learn CSS</div>

分离容器和内容

我们对着下面这个例子讲解:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      font-size: 20px;
    }
    div h3 {
      font-size: 20px;
    }
  </style>
</head>
<body>
<div>
  <h3></h3>
  <p></p>
</div>
</body>
</html>

上面这个例子,h3 被锁定在 menu 这个容器里面了,如果一不小心改变了 HTML 的结构就会导致我们写的 CSS 无效,非常的不便于维护,而且作用于 h3 标签上的样式还无法复用,真是让人头疼。

根据容器和内容分离的原则,我们应该让容器和内容有各自的样式,同时避免使用标签选择器,改写得到如下代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .menu {
      width: 200px;
      height: 200px;
    }
    .menu-title {
      font-size: 20px;
    }
  </style>
</head>
<body>
<div>
  <h3></h3>
  <p></p>
</div>
</body>
</html>

OK,这样代码就非常便于维护和复用了,切记在项目中,我们应该禁止使用和位置相关的样式还有标签选择器。

优点和缺点

上面反复强调使用 OOCSS 的好处就是 编写可复用和可维护的样式 这两个特点,此篇我们来总结下 OOCSS 的优缺点:

优点

缺点

虽然使用 OOCSS 有很多好处,但也有一些缺点:

语义化和可维护也是需要平衡的,不过对于我更需要的是代码的可维护,对于这个我们可以使用 CSS 预处理器解决,例如 Sass/Less。

Sass/Less 的继承

还记得 OOP 编程三大特性吧,其中之一就是继承,正好对应了 Sass/Less 的 extend,你说这不巧了吗不是。

根据 OOCSS 当我们需要一个按钮:


.button-structure {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
.button-skip {
  color: #fff;
  background: #55acee;
}
<button class="button-structure button-skip"></button>

在 Sass 中,我们可以使用 %placeholder 来创建对象,通过 @extend 在类中调用,将其合在一起。这样就可以自己组织代码:


%button-structure {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
%button-skip {
  color: #fff;
  background: #55acee;
}
.btn {
    @extend %button-structure;
    @extend %button-skip;
}

重点来了,一个业务类名解决:

<button></button>

到此,相信大家对“CSS的OOCSS架构是什么”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯