你的 css 也需要模塊化

Pikachu 發(fā)布于2019-08-30 13:20 / 2623人閱讀

摘要：局部樣式通過，部分解決的模塊化的問題。全局樣式的特點，導致難以維護，所以需要一種局部樣式的解決方案。也就是徹底的模塊化，進來的模塊，需要隱藏自己的內(nèi)部作用域。

css “局部”樣式

sass、less 通過 @import ，部分解決的 css 模塊化的問題。

由于 css 是全局的，在被引入的文件和當前文件出現(xiàn)重名的情況下，前者樣式就會被后者覆蓋。
在引入一些公用組件，或者多人協(xié)作開發(fā)同一頁面的時候，就需要考慮樣式會不會被覆蓋，這很麻煩。

// file A
.name {
    color: red
}

// file B
@import "A.scss";
.name {
    color: green
}

css 全局樣式的特點，導致 css 難以維護，所以需要一種 css “局部”樣式的解決方案。
也就是徹底的 css 模塊化，@import 進來的 css 模塊，需要隱藏自己的內(nèi)部作用域。

CSS Modules 原理

通過在每個 class 名后帶一個獨一無二 hash 值，這樣就不有存在全局命名沖突的問題了。這樣就相當于偽造了“局部”樣式。

// 原始樣式 styles.css
.title {
  color: red;
}

// 原始模板 demo.html
import styles from "styles.css";


  Hello World



// 編譯后的 styles.css
.title_3zyde {
  color: red;
}

// 編譯后的 demo.html

  Hello World

webpack 與 CSS Modules

webpack 自帶的 css-loader 組件，自帶了 CSS Modules，通過簡單的配置即可使用。

{
    test: /.css$/,
    loader: "css?modules&localIdentName=[name]__[local]--[hash:base64:5]"
}

命名規(guī)范是從 BEM 擴展而來。

Block: 對應模塊名 [name]

Element: 對應節(jié)點名 [local]

Modifier: 對應節(jié)點狀態(tài) [hash:base64:5]

使用 __ 和 -- 是為了區(qū)塊內(nèi)單詞的分割節(jié)點區(qū)分開來。
最終 class 名為 styles__title--3zyde。

在生產(chǎn)環(huán)境中使用

在實際生產(chǎn)中，結(jié)合 sass 使用會更加便利。以下是結(jié)合 sass 使用的 webpack 的配置文件。

{
    test: /.scss$/,
    loader: "style!css?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!sass?sourceMap=true&sourceMapContents=true"
}

通常除了局部樣式，還需要全局樣式，比如 base.css 等基礎文件。
將公用樣式文件和組件樣式文件分別放入到兩個不同的目標下。如下。

.
├── app                      
│   ├── styles               # 公用樣式
│   │     ├── app.scss       
│   │     └── base.scss      
│   │
│   └── components           # 組件
          ├── Component.jsx  # 組件模板
          └── Component.scss # 組件樣式

然后通過 webpack 配置，將在 app/styles 文件夾的外的(exclude) scss 文件"局部"化。

{
    test: /.scss$/,
    exclude: path.resolve(__dirname, "app/styles"),
    loader: "style!css?modules&importLoaders=1&localIdentName=[name]__[local]--[hash:base64:5]!sass?sourceMap=true&sourceMapContents=true"
},
{
    test: /.scss$/,
    include: path.resolve(__dirname, "app/styles"),
    loader: "style!css?sass?sourceMap=true&sourceMapContents=true"
}

有時候，一個元素有多個 class 名，可以通過 join(" ") 或字符串模版的方式來給元素添加多個 class 名。

// join-react.jsx

  Hello World


// stringTemp-react.jsx

  Hello World

如果只寫一個 class 就能把樣式定義好，那么最好把所有樣式寫在一個 class 中。
所以，如果我們使用了多個 class 定義樣式，通常會帶一些一些邏輯判斷。這個時候?qū)懫饋砭蜁闊┎簧佟?/p>

引入 classnames ，即可以解決給元素寫多個 class 名的問題，也可以解決寫邏輯判斷的麻煩問題。

classNames("foo", "bar"); // => "foo bar"
classNames("foo", { bar: true }); // => "foo bar"
classNames({ "foo-bar": true }); // => "foo-bar"
classNames({ "foo-bar": false }); // => ""
classNames({ foo: true }, { bar: true }); // => "foo bar"
classNames({ foo: true, bar: true }); // => "foo bar"

// lots of arguments of various types
classNames("foo", { bar: true, duck: false }, "baz", { quux: true }); // => "foo bar baz quux"

// other falsy values are just ignored
classNames(null, false, "bar", undefined, 0, 1, { baz: null }, ""); // => "bar 1"

引入 CSS Modules 的樣式模塊，每個 class 每次都要寫 styles.xxx 也是很麻煩，在《深入React技術棧》提到了 react-css-modules 的庫，來減少代碼的書寫，感興趣的同學可以研究下。

參考資料：
《深入React技術棧》
css-modules
CSS Modules 用法教程

云服務器 GPU云服務器服務器也需要備案云計算也需要服務器個人網(wǎng)站也需要備案嗎阿里云服務器也需要鏡像加速嗎

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115484.html

CSS 模塊

摘要：通過使用或者從中導入文件使得模塊被編譯成為可能。模塊一次只運行一個文件，這樣可以避免全局上下文的污染。下面讓我們用重構這些這些代碼這是一個進化版，但是我們僅僅只達到了一部分目標。原文：http://glenmaddern.com/articl...譯者：@公子如果你想知道 CSS 最近發(fā)展的轉(zhuǎn)折點，你應該選擇去觀看 Christopher Chedeau 在2014年11月的 N...

elarity 2019-08-28 18:14 評論0 收藏0
CSS 模塊

摘要：通過使用或者從中導入文件使得模塊被編譯成為可能。模塊一次只運行一個文件，這樣可以避免全局上下文的污染。下面讓我們用重構這些這些代碼這是一個進化版，但是我們僅僅只達到了一部分目標。原文：http://glenmaddern.com/articl...譯者：@公子如果你想知道 CSS 最近發(fā)展的轉(zhuǎn)折點，你應該選擇去觀看 Christopher Chedeau 在2014年11月的 N...

Enlightenment 2019-08-21 10:38 評論0 收藏0
提升你的CSS姿勢

摘要：父類為，代表著一系列文章的列表。對于可讀性較好地與代碼，不應該像一本書，而應該像一個故事，一個故事中會存在角色和角色之間的關系，而這種更多的語義化地可以較好地提示你整個代碼的可維護性。無論哪種文件組織方式比較順眼，你都應該遵循統(tǒng)一的原則。原文地址。本文從屬于Web 前端入門與最佳實踐。 CSS的學習是一個典型的低門檻，高瓶頸的過程，第一次接觸CSS的時候覺得一切是如此簡單，直到后面越...

dingding199389 2019-08-30 13:07 評論0 收藏0
CSS Grid布局：什么是網(wǎng)格布局

摘要：網(wǎng)格單元格網(wǎng)格單元格是指四條網(wǎng)格線之間的空間。所以它是最小的單位，就像表格中的單元格。圖中突出顯示的網(wǎng)格區(qū)域是行線和列線之間的區(qū)域，其主要包括了四個網(wǎng)格單元格。 CSS Grid現(xiàn)在已經(jīng)被W3C納入到CSS3的一個布局模塊當中，被稱為CSS Grid Layout Module。而我們較為熟悉的還是將其想像成網(wǎng)格或者柵格，也就是早期的960gs。不管是網(wǎng)格還是柵格或者現(xiàn)在的CSS Gr...

xiaoqibTn 2019-08-28 18:03 評論0 收藏0
13個幫你提高開發(fā)效率的現(xiàn)代CSS框架

摘要：官網(wǎng)是圍繞構建的，是一個免費的開源框架。官網(wǎng)在壓縮后僅為，以移動優(yōu)先的理念為中心。官網(wǎng)被稱為輕量級響應式現(xiàn)代化，是一個基于的框架。通過添加主題或自定義組件能夠幫你進一步開發(fā)個性化的。官網(wǎng)有時框架可以包含僅對其原始開發(fā)人員有意義的類名。翻譯：瘋狂的技術宅原文：https://1stwebdesigner.com/mo... 本文首發(fā)微信公眾號：前端先鋒歡迎關注，每天都給你推送新鮮的...

xumenger 2019-08-30 10:52 評論0 收藏0