CSS的OOCSS架构是什么

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

10多年的岚县网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整岚县建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“岚县网站设计”,“岚县网站推广”以来，每个客户项目都认真落实执行。

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 结构中，我们就可以这样使用了：

Learn OOP

Learn CSS

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

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

明白了什么是 OOCSS，相信你对 OOCSS 可以编写出可扩展、可维护的 CSS 也有一定的了解了，而此时你也应该明白，虽然之前我们可能你没听说过 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; }

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

大橙子网站建设，新征程启航

CSS的OOCSS架构是什么

其他资讯