運用 CSS in JS 實現模組化

2022-07-08 03:00:14 字數 1076 閱讀 9192

css in js 是2023年推出的一種設計模式,它的核心思想是把 css 直接寫到各自元件中,而不是單獨的樣式檔案裡。

css in js 的發展:

css in js 一次又一次的違背了 css 與 js 分離的原則。

css modules 能最大化地結合現有 css 生態和 js 模組化能力,api 簡潔到幾乎零學習成本。

(1)安裝

css modules 提供各種外掛程式,支援不同的構建工具。本文使用的是 webpack 的css-loader外掛程式。

css modules不侷限於你使用哪個前端庫,無論是 react、vue 還是 angular,只要你能使用構建工具進行編譯打包就可以使用。

本文以 react 為例。下同。

(2)全域性/區域性作用域

css 是全域性的,沒有區域性作用域的功能。

但 css modules 預設有區域性作用域的概念,實現的方法為:使用獨一無二的 class 名

這個獨一無二的 class 名,是乙個 hash 值,css-loader預設的生成演算法是[hash:base64],但 webpack 配置裡面可以自定義格式。

css modules 只會對classname以及id進行轉換,其他的比如屬性選擇器,標籤選擇器都不進行處理,推薦盡量使用 classname。

寫法 - js:

共同點:css 預處理器 和 css 後處理器 都屬於 css 處理器。

不同點:css 預處理器使用特殊的語法來標記需要轉換的地方,而 css 後處理器可以解析轉換標準的 css,並不需要任何特殊的語法。

css 後處理器的代表就是 postcss ,postcss 是乙個平台,其中最常用到的外掛程式就是 autoprefixer。

什麼是模組化?模組化怎麼實現?

前言 增加印象,留下腳印 忘記還可以翻一翻 奧利給。1,什麼是模組化 公司裡乙個專案是有很多程式設計師一起開發的,例如 多人運動 這個專案 有程式設計師a 程式設計師b 程式設計師c 程式設計師a 寫了 aaa.js 裡面有幾千行 幾萬行 程式設計師b 寫了 bbb.js 裡面有幾千行 幾萬行 程式...

什麼是模組化?模組化的好處

1.高內聚低耦合,有利於團隊作戰,當專案很複雜的時候,將專案劃分為子模組分給不同的人開發,最後再組合在一起,這樣可以降低模組與模組之間的依賴關係體現低耦合,模組又有特定功能體現高內聚。2.可重用,方便維護,模組的特點就是有特定功能,當兩個專案都需要某種功能的時候,我們定義乙個特定的模組來實現該功能,...

什麼是模組化?模組化的好處

什麼是模組化?j a 應用架構設計 模組化模式與 osgi 一書中對它的定義是 模組化是一種處理複雜系統分解為更好的可管理模組的方式。所謂的模組化開發就是封裝細節,提供使用介面,彼此之間互不影響,每個模組都是實現某一特定的功能。模組化開發的基礎就是函式。模組化開發使 耦合度降低,模組化的意義在於最大...