手把手教你CSS架構之SMACSS-css教學-PHP中文網

這篇文章為大家帶來了css架構SMACSS的相關知識，其中會講到什麼是smacss以及該架構分類的相關問題，希望對大家有幫助。

手把手教你CSS架構之SMACSS

因為CSS 只有一個作用域，如果不注意維護CSS 程式碼，則會導致我們寫的程式碼難於閱讀和維護，於是我們借助網頁本身是有層次的，抽像出來了BEM 方法論。

BEM 簡單的三層分法，在處理小中型網站沒有問題，但是去應對複雜網站的樣式可能就比較困難了，我們需要尋求一個更好的辦法。

於是 SMACSS 橫空出世了， SMACSS 和 BEM 的關係有點像是佈局中的 Flex 佈局和 Grid 佈局的關係。

但請注意， SMACSS 和BEM 之前絕不是包含和被包含的問題，就像在應用Flex 佈局和Grid 佈局的時候，鋪網站結構我們會更多傾向Grid，普通簡單的二維版面則會採用Flex，我們會在適當的時機採用適當的方法，SMACSS 和BEM 也差不多，掌握了思想，應用都是小事。

如果你還沒學過 BEM 可以參考下 CSS 架構之 BEM 這篇文章。

什麼是SMACSS

#不難想到，SMACSS 是縮寫，這個縮寫就是網站的開門：Scalable and Modular Architecture for CSS，名字的意思很明確就是要寫模組化、結構化和可擴展的CSS。

手把手教你CSS架構之SMACSS

當你學完 SMACSS，再來理解 Scalable and Modular Architecture for CSS 體會就更深了。

SMACSS 應該怎麼讀，SMACSS 雖然不是一個單詞，但它是有自己的發音的，音同單字 {smacks}。

SMACSS 的分類

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

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

#Base（基礎）
Layout（佈局）
Module（模組）
#State（狀態）
##Theme（主題）

接下來我們具體看看五個部分具體的內容。

Base

基礎（Base）規則裡一般會放置預設樣式。這些預設樣式基本上都是元素選擇器，不過也可以包含屬性選擇器，偽類選擇器，孩子選擇器，兄弟選擇器。本質上來說，一個基礎樣式定義了元素在頁面的任何位置應該是怎麼樣的。

例如：

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

我們先區分下網站什麼部分屬於Layout 什麼部分屬於Module，看看下面這個網站截圖：

手把手教你CSS架構之SMACSS

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

再來一次細緻的劃分，Layout 裡面的元素還可以繼續細分，例如導覽列等，這些都是元件 Module。

Layout 很貼近 HTML 標籤，作為網站的骨架，負責佈局，Module 更負責業務展示和互動的部分。

Layout 與Module 的關係為( > 表示包含)：

Layout > Module

如果網站複雜，其實是可以這樣的：

> Layout > Module > Layout > Module ...

所以，佈局（Layout）規則是將頁面拆分成幾個部分，每個部分都可能有一到多個模組。

一般版面配置類別名稱都是 .l- 開頭。

需要注意，官方講主要的 layout 使用可以使用 ID 選擇器，次要的 layout 採用類別選擇器，對於這個我是絕對不能接受的，我認為應該全用類別。

走個實例：

手把手教你CSS架構之SMACSS

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

登入後複製

注意，其實作在專案開發，Layout 往往直接被當做元件直接使用了，例如、

等組件，然後你可以在他們內部去遵循Module 規則。

Module

看完上一節，Module 就很容易理解了。

模組（Module）是我們的設計當中可重複使用，可重複使用的部分。插圖，側邊欄，產品清單等等都屬於模組。

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

走個實例，一個 POST 元件：

<div class="l-article">
    <article class="post">
        <header class="post-header">
            <h2 class="post-title"></h2>
            <span class="post-author"></span>
        </header>
        <section class="post-body">
            <img  class="post-image" src="..." alt="手把手教你CSS架構之SMACSS" >
            <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，里面不可避免需要动态交互，比如按钮是不是禁用 disable，布局是不是激活 active，tab 组件是不是展开 expand 等，于是我们需要维护 state 来操作动态变化的部分，这就是第四个部分 State。

State 的类名，一般使用 .is- 来开头，例如：

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

登入後複製

Theme

大家多多少少都用过网站的换肤功能，所以 Theme 也算比较常见的了，整个网站上重复的元素，比如颜色、形状、边框、阴影等规则基本都在 Theme 的管辖下，换句话说 Theme 是定义公共类名的地方。

大多数情况下，。我们不想每次创建它们时都重新定义它们。相反，我们想要定义一个唯一的类，我们稍后才将其添加到默认元素中。

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

登入後複製

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

登入後複製

不要将这些 SMACSS 主题规则与基本规则混淆，因为基本规则仅针对默认外观，并且它们往往类似于重置为默认浏览器设置，而主题单元更像是一种样式，它提供最终外观，这种特定的配色方案是独一无二的。

如果站点具有多个样式或多个用于不同状态的主题，主题规则也很有用，因此可以在页面上的某些事件期间轻松更改或交换，例如使用主题切换按钮。至少，它们将所有主题样式保存在一个地方，因此您可以轻松更改它们并保持它们井井有条。

SMACSS 目录

项目中使用了 SMACSS 的命名规范，目的大概就是这样的：

手把手教你CSS架構之SMACSS

总结

因为 CSS 只有一个作用域，会导致代码很混乱，很难阅读，也很难扩展，于是出现了BEM ，但是当项目更加复杂的时候，我们需要一个新的更上一个台阶的样式管理方案，这就是 SMACSS ，不用于 BEM 的分层，它把采用的办法是分类，项目中的样式文件被它分为五类，让我样式管理变得更加的方便了。

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

以上是手把手教你CSS架構之SMACSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！