溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS的OOCSS架構(gòu)是什么

發(fā)布時(shí)間：2022-01-19 09:08:57 來源：億速云 閱讀：131 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“CSS的OOCSS架構(gòu)是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS的OOCSS架構(gòu)是什么”吧!

CSS的OOCSS架構(gòu)是什么

面向?qū)ο缶幊?/strong>

如果你有面向?qū)ο缶幊探?jīng)驗(yàn)完全可以略過這一節(jié)。

在進(jìn)入 OOCSS 的學(xué)習(xí)之前，我們要先了解下面向?qū)ο缶幊獭Ｃ嫦驅(qū)ο缶幊?是1950 年代后期 開始在 MIT 的人工智能小組環(huán)境中出現(xiàn)，根據(jù)維基百科：

面向?qū)ο缶幊?(OOP) 是一種編程范式，它將概念表示為具有數(shù)據(jù)字段（描述對(duì)象的屬性）和稱為方法的相關(guān)過程的“對(duì)象”。對(duì)象是類的實(shí)例，用于相互交互以設(shè)計(jì)應(yīng)用程序和計(jì)算機(jī)程序。

面向?qū)ο筮€有三大特征：繼承、封裝、多態(tài)。

OOP 已經(jīng)在 JavaScript 和后端語言中廣泛使用了幾年，但根據(jù)其原則組織 CSS 仍然相對(duì)較新。通俗地說，OOP 是使您的代碼可重用、高效且快速的實(shí)踐。

過多概念就不用介紹了，來看看我們?nèi)腴T JavaScript 的時(shí)候，相信每個(gè)人都學(xué)習(xí)實(shí)踐過的 Animal 類來輔助我們理解 OOP：

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

什么是 OOCSS？

概念總是難于理解的，所以我們快速進(jìn)入一個(gè)示例，然后在了解什么是 OOCSS？

在我們還是 CSS 新手的時(shí)候，我們組織 CSS 代碼的時(shí)候，有時(shí)候會(huì)寫出如下代碼：

/* 不好的方式 */
.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;
}

你不難發(fā)現(xiàn)，代碼中有一些重復(fù)的樣式出現(xiàn)，維護(hù)這段代碼時(shí)，如果你想改變 border-radius 或 border 的屬性值，不得不在兩個(gè)地方同時(shí)修改。

為了便于維護(hù)，我們可以把重復(fù)的代碼提取出來放到一個(gè)新的類名中，作為基礎(chǔ)類名，這樣當(dāng)有新的更改就不需要去維護(hù)兩份代碼了：

/* 好的方式 */
/* 重復(fù)的代碼 */
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}

在 HTML 結(jié)構(gòu)中，我們就可以這樣使用了：

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

如果我們把新改的 CSS 代碼抽象下，我們就可以這樣認(rèn)為：

如果我們想讓兩個(gè) div 的樣式達(dá)到理想的效果，沒有 box-border 這個(gè)公共類名，本身 box-1 和 box-2 單獨(dú)作用是達(dá)不到理想的樣式效果，換句話說 box-border 是基類 box-1 和 box-2 就是子類。

這就是在 CSS 中硬抽象出來的 OOP 概念，叫 OOCSS。

不過 OOCSS 的作者 Nicole Sullivan 是用下面這句話來總結(jié) CSS 的面向?qū)ο缶幊?，?/p>

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

這是一個(gè)重復(fù)的視覺模式，可以抽象為 HTML、CSS 和可能的 JavaScript 的獨(dú)立片段。

Nicole Sullivan

明白了什么是 OOCSS，相信你對(duì) OOCSS 可以編寫出可擴(kuò)展、可維護(hù)的 CSS 也有一定的了解了，而此時(shí)你也應(yīng)該明白，雖然之前我們可能你沒聽說過 OOCSS 的概念，但是項(xiàng)目中絕對(duì)在不知不覺的使用了這個(gè)技能。

好了，接下來我們來真正學(xué)習(xí)什么 OOCSS？

OOCSS (Object-Oriented CSS 翻譯為 面向?qū)ο?CSS) 是組織 CSS 的領(lǐng)先的模塊化或基于組件的系統(tǒng)。它是 Nicole Sullivan 在 2008 年在 Web Directions North 大會(huì)上首次提出的。

她同時(shí)提到，在構(gòu)建 OOCSS 時(shí)，抽象是首先要考慮的，但還有兩個(gè)基本原則要遵循：

  • 分離結(jié)構(gòu)（structure）和皮膚（skin）。 您應(yīng)該在基礎(chǔ)對(duì)象中保留結(jié)構(gòu)和位置，并在擴(kuò)展類中保留視覺特征（如 background 或 border）。這樣您就不必覆蓋視覺屬性。

  • 分離容器（container）和內(nèi)容（content）。 永遠(yuǎn)不要在 CSS 中模仿 HTML 的結(jié)構(gòu)。換句話說，不要在樣式表中引用標(biāo)簽或 ID。相反，嘗試創(chuàng)建和應(yīng)用描述相關(guān)標(biāo)簽使用的類。并將嵌套類保持在最低限度。

記住這兩個(gè)原則的核心就是編寫可復(fù)用和可維護(hù)的樣式。

分離結(jié)構(gòu)和皮膚

皮膚是我們可見的視覺屬性，例如：

  • Colors 顏色

  • Fonts 字體

  • Shadows 陰影

  • Gradients 漸變

  • BackgroundColos 背景

結(jié)構(gòu)當(dāng)然就是我們不可見的視覺屬性，例如：

  • Height 高度

  • Width 寬度

  • Position 位置

  • Margin

  • Padding

  • Overflow

這么分離也是有依據(jù)的，給你舉個(gè)生動(dòng)形象的例子，都打過王者榮耀吧，如果你是忠愛粉可能還花錢買過皮膚，刷刷的一換，英雄瞬間逼格高了不少，我們網(wǎng)頁的結(jié)構(gòu)和皮膚相互分離和王者的英雄換膚一個(gè)道理。

這個(gè)好例子就是我們上面舉的這個(gè)例子：

/* 好的方式 */
/* 重復(fù)的代碼 */
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}

在 HTML 結(jié)構(gòu)：

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

分離容器和內(nèi)容

我們對(duì)著下面這個(gè)例子講解：

<!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>

上面這個(gè)例子，h3 被鎖定在 menu 這個(gè)容器里面了，如果一不小心改變了 HTML 的結(jié)構(gòu)就會(huì)導(dǎo)致我們寫的 CSS 無效，非常的不便于維護(hù)，而且作用于 h3 標(biāo)簽上的樣式還無法復(fù)用，真是讓人頭疼。

根據(jù)容器和內(nèi)容分離的原則，我們應(yīng)該讓容器和內(nèi)容有各自的樣式，同時(shí)避免使用標(biāo)簽選擇器，改寫得到如下代碼

<!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，這樣代碼就非常便于維護(hù)和復(fù)用了，切記在項(xiàng)目中，我們應(yīng)該禁止使用和位置相關(guān)的樣式還有標(biāo)簽選擇器。

優(yōu)點(diǎn)和缺點(diǎn)

上面反復(fù)強(qiáng)調(diào)使用 OOCSS 的好處就是 編寫可復(fù)用和可維護(hù)的樣式 這兩個(gè)特點(diǎn)，此篇我們來總結(jié)下 OOCSS 的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)

  • 擴(kuò)展性： OOCSS 允許您在不同元素上自由混合和重新應(yīng)用類，而無需過多考慮它們的上下文。一個(gè)項(xiàng)目的新手可以重用他們的前輩已經(jīng)抽象出來的東西，而不是堆積在 CSS 上。

  • 維護(hù)性： 添加或重新排列 HTML 標(biāo)記不再需要您重新考慮整個(gè) CSS 流程。這對(duì)于正在進(jìn)行的大型項(xiàng)目尤其有用。

  • 提高網(wǎng)站速度。 減少重復(fù)有助于應(yīng)用程序運(yùn)行得更快。CSS 文件習(xí)慣于隨著網(wǎng)站的復(fù)雜性增加而呈指數(shù)級(jí)擴(kuò)展，從而增加網(wǎng)頁大小。

  • 可讀性： 當(dāng)其他程序員看到您的 CSS 時(shí)，他們將能夠快速理解其結(jié)構(gòu)。

  • 快速上手： 尤其是對(duì)了解面向?qū)ο缶幊痰男率謥碚f。

缺點(diǎn)

雖然使用 OOCSS 有很多好處，但也有一些缺點(diǎn)：

  • 不適合小項(xiàng)目： 小型項(xiàng)目不一定需要可擴(kuò)展性、可讀性和可維護(hù)性。

  • 增加元素類的數(shù)量： 您可能需要將多個(gè)類添加到一個(gè)元素以說明所有樣式元素。這可能會(huì)給不熟悉 OOCSS 的人帶來一些困惑，并且會(huì)使您的標(biāo)記變得混亂。

  • 有一個(gè)學(xué)習(xí)曲線： 如果您正在使用 OOCSS 而您的同事不熟悉它，這將需要他們?cè)诶^續(xù)之前學(xué)習(xí)如何使用它，這需要時(shí)間。

  • 無語義化的類名： 根據(jù)兩個(gè)核心的分離原則，我們代碼中不可能會(huì)出現(xiàn) .btn 這樣一個(gè)類名搞定樣式的情況，我們只會(huì)拆分的很細(xì)，但同時(shí)我們又需要 .btn 這樣的業(yè)務(wù)類名。所以我們需要一種機(jī)制來解決這個(gè)問題。

語義化和可維護(hù)也是需要平衡的，不過對(duì)于我更需要的是代碼的可維護(hù)，對(duì)于這個(gè)我們可以使用 CSS 預(yù)處理器解決，例如 Sass/Less。

Sass/Less 的繼承

還記得 OOP 編程三大特性吧，其中之一就是繼承，正好對(duì)應(yīng)了 Sass/Less 的 extend，你說這不巧了嗎不是。

根據(jù) OOCSS 當(dāng)我們需要一個(gè)按鈕：

/* 不好的方式 */
.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 來創(chuàng)建對(duì)象，通過 @extend 在類中調(diào)用，將其合在一起。這樣就可以自己組織代碼：

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

重點(diǎn)來了，一個(gè)業(yè)務(wù)類名解決：

<button></button>

到此，相信大家對(duì)“CSS的OOCSS架構(gòu)是什么”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手