成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

你的 css 也需要模塊化

Pikachu / 2677人閱讀

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

css “局部”樣式

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

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

// file A
.name {
    color: red
}

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

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

CSS Modules 原理

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

// 原始樣式 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 擴(kuò)展而來。

Block: 對應(yīng)模塊名 [name]

Element: 對應(yīng)節(jié)點(diǎn)名 [local]

Modifier: 對應(yīng)節(jié)點(diǎn)狀態(tài) [hash:base64:5]

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

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

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

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

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

.
├── 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"
}

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

// join-react.jsx


  Hello World



// stringTemp-react.jsx


  Hello World

如果只寫一個(gè) class 就能把樣式定義好，那么最好把所有樣式寫在一個(gè) class 中。
所以，如果我們使用了多個(gè) class 定義樣式，通常會(huì)帶一些一些邏輯判斷。這個(gè)時(shí)候?qū)懫饋砭蜁?huì)麻煩不少。

引入 classnames ，即可以解決給元素寫多個(gè) 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 的樣式模塊，每個(gè) class 每次都要寫 styles.xxx 也是很麻煩，在《深入React技術(shù)?！诽岬搅?react-css-modules 的庫，來減少代碼的書寫，感興趣的同學(xué)可以研究下。

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

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

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

相關(guān)文章

  • CSS 模塊

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

    elarity 評論0 收藏0

  • CSS 模塊

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

    Enlightenment 評論0 收藏0

  • 提升你的CSS姿勢

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

    dingding199389 評論0 收藏0

  • CSS Grid布局：什么是網(wǎng)格布局

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

    xiaoqibTn 評論0 收藏0

  • 13個(gè)幫你提高開發(fā)效率的現(xiàn)代CSS框架

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

    xumenger 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<