深入解析一下CSS架構之OOCSS-前端問答-PHP中文網

首頁

web前端

前端問答

深入解析一下CSS架構之OOCSS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jan 18, 2022 pm 05:52 PM

css

這篇文章為大家帶來了關於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 時，抽像是首先要考慮的，但還有兩個基本原則要遵循：

分離結構（structure）和皮膚（skin）。您應該在基礎物件中保留結構和位置，並在擴充類別中保留視覺特徵（如 background 或 border）。這樣您就不必覆蓋視覺屬性。
分離容器（container）和內容（content）。永遠不要在 CSS 中模仿 HTML 的結構。換句話說，不要在樣式表中引用標籤或 ID。相反，嘗試建立和應用描述相關標籤使用的類別。並將嵌套類別保持在最低限度。

記住這兩個原則的核心就是寫出可重複使用且可維護的樣式。

分離結構和皮膚

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

Colors 顏色
Fonts 字型
#Shadows 陰影
Gradients 漸層
BackgroundColos 背景

結構當然就是我們不可見的視覺屬性，例如：

Height 高度
Width 寬度
Position 位置
Margin
Padding
Overflow

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

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

/* 好的方式 */
/* 重复的代码 */
.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 h2 {
      font-size: 20px;
    }
  </style>
</head>
<body>
<div>
  <h2></h2>
  <p></p>
</div>
</body>
</html>

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

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

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

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

优点和缺点

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

优点

扩展性： OOCSS 允许您在不同元素上自由混合和重新应用类，而无需过多考虑它们的上下文。一个项目的新手可以重用他们的前辈已经抽象出来的东西，而不是堆积在 CSS 上。
维护性：添加或重新排列 HTML 标记不再需要您重新考虑整个 CSS 流程。这对于正在进行的大型项目尤其有用。
提高网站速度。减少重复有助于应用程序运行得更快。CSS 文件习惯于随着网站的复杂性增加而呈指数级扩展，从而增加网页大小。
可读性：当其他程序员看到您的 CSS 时，他们将能够快速理解其结构。
快速上手：尤其是对了解面向对象编程的新手来说。

缺点

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

不适合小项目：小型项目不一定需要可扩展性、可读性和可维护性。
增加元素类的数量：您可能需要将多个类添加到一个元素以说明所有样式元素。这可能会给不熟悉 OOCSS 的人带来一些困惑，并且会使您的标记变得混乱。
有一个学习曲线：如果您正在使用 OOCSS 而您的同事不熟悉它，这将需要他们在继续之前学习如何使用它，这需要时间。
无语义化的类名：根据两个核心的分离原则，我们代码中不可能会出现 .btn 这样一个类名搞定样式的情况，我们只会拆分的很细，但同时我们又需要 .btn 这样的业务类名。所以我们需要一种机制来解决这个问题。

语义化和可维护也是需要平衡的，不过对于我更需要的是代码的可维护，对于这个我们可以使用 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>

Less 的继承是通过伪类来实现的 :extend 具体参考 Less Extend，这个就自己去想吧。

总结

今天，我们先是了解了面向对象编程的思想，然后根据其核心思想学习了在 CSS 中如何使用 OOP，还知道了这种组织代码的方式就叫 OOCSS，OOCSS 有两个核心思想，容器与内容、结构和皮肤分离，同时总结了 OOCSS 的优缺点，并针对 OOCSS 无语义化这个重大缺点，我们结合 CSS 预处理器 SASS 给了一个解。

（学习视频分享：css视频教程）

以上是深入解析一下CSS架構之OOCSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金。如有侵權，請聯絡admin@php.cn刪除

反應：現代前端發展基礎Apr 19, 2025 am 12:23 AM

React是構建現代前端應用的JavaScript庫。 1.它採用組件化和虛擬DOM優化性能。 2.組件使用JSX定義，狀態和屬性管理數據。 3.Hooks簡化生命週期管理。 4.使用ContextAPI管理全局狀態。 5.常見錯誤需調試狀態更新和生命週期。 6.優化技巧包括Memoization、代碼拆分和虛擬滾動。

React的未來：Web開發的趨勢和創新Apr 19, 2025 am 12:22 AM

React的未來將專注於組件化開發的極致、性能優化和與其他技術棧的深度集成。 1)React將進一步簡化組件的創建和管理，推動組件化開發的極致。 2)性能優化將成為重點，特別是在大型應用中的表現。 3)React將與GraphQL和TypeScript等技術深度集成，提升開發體驗。

REACT：構建UI組件的強大工具Apr 19, 2025 am 12:22 AM

React是用於構建用戶界面的JavaScript庫，其核心思想是通過組件化構建UI。 1.組件是React的基本單位，封裝UI邏輯和样式。 2.虛擬DOM和狀態管理是組件工作的關鍵，狀態通過setState更新。 3.生命週期包括掛載、更新和卸載三個階段，合理使用可優化性能。 4.使用useState和ContextAPI管理狀態，提高組件復用性和全局狀態管理。 5.常見錯誤包括狀態更新不當和性能問題，可通過ReactDevTools調試。 6.性能優化建議包括使用memo、避免不必要的重新渲染、使用us

使用與HTML的React：渲染組件和數據Apr 19, 2025 am 12:19 AM

在React中使用HTML渲染組件和數據可以通過以下步驟實現：使用JSX語法：React使用JSX語法將HTML結構嵌入JavaScript代碼中，編譯後操作DOM。組件與HTML結合：React組件通過props傳遞數據，動態生成HTML內容，如。數據流管理：React的數據流是單向的，從父組件傳遞到子組件，確保數據流動可控，如App組件傳遞name到Greeting。基本用法示例：使用map函數渲染列表，需添加key屬性，如渲染水果列表。高級用法示例：使用useState鉤子管理狀態，實現動

React的目的：構建單頁應用程序（SPA）Apr 19, 2025 am 12:06 AM

React是構建單頁面應用（SPA）的首選工具，因為它提供了高效、靈活的用戶界面構建方式。 1）組件化開發：將復雜UI拆分成獨立、可複用的部分，提高可維護性和復用性。 2）虛擬DOM：通過比較虛擬DOM與實際DOM的差異，優化渲染性能。 3）狀態管理：通過狀態和屬性管理數據流，確保數據的一致性和可預測性。

反應：JavaScript庫用於Web開發的功能Apr 18, 2025 am 12:25 AM

React是由Meta開發的用於構建用戶界面的JavaScript庫，其核心是組件化開發和虛擬DOM技術。 1.組件與狀態管理：React通過組件（函數或類）和Hooks（如useState）管理狀態，提升代碼重用性和維護性。 2.虛擬DOM與性能優化：通過虛擬DOM，React高效更新真實DOM，提升性能。 3.生命週期與Hooks：Hooks（如useEffect）讓函數組件也能管理生命週期，執行副作用操作。 4.使用示例：從基本的HelloWorld組件到高級的全局狀態管理（useContext和

React的生態系統：庫，工具和最佳實踐Apr 18, 2025 am 12:23 AM

React生態系統包括狀態管理庫（如Redux）、路由庫（如ReactRouter）、UI組件庫（如Material-UI）、測試工具（如Jest）和構建工具（如Webpack）。這些工具協同工作，幫助開發者高效開發和維護應用，提高代碼質量和開發效率。

React和前端開發：全面概述Apr 18, 2025 am 12:23 AM

React是由Facebook開發的用於構建用戶界面的JavaScript庫。 1.它採用組件化和虛擬DOM技術，提高了UI開發的效率和性能。 2.React的核心概念包括組件化、狀態管理（如useState和useEffect）和虛擬DOM的工作原理。 3.在實際應用中，React支持從基本的組件渲染到高級的異步數據處理。 4.常見錯誤如忘記添加key屬性或不正確的狀態更新可以通過ReactDevTools和日誌調試。 5.性能優化和最佳實踐包括使用React.memo、代碼分割和保持代碼的可讀性與可維

See all articles