CSS設(shè)計(jì)模式實(shí)例分析

今天小編給大家分享一下CSS設(shè)計(jì)模式實(shí)例分析的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

設(shè)計(jì)模式:OOCSS

OOCSS是比較基礎(chǔ)的設(shè)計(jì)模式，其他設(shè)計(jì)模式或多或少都有OOCSS的影子。那么什么是OOCSS呢?估計(jì)大家看到OO的時(shí)候就已經(jīng)知道了，沒(méi)錯(cuò)，就是是面向?qū)ο?，那么面向?qū)ο蠛臀覀儗?xiě)CSS有半毛錢(qián)關(guān)系嗎？當(dāng)然有。

OO:面向?qū)ο?/h4>

大家都很熟悉面向?qū)ο?，我們?jiǎn)單看下下面這一段代碼：

class Person {
    void study () {}
}

class Teacher extends Person {
    void study () {}
    void teach () {}
}

class Student extends Person {
    void study () {}
}

有一個(gè)Person類(lèi)，它有一些方法，Teacher和Student都繼承Person，并且進(jìn)行了一些修訂和擴(kuò)展。那么我們可以把Person類(lèi)看成是別人寫(xiě)代碼，在不改變別人源碼的情況下,新增Teacher和Student對(duì)源碼進(jìn)行修訂和擴(kuò)展。這種寫(xiě)法是完全可以應(yīng)用到CSS上面的。我們看下面一段代碼場(chǎng)景:

<p class="menu"></p>
<p class="menu fix"></p>
<p class="menu"></p>

.menu {
   color: green;
   font-size: 14px;
}

.fix {
   color: red;
}

場(chǎng)景:設(shè)計(jì)師只想讓我們改變其中一個(gè)盒子的樣式，其他的不變。
這時(shí)不能輕易改變menu，因?yàn)橐坏└淖兙蜁?huì)影響不需要改變的地方。那么我們可以直接利用面向?qū)ο蟮乃枷耄诤竺鎲为?dú)添加一個(gè)類(lèi)進(jìn)行修訂和擴(kuò)展。這樣一看我們平時(shí)在寫(xiě)的CSS，不就是面向?qū)ο髥幔?br/> 當(dāng)然，OOCSS是有具體的原則的。那么它有哪些原則且個(gè)原則的具體是什么呢？我們來(lái)看一下：

原則一:容器與內(nèi)容分離

容器與內(nèi)容分離顧名思義，直接看一個(gè)代碼案例：

<p class="post"> 
  <p class="metadata">
    <a>Hello</a>
  </p>
</p>

<p class="comment"> 
  <p class="metadata">
    <a>Hello</a>
  </p>
</p>

// ---------code 1-----------
.post .metadata {
  // css code
}

// ---------code 2-----------
.post {}
.metadata {
  // css code
}

場(chǎng)景:兩個(gè)不同容器中的內(nèi)容相同
先看樣式的code 1，這樣顯然不好，容器和內(nèi)容是嵌套依賴(lài)關(guān)系，并沒(méi)有做到容器與內(nèi)容分離。內(nèi)容的樣式無(wú)法復(fù)用。樣式的code 2做到了容器與內(nèi)容分離，內(nèi)容在不同的容器中可以復(fù)用。

原則二:結(jié)構(gòu)與皮膚分離

結(jié)構(gòu)可以看做是一個(gè)基礎(chǔ)對(duì)象,而皮膚可以看做是另外一個(gè)對(duì)象,也就是對(duì)象與對(duì)象要分離?；A(chǔ)對(duì)象不能改,不斷的分離出皮膚對(duì)象達(dá)到對(duì)基礎(chǔ)對(duì)象的修正和擴(kuò)展。

<p class="menu fix"></p>

// 基礎(chǔ)對(duì)象
.menu {
  color: green;
  font-size: 14px;
}
// 皮膚
.fix {
  color: red;
}

OOCSS與Vue的關(guān)系

我們每天都在寫(xiě)OOCSS，Vue的組件就是OOCSS。我們下面一段代碼：

// -------------定義組件-----------------
<template>
  <p class="menu"></p>
</template>

<script>
  export default {
    name: 'MateData'
  }
</script>

<style> 
// 基礎(chǔ)對(duì)象
.menu {
   color: green;
   font-size: 14px;
}
</style>

// -----------使用組件-------------------

<template>
  <mate-data class="fix1"></mate-data>
  <mate-data class="fix2"></mate-data>
</template>

<style> 
// 皮膚
.fix1 {
   color: red;
}
.fix2 {
   font-size: 20px;
}
</style>

OOCSS的應(yīng)用
Grid柵格系統(tǒng)、布局組件等

設(shè)計(jì)模式:BEM

什么是BEM

BEM即塊(Block)、元素(Element)、修飾符(Modifier) 是由Yandex（俄羅斯最著名的互聯(lián)網(wǎng)企業(yè)）的開(kāi)發(fā)團(tuán)隊(duì)提出的前端開(kāi)發(fā)理論。BEM通過(guò)Block、Element、Modifier來(lái)描述頁(yè)面(關(guān)鍵就是為了解決多人協(xié)作的命名問(wèn)題)。
Block是頁(yè)面中獨(dú)立存在的區(qū)塊，可以在不同場(chǎng)合下使用。每個(gè)頁(yè)面都可以看做是多個(gè)Block組成。
Element是構(gòu)成Block的元素，只有在對(duì)應(yīng)Block內(nèi)部才具有意義，是依賴(lài)于Block的存在。
Modifier是描述Block或Element的屬性或狀態(tài)。同一Block或Element可以有多個(gè)Modifier，Modifier不可以單獨(dú)存在。
在命名時(shí)，Block作為起始開(kāi)頭，不同 Block 和 Element 用 _ 兩個(gè)底線區(qū)隔開(kāi)來(lái)，不同的 Modifier 則用 – 區(qū)隔。

進(jìn)階版的OOCSS

BEM就是進(jìn)階版的OOCSS，我們看下圖所示:

場(chǎng)景: 頁(yè)面兩個(gè)tab欄，整體布局相似,只有細(xì)節(jié)部分不同
那么使用BEM寫(xiě)樣式時(shí)，就會(huì)定義一個(gè)塊menu，下面包含元素menu_tab，完成整體布局，細(xì)微部分使用修飾符menu_tab-style1進(jìn)行微調(diào)。代碼如下：

<!-- BEM -->
<p class="menu menu-style1">
  <p class="menu_tab menu_tab-style1"></p>
  <p class="menu_tab menu_tab-style1"></p>
  <p class="menu_tab menu_tab-style1"></p>
  <p class="menu_tab menu_tab-style1"></p>
</p>

<p class="menu">
  <p class="menu_tab menu_tab-style2"></p>
  <p class="menu_tab menu_tab-style2"></p>
  <p class="menu_tab menu_tab-style2"></p>
  <p class="menu_tab menu_tab-style2"></p>
</p>

通過(guò)上面代碼可以看出BEM就是OOCSS。
對(duì)BEM感興趣的話，可以訪問(wèn)BEM的官網(wǎng): https://en.bem.info/methodology/css/
作用:
命名規(guī)范、讓頁(yè)面結(jié)構(gòu)更清晰
另外關(guān)于命名規(guī)范使用的符號(hào)，團(tuán)隊(duì)內(nèi)部是可以討論修改的，不一定非要按照這種符號(hào)，BEM只是提供一個(gè)思想。

設(shè)計(jì)模式:SMACSS

SMACSS is a way to examine your design process and as a way to fit
those rigid frameworks into a flexible thought process.
(SMACSS通過(guò)一個(gè)靈活的思維過(guò)程來(lái)檢查你的設(shè)計(jì)過(guò)程和方式是否符合你的架構(gòu)，更像一種規(guī)范~)

核心思想:分類(lèi)

SMACSS的核心就是分類(lèi)，它主要要求分為五大類(lèi)分別是：Base、Layout、Modules、State、Theme

• Base是對(duì)瀏覽器默認(rèn)樣式的重置，常見(jiàn)的normalize.css就屬于此。這里樣式只會(huì)對(duì)標(biāo)簽元素本身做設(shè)定，不會(huì)出現(xiàn)任何 class 或id，但是可以有屬性選擇器或是偽類(lèi).

• Layout對(duì)頁(yè)面布局的一些功能，屬于較高的一層，它可以作為層級(jí)較低的Module Rules元素的容器。左右分欄、柵格系統(tǒng)等都屬于布局規(guī)范。SMACSS還約定命名使用l-/layout-前綴來(lái)標(biāo)識(shí)布局的class。

• Modules公共復(fù)用的小模塊，模塊是SMACSS最基本的思想，同時(shí)也是大部分CSS理論的基本，將樣式模塊化就能達(dá)到復(fù)用和可維護(hù)的目的，但是SMACSS提出了更具體的模塊化方案。SMACSS中的模塊具有自己的一個(gè)命名，隸屬于模塊下的類(lèi)皆以該模塊為前綴，例如：.menu .menu-title等。

• State對(duì)不同的展示效果，例如顯示、隱藏，與BEM抽取修飾類(lèi)的方式的不同，SMACSS是抽取更高級(jí)別的樣式類(lèi)，得到更強(qiáng)的復(fù)用性，命名全都以is-前綴,如:is-hidden。

• Theme對(duì)不同主題皮膚的維護(hù)，可以修改前面4個(gè)類(lèi)別的樣式，且應(yīng)和前面4個(gè)類(lèi)別分離開(kāi)來(lái)（便于切換，也就是“換膚”）。命名規(guī)范需要添加theme-前綴。

最小適配深度原則

/* depth 1 */
.sidebar ul h4 {}

/* depth 2 */
.sub-title {}

兩段css的區(qū)別在于html和css的耦合度(這一點(diǎn)上和OOCSS的分離容器和內(nèi)容的原則不謀而合)?？梢韵氲?，由于上面的樣式規(guī)則使用了繼承選擇符，因此對(duì)于html的結(jié)構(gòu)實(shí)際是有一定依賴(lài)的。如果html發(fā)生重構(gòu)，就有可能不再具有這些樣式。對(duì)應(yīng)的，下面的樣式規(guī)則只有一個(gè)選擇符，因此不依賴(lài)于特定html結(jié)構(gòu)，只要為元素添加class，就可以獲得對(duì)應(yīng)樣式。
當(dāng)然，繼承選擇符是有用的，它可以減少因相同命名引發(fā)的樣式?jīng)_突（常發(fā)生于多人協(xié)作開(kāi)發(fā)）。但是，我們不應(yīng)過(guò)度使用，在不造成樣式?jīng)_突的允許范圍之內(nèi)，盡可能使用短的、不限定html結(jié)構(gòu)的選擇符。這就是SMACSS的最小化適配深度的意義。

在項(xiàng)目中使用SMACSS時(shí)，每一個(gè)分類(lèi)都是一個(gè)目錄，但是在Vue中，Layout和Modules不需要單獨(dú)維護(hù)目錄，因?yàn)槲覀儗?xiě)的布局組件和模塊組件就相當(dāng)于這兩個(gè)分類(lèi)了。

如果想要對(duì)SMACSS更詳細(xì)的了解可以訪問(wèn):https://smacss-zh.vercel.app/preface.html

設(shè)計(jì)模式:ITCSS

這是由csswizardry提倡的一個(gè) CSS 設(shè)計(jì)方法論，它可以讓CSS更好的管理和維護(hù)。
使用ITCSS主要可以幫助我們以下幾點(diǎn):

• Manages source order.

• Filters explicitness.

• Tames the cascade.

• Sanitises inheritance.
  大概意思就是:

• 管理 CSS 代碼的書(shū)寫(xiě)順序。

• 過(guò)濾器的明確性，是說(shuō)分層來(lái)明確每層 CSS 的作用。

• 控制好 CSS 的權(quán)重

• 安全地使用繼承

核心思想:分層

ITCSS的核心是分層,主要分為七層, 與SMACSS的分類(lèi)相比更加精細(xì)，層
Settings: 項(xiàng)目使用的全局變量
Tools: mixin，function
Generic: 最基本的設(shè)定 normalize.css，reset
Base: type selector
Objects: 不經(jīng)過(guò)裝飾 (Cosmetic-free) 的設(shè)計(jì)模式，相當(dāng)于SMACSS的Layout
Components: UI 組件
Trumps: helper 唯一可以使用 important! 的地方

下面就是ITCSS的架構(gòu)模型:

從這個(gè)模型可以看出來(lái)，越往下就越具體，越局限于使用在某個(gè)具體的東西。另外它的下一層永遠(yuǎn)繼承上一層的所有樣式。
各個(gè)分層例子
Settings
全局變量，比如顏色，字體大小等等

$yellow: #FAAF00;
$yellow-bright: #FAF7F0;

Tools
mixin，function 等等

@mixin sample-mixin () {
  ...
}

到 Tools 為止，不會(huì)生成具體的 css
Generic
reset，normalize 等等

*,
*::before,
*::after {
  box-sizing: border-box;
}

Base
type selector 比如 link, p 等等，只有這一層才使用 type selector

p {
  margin: 0
  line-height: 1.5;
}

Objects
Cosmetic-free，不使用比如 color、border-color、background-color 之類(lèi)的
使用這個(gè) CSS 你在瀏覽器上面只可以看一片空白
主要用來(lái)做畫(huà)面的 layout

.o-container {
  box-sizing: border-box;
  margin: 0 auto;
}

Components
UI 組件
到這個(gè)部分，根據(jù)UI分析具體有哪些組件需要實(shí)現(xiàn)，可以分給多個(gè)人來(lái)同時(shí)實(shí)現(xiàn)

#button組件

.c-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  ...

  &--primary {
    background-color: #ff5959;
    color: #fff;
  }

  &--large {
    font-size: 16px;
    padding: 16px 14px;
    ...
  }
}

HTML 類(lèi)似這樣

<a class="c-btn c-btn--primary" href="#">sample</a>
<a class="c-btn c-btn--primary c-btn--large" href="#">sample</a>

Trumps
放各種 helper
最主要的作用是用在不適合或者不容易放在 Component 的時(shí)候
比如 margin，很可能不應(yīng)該放 Component，這時(shí)候可以用 Trumps 來(lái)微調(diào)
這樣可以防止你的 Component 變得非常大
只有這一層才可以使用! important，以此來(lái)避免多個(gè)! important 的混亂局面

.u-color {
  &--white {
    color: $white !important;
  }
}

.u-hidden {
  display: hidden !important;
 }

在使用時(shí)，每個(gè)分層都維護(hù)為一個(gè)文件夾。在Vue中使用時(shí)，Objects和Components相當(dāng)于我們的組件，不需要單獨(dú)維護(hù)。
另外值得注意的是，無(wú)論是SMACSS的分類(lèi)還是ITCSS的分層，都是一種思想，我們可以根據(jù)實(shí)際項(xiàng)目來(lái)動(dòng)態(tài)的添加或者刪除某一個(gè)分類(lèi)或者分層，不能生搬硬套。

設(shè)計(jì)模式:ACSS

ACSS使用了緊密的類(lèi)名庫(kù)。 這些類(lèi)名通常被縮寫(xiě)，并與它們影響的內(nèi)容分開(kāi)。 在ACSS系統(tǒng)中，我們可以知道類(lèi)名的作用； 但是類(lèi)名稱(chēng)與內(nèi)容類(lèi)型之間沒(méi)有關(guān)系,即每一個(gè)樣式對(duì)應(yīng)一個(gè)類(lèi)，也稱(chēng)原子類(lèi)CSS。

.float-left {
  float: left;
}
.float-right {
  float: right;
}
.z-0 {
  z-index: 0;
}
.z-auto {
  z-index: auto;
}

從上面的代碼中，可以看到ACSS有極強(qiáng)的復(fù)用性,維護(hù)成本低，但是破壞了css命名的語(yǔ)義化。最終很可能代碼會(huì)成為下面這樣。但是存在即合理，ACSS也有其作用，繼續(xù)往下看。

<p class="grid grid-cols-3 gap-2 place-content-center h-48 ...">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
</p>

混合使用CSS設(shè)計(jì)模式(CSS架構(gòu)舉例)

在進(jìn)行一個(gè)項(xiàng)目的設(shè)計(jì)時(shí),我們可以針對(duì)多種CSS設(shè)計(jì)模式進(jìn)行選型，結(jié)合不同設(shè)計(jì)模式的優(yōu)點(diǎn)和缺點(diǎn)，設(shè)計(jì)一個(gè)完整銀杏的CSS架構(gòu)。
舉例子::
假如我們選擇ITCSS、BEM、ACSS進(jìn)行組合，設(shè)計(jì)一個(gè)CSS架構(gòu)。
在我們?cè)O(shè)計(jì)CSS架構(gòu)時(shí),我們首先想到的一定是SMACSS和ITCSS,因?yàn)樗鼈儍蓚€(gè)對(duì)CSS進(jìn)行了分類(lèi)分層的劃分。
SMACSS:
Base
Layout
Tools
Modules
State
Theme
ITCSS:
Setting
Generic
Base
Objects
Components
Trumps

根據(jù)上表我們可以看出ITCSS分層更加精細(xì)，所以我們選擇ITCSS，接著我們繼續(xù)看ITCSS的Objects和Components層，它就相當(dāng)于OOCSS且相當(dāng)于開(kāi)發(fā)Vue組件，所以我們?cè)陂_(kāi)發(fā)組件時(shí)使用選擇OOCSS的進(jìn)階版BEM。我們知道如果一個(gè)項(xiàng)目全部使用ACSS的缺點(diǎn)跟明顯，那么我們選擇ACSS的原因是因?yàn)轫?xiàng)目中可能會(huì)存在向字體大小的這種的樣式,所以我們可以把這一類(lèi)樣式維護(hù)在ACSS目錄中。Generic和Base類(lèi)似所以只保留Base即可，我假設(shè)Trumps用不到,所以也去掉這一層。所以我們的架構(gòu)現(xiàn)在就是下面這樣。
ITCSS+BEM+ACSS
Setting
Tools
Base
Objects
Components
ACSS

目錄結(jié)構(gòu)就是:

-|comments
-|styles
--|acss
--|base
--|settings
--|tools

以上就是“CSS設(shè)計(jì)模式實(shí)例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。