今天小編給大家分享一下CSS設(shè)計模式實例分析的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
創(chuàng)新互聯(lián)是一家從事企業(yè)網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、網(wǎng)站制作、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計制作的專業(yè)網(wǎng)站設(shè)計公司，擁有經(jīng)驗豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁設(shè)計人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實力，在網(wǎng)站建設(shè)領(lǐng)域樹立了自己獨特的設(shè)計風(fēng)格。自公司成立以來曾獨立設(shè)計制作的站點近1000家。
設(shè)計模式:OOCSS
OOCSS是比較基礎(chǔ)的設(shè)計模式，其他設(shè)計模式或多或少都有OOCSS的影子。那么什么是OOCSS呢?估計大家看到OO的時候就已經(jīng)知道了，沒錯，就是是面向?qū)ο?，那么面向?qū)ο蠛臀覀儗慍SS有半毛錢關(guān)系嗎？當(dāng)然有。
OO:面向?qū)ο?/h4>
大家都很熟悉面向?qū)ο?，我們簡單看下下面這一段代碼：
class Person {
void study () {}
}
class Teacher extends Person {
void study () {}
void teach () {}
}
class Student extends Person {
void study () {}
}有一個Person類，它有一些方法，Teacher和Student都繼承Person，并且進(jìn)行了一些修訂和擴(kuò)展。那么我們可以把Person類看成是別人寫代碼，在不改變別人源碼的情況下,新增Teacher和Student對源碼進(jìn)行修訂和擴(kuò)展。這種寫法是完全可以應(yīng)用到CSS上面的。我們看下面一段代碼場景:
.menu {
color: green;
font-size: 14px;
}
.fix {
color: red;
}
場景:設(shè)計師只想讓我們改變其中一個盒子的樣式，其他的不變。
這時不能輕易改變menu，因為一旦改變就會影響不需要改變的地方。那么我們可以直接利用面向?qū)ο蟮乃枷?，在后面單獨添加一個類進(jìn)行修訂和擴(kuò)展。這樣一看我們平時在寫的CSS，不就是面向?qū)ο髥幔?br/>當(dāng)然，OOCSS是有具體的原則的。那么它有哪些原則且個原則的具體是什么呢？我們來看一下：
原則一:容器與內(nèi)容分離
容器與內(nèi)容分離顧名思義，直接看一個代碼案例：
Hello
Hello
// ---------code 1-----------
.post .metadata {
// css code
}
// ---------code 2-----------
.post {}
.metadata {
// css code
}
場景:兩個不同容器中的內(nèi)容相同
先看樣式的code 1，這樣顯然不好，容器和內(nèi)容是嵌套依賴關(guān)系，并沒有做到容器與內(nèi)容分離。內(nèi)容的樣式無法復(fù)用。樣式的code 2做到了容器與內(nèi)容分離，內(nèi)容在不同的容器中可以復(fù)用。
原則二:結(jié)構(gòu)與皮膚分離
結(jié)構(gòu)可以看做是一個基礎(chǔ)對象,而皮膚可以看做是另外一個對象,也就是對象與對象要分離。基礎(chǔ)對象不能改,不斷的分離出皮膚對象達(dá)到對基礎(chǔ)對象的修正和擴(kuò)展。
// 基礎(chǔ)對象
.menu {
color: green;
font-size: 14px;
}
// 皮膚
.fix {
color: red;
}
OOCSS與Vue的關(guān)系
我們每天都在寫OOCSS，Vue的組件就是OOCSS。我們下面一段代碼：
// -------------定義組件-----------------
// -----------使用組件-------------------
OOCSS的應(yīng)用
Grid柵格系統(tǒng)、布局組件等
設(shè)計模式:BEM
什么是BEM
BEM即塊(Block)、元素(Element)、修飾符(Modifier) 是由Yandex（俄羅斯最著名的互聯(lián)網(wǎng)企業(yè)）的開發(fā)團(tuán)隊提出的前端開發(fā)理論。BEM通過Block、Element、Modifier來描述頁面(關(guān)鍵就是為了解決多人協(xié)作的命名問題)。
Block是頁面中獨立存在的區(qū)塊，可以在不同場合下使用。每個頁面都可以看做是多個Block組成。
Element是構(gòu)成Block的元素，只有在對應(yīng)Block內(nèi)部才具有意義，是依賴于Block的存在。
Modifier是描述Block或Element的屬性或狀態(tài)。同一Block或Element可以有多個Modifier，Modifier不可以單獨存在。
在命名時，Block作為起始開頭，不同 Block 和 Element 用 _ 兩個底線區(qū)隔開來，不同的 Modifier 則用 – 區(qū)隔。
進(jìn)階版的OOCSS
BEM就是進(jìn)階版的OOCSS，我們看下圖所示:
場景: 頁面兩個tab欄，整體布局相似,只有細(xì)節(jié)部分不同
那么使用BEM寫樣式時，就會定義一個塊menu，下面包含元素menu_tab，完成整體布局，細(xì)微部分使用修飾符menu_tab-style1進(jìn)行微調(diào)。代碼如下：
通過上面代碼可以看出BEM就是OOCSS。
對BEM感興趣的話，可以訪問BEM的官網(wǎng): https://en.bem.info/methodology/css/
作用:
命名規(guī)范、讓頁面結(jié)構(gòu)更清晰
另外關(guān)于命名規(guī)范使用的符號，團(tuán)隊內(nèi)部是可以討論修改的，不一定非要按照這種符號，BEM只是提供一個思想。
設(shè)計模式: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通過一個靈活的思維過程來檢查你的設(shè)計過程和方式是否符合你的架構(gòu)，更像一種規(guī)范~)
核心思想:分類
SMACSS的核心就是分類，它主要要求分為五大類分別是：Base、Layout、Modules、State、Theme
Base是對瀏覽器默認(rèn)樣式的重置，常見的normalize.css就屬于此。這里樣式只會對標(biāo)簽元素本身做設(shè)定，不會出現(xiàn)任何 class 或id，但是可以有屬性選擇器或是偽類.
Layout對頁面布局的一些功能，屬于較高的一層，它可以作為層級較低的Module Rules元素的容器。左右分欄、柵格系統(tǒng)等都屬于布局規(guī)范。SMACSS還約定命名使用l-/layout-前綴來標(biāo)識布局的class。
Modules公共復(fù)用的小模塊，模塊是SMACSS最基本的思想，同時也是大部分CSS理論的基本，將樣式模塊化就能達(dá)到復(fù)用和可維護(hù)的目的，但是SMACSS提出了更具體的模塊化方案。SMACSS中的模塊具有自己的一個命名，隸屬于模塊下的類皆以該模塊為前綴，例如：.menu .menu-title等。
State對不同的展示效果，例如顯示、隱藏，與BEM抽取修飾類的方式的不同，SMACSS是抽取更高級別的樣式類，得到更強(qiáng)的復(fù)用性，命名全都以is-前綴,如:is-hidden。
Theme對不同主題皮膚的維護(hù)，可以修改前面4個類別的樣式，且應(yīng)和前面4個類別分離開來（便于切換，也就是“換膚”）。命名規(guī)范需要添加theme-前綴。
最小適配深度原則
/* depth 1 */
.sidebar ul h4 {}
/* depth 2 */
.sub-title {}兩段css的區(qū)別在于html和css的耦合度(這一點上和OOCSS的分離容器和內(nèi)容的原則不謀而合)。可以想到，由于上面的樣式規(guī)則使用了繼承選擇符，因此對于html的結(jié)構(gòu)實際是有一定依賴的。如果html發(fā)生重構(gòu)，就有可能不再具有這些樣式。對應(yīng)的，下面的樣式規(guī)則只有一個選擇符，因此不依賴于特定html結(jié)構(gòu)，只要為元素添加class，就可以獲得對應(yīng)樣式。
當(dāng)然，繼承選擇符是有用的，它可以減少因相同命名引發(fā)的樣式?jīng)_突（常發(fā)生于多人協(xié)作開發(fā)）。但是，我們不應(yīng)過度使用，在不造成樣式?jīng)_突的允許范圍之內(nèi)，盡可能使用短的、不限定html結(jié)構(gòu)的選擇符。這就是SMACSS的最小化適配深度的意義。
在項目中使用SMACSS時，每一個分類都是一個目錄，但是在Vue中，Layout和Modules不需要單獨維護(hù)目錄，因為我們寫的布局組件和模塊組件就相當(dāng)于這兩個分類了。
如果想要對SMACSS更詳細(xì)的了解可以訪問:https://smacss-zh.vercel.app/preface.html
設(shè)計模式:ITCSS
這是由csswizardry提倡的一個 CSS 設(shè)計方法論，它可以讓CSS更好的管理和維護(hù)。
使用ITCSS主要可以幫助我們以下幾點:
核心思想:分層
ITCSS的核心是分層,主要分為七層, 與SMACSS的分類相比更加精細(xì)，層
Settings: 項目使用的全局變量
Tools: mixin，function
Generic: 最基本的設(shè)定 normalize.css，reset
Base: type selector
Objects: 不經(jīng)過裝飾 (Cosmetic-free) 的設(shè)計模式，相當(dāng)于SMACSS的Layout
Components: UI 組件
Trumps: helper 唯一可以使用 important! 的地方
下面就是ITCSS的架構(gòu)模型:
從這個模型可以看出來，越往下就越具體，越局限于使用在某個具體的東西。另外它的下一層永遠(yuǎn)繼承上一層的所有樣式。
各個分層例子
Settings
全局變量，比如顏色，字體大小等等
$yellow: #FAAF00;
$yellow-bright: #FAF7F0;
Tools
mixin，function 等等
@mixin sample-mixin () {
...
}到 Tools 為止，不會生成具體的 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 之類的
使用這個 CSS 你在瀏覽器上面只可以看一片空白
主要用來做畫面的 layout
.o-container {
box-sizing: border-box;
margin: 0 auto;
}Components
UI 組件
到這個部分，根據(jù)UI分析具體有哪些組件需要實現(xiàn)，可以分給多個人來同時實現(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 類似這樣
sample
sample
Trumps
放各種 helper
最主要的作用是用在不適合或者不容易放在 Component 的時候
比如 margin，很可能不應(yīng)該放 Component，這時候可以用 Trumps 來微調(diào)
這樣可以防止你的 Component 變得非常大
只有這一層才可以使用! important，以此來避免多個! important 的混亂局面
.u-color {
&--white {
color: $white !important;
}
}
.u-hidden {
display: hidden !important;
}在使用時，每個分層都維護(hù)為一個文件夾。在Vue中使用時，Objects和Components相當(dāng)于我們的組件，不需要單獨維護(hù)。
另外值得注意的是，無論是SMACSS的分類還是ITCSS的分層，都是一種思想，我們可以根據(jù)實際項目來動態(tài)的添加或者刪除某一個分類或者分層，不能生搬硬套。
設(shè)計模式:ACSS
ACSS使用了緊密的類名庫。 這些類名通常被縮寫，并與它們影響的內(nèi)容分開。 在ACSS系統(tǒng)中，我們可以知道類名的作用； 但是類名稱與內(nèi)容類型之間沒有關(guān)系,即每一個樣式對應(yīng)一個類，也稱原子類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命名的語義化。最終很可能代碼會成為下面這樣。但是存在即合理，ACSS也有其作用，繼續(xù)往下看。
1
2
3
4
5
6
混合使用CSS設(shè)計模式(CSS架構(gòu)舉例)
在進(jìn)行一個項目的設(shè)計時,我們可以針對多種CSS設(shè)計模式進(jìn)行選型，結(jié)合不同設(shè)計模式的優(yōu)點和缺點，設(shè)計一個完整銀杏的CSS架構(gòu)。
舉例子::
假如我們選擇ITCSS、BEM、ACSS進(jìn)行組合，設(shè)計一個CSS架構(gòu)。
在我們設(shè)計CSS架構(gòu)時,我們首先想到的一定是SMACSS和ITCSS,因為它們兩個對CSS進(jìn)行了分類分層的劃分。
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)于開發(fā)Vue組件，所以我們在開發(fā)組件時使用選擇OOCSS的進(jìn)階版BEM。我們知道如果一個項目全部使用ACSS的缺點跟明顯，那么我們選擇ACSS的原因是因為項目中可能會存在向字體大小的這種的樣式,所以我們可以把這一類樣式維護(hù)在ACSS目錄中。Generic和Base類似所以只保留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è)計模式實例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章題目：CSS設(shè)計模式實例分析
標(biāo)題網(wǎng)址：
http://weahome.cn/article/jpgjod.html
重慶分公司
重慶分公司
