CSS架構(gòu)中的SMACSS該如何理解

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)CSS架構(gòu)中的SMACSS該如何理解，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

因為 CSS 只有一個作用域，如果不注意維護 CSS 代碼，則會導(dǎo)致我們寫的代碼難于閱讀和維護，于是我們借助網(wǎng)頁本身是有層次的，抽象出來了BEM 方法論。

BEM 簡單的三層分法，在應(yīng)對小中型網(wǎng)站沒有問題，但是去應(yīng)對復(fù)雜網(wǎng)站的樣式可能就比較困難了，我們需要尋求一個更好的辦法。

于是 SMACSS 橫空出世了， SMACSS 和 BEM 的關(guān)系有點像布局中的 Flex 布局和 Grid 布局的關(guān)系。

但是請注意， SMACSS 和 BEM 之前絕不是包含和被包含的問題，就像在應(yīng)用 Flex 布局和 Grid 布局的時候，鋪網(wǎng)站結(jié)構(gòu)我們會更多傾向 Grid，普通簡單的二維布局則會采用 Flex，我們會在合適的時機采用合適的方法，SMACSS 和 BEM 也差不多，掌握了思想，應(yīng)用都是小事。

什么是 SMACSS

不難想到，SMACSS 是縮寫，這個縮寫就是網(wǎng)站的開門注 ：Scalable and Modular Architecture for CSS，名字的意思很明確就是要編寫模塊化、結(jié)構(gòu)化和可擴展的 CSS。

當(dāng)你學(xué)完 SMACSS，再來理解 Scalable and Modular Architecture for CSS 體會就更深了。

SMACSS 應(yīng)該怎么讀，SMACSS 雖然不是一個單詞，但是它是有自己的發(fā)音的，音同單詞 {smacks}。

SMACSS 的分類

如果給 BEM 找個核心詞，那就是分層，如果給 SMACSS 也找個核心詞，那肯定就是分類，一字之差，我們來看看 SMACSS 如何進行分類的。

SMACSS 的核心是分類，具體把項目的樣式分為了五類：

• Base（基礎(chǔ)）

• Layout（布局）

• Module（模塊）

• State（狀態(tài)）

• Theme（主題）

接下來我們具體看看五個部分具體的內(nèi)容。

Base

基礎(chǔ)（Base）規(guī)則里一般放置默認(rèn)樣式。這些默認(rèn)樣式基本上都是元素選擇器，不過也可以包含屬性選擇器，偽類選擇器，孩子選擇器，兄弟選擇器。本質(zhì)上來說，一個基礎(chǔ)樣式定義了元素在頁面的任何位置應(yīng)該是怎么樣的。

例如：

html {
    margin: 0;
    font-family: sans-serif;
}
a {
    color: #000;
}
button {
    color: #ababab;
    border: 1px solid #f2f2f2;
}

我們看到 Base 的代碼和 CSS resets 非常的相似。

這部分的代碼一般我們都是尋求 Normalize.css 或 sanitize.css 的幫助，而不需要自己完成。

Layout

我們先來區(qū)分下網(wǎng)站什么部分屬于 Layout 什么部分屬于 Module，看看下面這個網(wǎng)站截圖：

先來一次大致的劃分，主要包括頭部、體部、尾部等，這些就是屬于 Layout 的。

再來一次細(xì)致的劃分，Layout 里面的元素還可以繼續(xù)細(xì)分，例如導(dǎo)航欄等，這些都是組件 Module。

Layout 很貼近 HTML 標(biāo)簽，作為網(wǎng)站的骨架，負(fù)責(zé)布局，Module 更多負(fù)責(zé)業(yè)務(wù)展示和交互的部分。

Layout 與 Module 的關(guān)系為( > 表示包含)：

Layout > Module

如果網(wǎng)站復(fù)雜，其實是可以這樣的：

> Layout > Module > Layout > Module ...

所以，布局（Layout）規(guī)則就是將頁面拆分成幾個部分，每個部分都可能有一到多個模塊。

一般布局類名都是 .l- 開頭。

需要注意，官方講主要的 layout 使用可以使用 ID 選擇器，次要的 layout 采用類選擇器，對于這個我是絕對不能接受的，我認(rèn)為應(yīng)該全用類。

走個實例：

.l-header {}
.l-primarynav {}
.l-main-content {}

注意，其實現(xiàn)在項目開發(fā)，Layout 往往直接被當(dāng)做組件直接使用了，例如 <Content />、<Header /> 等組件，然后你可以在他們內(nèi)部去遵循 Module 規(guī)則。

Module

看完上一節(jié)，Module 就很容易理解了。

模塊（Module）  是我們的設(shè)計當(dāng)中可重用，可模塊化的部分。插圖，側(cè)邊欄，產(chǎn)品列表等等都屬于模塊。

Module 從工程化的角度，你叫它 component 也沒多大問題。

走個實例，一個 POST 組件：

<div class="l-article">
    <article class="post">
        <header class="post-header">
            <h3 class="post-title"></h3>
            <span class="post-author"></span>
        </header>
        <section class="post-body">
            <img class="post-image" src="...">
            <div class="post-content">
                <p class="post-paragraph"></p>
                <p class="post-paragraph"></p>
            </div>
        </section>
        <footer class="post-footer"></footer>
    </article>
</div>

類名很簡單，以 moudle-name 或 component—name 作為前綴就行了。

State

對于 Module 甚至是 Layout，里面不可避免需要動態(tài)交互，比如按鈕是不是禁用 disable，布局是不是激活 active，tab 組件是不是展開 expand 等，于是我們需要維護 state 來操作動態(tài)變化的部分，這就是第四個部分 State。

State 的類名，一般使用 .is- 來開頭，例如：

.is-collapsed {}
.is-expanded {}
.is-active {}
.is-highlighted {}
.is-hidden {}
.is-shown {}
.is-successful {}

Theme

大家多多少少都用過網(wǎng)站的換膚功能，所以 Theme 也算比較常見的了，整個網(wǎng)站上重復(fù)的元素，比如顏色、形狀、邊框、陰影等規(guī)則基本都在 Theme 的管轄下，換句話說 Theme 是定義公共類名的地方。

大多數(shù)情況下，。我們不想每次創(chuàng)建它們時都重新定義它們。相反，我們想要定義一個唯一的類，我們稍后才將其添加到默認(rèn)元素中。

.button-large {
    width: 60px;
    height: 60px;
}

<button class="button-large">Like</button>

不要將這些 SMACSS 主題規(guī)則與基本規(guī)則混淆，因為基本規(guī)則僅針對默認(rèn)外觀，并且它們往往類似于重置為默認(rèn)瀏覽器設(shè)置，而主題單元更像是一種樣式，它提供最終外觀，這種特定的配色方案是獨一無二的。

如果站點具有多個樣式或多個用于不同狀態(tài)的主題，主題規(guī)則也很有用，因此可以在頁面上的某些事件期間輕松更改或交換，例如使用主題切換按鈕。至少，它們將所有主題樣式保存在一個地方，因此您可以輕松更改它們并保持它們井井有條。

SMACSS 目錄

項目中使用了 SMACSS 的命名規(guī)范，目的大概就是這樣的：

因為 CSS 只有一個作用域，會導(dǎo)致代碼很混亂，很難閱讀，也很難擴展，于是出現(xiàn)了BEM ，但是當(dāng)項目更加復(fù)雜的時候，我們需要一個新的更上一個臺階的樣式管理方案，這就是 SMACSS ，不用于 BEM 的分層，它把采用的辦法是分類，項目中的樣式文件被它分為五類，讓我樣式管理變得更加的方便了。

css的基本語法是什么

css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。

上述就是小編為大家分享的CSS架構(gòu)中的SMACSS該如何理解了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。