該系列已更新文章: 分享一個實用的 vite + vue3 組件庫腳手架工具,提升開發效率 開箱即用 yyg-cli 腳手架:快速創建 vue3 組件庫和vue3 全家桶項目 Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo Vue3 企業級優雅實戰 - 組件庫框架 ...
該系列已更新文章:
分享一個實用的 vite + vue3 組件庫腳手架工具,提升開發效率
開箱即用 yyg-cli 腳手架:快速創建 vue3 組件庫和vue3 全家桶項目
Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo
Vue3 企業級優雅實戰 - 組件庫框架 - 2 初始化 workspace-root
Vue3 企業級優雅實戰 - 組件庫框架 - 3 搭建組件庫開發環境
在前一篇文章中分享了搭建組件庫的基本開發環境、創建了 foo 組件模塊和組件庫入口模塊,本文分享組件庫的樣式架構設計。
1 常見的 CSS 架構模式
常見的 CSS 架構模式有很多:OOCSS、ACSS、BEM、SMACSS、ITCSS 等,其中 SMACSS 和 ITCSS 很相似。我在企業級項目中最常使用的是簡化版的 ITCSS + BEM + ACSS,所以本文首先介紹這三種模式,其他模式大家自己上網查看。
1.1 ACSS
ACSS 模式幾乎是一個樣式屬性就對應了一個樣式類。這種方式非常靈活,復用性很強、維護成本低,但破壞了 CSS 命名語義化。常見的名稱如:d-flex、m-10、w-20 等。
1.2 BEM
BEM 模式是一種命名方法論,其命名層級為:塊 Block、元素 Element、修飾符 Modifier,這也是 “BEM” 這個名字的由來。元素 Element 使用兩個短下劃線(__),修飾符 Modifier 使用兩個短中劃線(--),如下麵的 HTML 片段和對應的類名:
<div class="demo-block">
<a class="demo-block__element1">Link</a>
<a class="demo-block__element1 demo-block__element1--modifier">Link</a>
</div>
<style>
.demo-block {} // 塊
.demo-block__element1 {} // 元素
.demo-block__element1--modifier1 {} // 修飾符
</style>
使用 BEM 可以規範命令,頁面結構也比較清晰。
1.3 ITCSS
ITCSS 是一種樣式的分層結構,一共有七層,七個層次從上到下依次為:
- Settings 層:通常是一些樣式變數,如定義通用的顏色值、字體大小的數值等;
- Tools 層:通用工具函數,包括 mixins、function 等;
- Generic 層:通用基礎樣式,一般是對瀏覽器預設樣式進行重置,如 normalize.css、resets 等庫;
- Base 層:對某些全局使用的元素進行通用的定製化樣式,如頁面的設置、ul 標簽的設置等;
- Objects 層:所有使用 OOCSS 的地方,即某些結構和樣式相分離的專用類;
- Components 層:具體的組件,其實可以對應到組件庫中的每個組件;
- Trumps 層:重寫某些樣式,如 width 重新設置為 100px,只會影響某一小塊的 DOM 元素,權重最高,類似 ACSS,但通常會加上 !important。
2 組件庫的 CSS 架構
ITCSS 分層非常細緻,咱們組件庫的樣式在其基礎上進行了簡化,省略了 Base 層 或 Objects 層。而對於 Trumps 層,咱使用 ACSS 來替代,對於 Components 層,裡面的每個組件內部又使用 BEM。所以咱們組件庫的樣式架構為:簡化版的 ITCSS + BEM + ACSS。
2.1 CSS 結構概覽
組件庫的樣式使用預處理器 SCSS,從結構整體來看,分為如下層級:
- base 層:整個 CSS 結構的最基礎的層級,對應了 ITCSS 的 Settings、Generic 和 Base。即包括變數定義、通用基礎樣式和定製基礎樣式。
- tools 層:與 ITCSS 的 Tools 一樣,提供通用工具函數。
- acss 層:類似 ITCSS 的 Trumps,定義一些原子樣式類,如 flex、margin、padding 相關的樣式基礎類。
- components 層:與 ITCSS 的 Components 一樣,實現各個組件的樣式,其中每個組件的樣式又使用 BEM 方式來組織命名。
2.2 base 層的實現
前面說過,base 層包括樣式變數定義、通用基礎樣式、定製基礎樣式。
首先在 packages/scss 目錄下創建 base 目錄,存放 base 層的 scss 文件。
- settings
settings 是一些變數的定義,在 packages/scss/base/ 目錄中創建 _var.module.scss 文件,該文件定義樣式變數。
$primary-color: #488019;
$common-padding: 20px;
:export {
primaryColor: $primary-color;
}
- Generic
Generic 通常是對瀏覽器樣式的重置,統一 HTML 標簽在不同瀏覽器中的展示,屏蔽瀏覽器間的差異。在這個部分可以使用開源庫normalize.css、reset.css 等。這一層可以在組件庫中省略,在各個具體的應用中引入對應css。不過程式員優雅哥還是將瀏覽器樣式重置引入到組件庫中,這樣應用開發過程中省點事。咱使用開源的 normalize.css 作為 Generic。normalize.css 的代碼可以在 GitHub 上搜索獲取。
繼續在 packages/scss/base/ 目錄中創建 _normalize.scss 文件,將 normalize.css 的內容直接複製進去就可以了。
- Base
Base 主要是存放部分重置樣式的自定義,如 html、body、section 等,這部分咱們暫時沒有自定義的內容,就無需編寫了。
- 入口文件
最後需要將 base 層所有 scss 以統一的入口引入。在 packages/scss/base/ 目錄下創建 index.scss,該文件導入上面創建的兩個 scss 文件:
@use "var.module";
@use "normalize";
2.3 tools 層的實現
tools 層用於存放工具函數和 mixins,github 上有個優秀的開源項目 sassMagic,咱們就使用它作為 tools 層。
將該項目 src 中的代碼拷貝到 packages/scss/tools/ 目錄下即可(如果 _sassMagic.scss 文件中有報錯,將裡面對不存在文件的引入刪除即可)。我在這裡將 _sassMagic.scss 文件重命名為 index.scss,這樣後面在使用時只需要使用 @use "../tools" 即可。
2.4 acss 層的實現
acss 層用於定義一些原子樣式,這裡咱們定義 flex 佈局和 margin/padding 的原子類。
在 packages/scss/ 中創建目錄 acss,併在該目錄下創建兩個文件:_flex.scss 和 _mp.scss。
packages/scss/acss/_flex.scss:
.f {
display: flex;
}
.f-c {
display: flex;
flex-direction: column;
}
.f-r {
display: flex;
flex-direction: row;
}
.f-1 {
flex: 1 1 0;
}
.oy-h {
overflow-y: hidden;
}
.oy-a {
overflow-y: auto !important;
}
.ox-h {
overflow-x: hidden;
}
.o-h {
overflow: hidden;
}
packages/scss/acss/_mp.scss:
$direction: (l left, r right, t top, b bottom);
@for $i from 1 through 30 {
@each $type in m, p, v, h, a {
// margin
@if ($type == m) {
@each $d in $direction {
.m#{nth($d, 1)}-#{$i} {
margin-#{nth($d, 2)}: #{$i}px;
}
}
}
// padding
@else if ($type == p) {
@each $d in $direction {
.p#{nth($d, 1)}-#{$i} {
padding-#{nth($d, 2)}: #{$i}px;
}
}
}
// margin/padding left/right
@else if ($type == h) {
.ph-#{$i} {
padding-left: #{$i}px;
padding-right: #{$i}px;
}
.mh-#{$i} {
margin-left: #{$i}px;
margin-right: #{$i}px;
}
}
// margin/padding top/bottom
@else if ($type == v) {
.mv-#{$i} {
margin-top: #{$i}px;
margin-bottom: #{$i}px;
}
.pv-#{$i} {
padding-top: #{$i}px;
padding-bottom: #{$i}px;
}
}
// all
@else {
.pa-#{$i} {
padding: #{$i}px;
}
}
}
}
2.5 components 層的實現
components 層對應組件庫中每個具體組件的樣式。在 packages/scss 中創建目錄 components。首先為上一篇文章中創建的 foo 組件創建樣式:在 packages/scss/components/ 目錄下創建 _foo.module.scss 文件:
@import "../tools";
@import "../acss/mp";
@import "../base/var.module";
@include b('yyg-foo') {
color: $primary-color;
@include e('description') {
color: #333333;
@extend .mv-20;
}
}
繼續在 packages/scss/components/ 目錄下創建 index.scss 文件,該文件中引入 components 目錄下所有組件的 scss 文件:
@use "foo.module";
如果新增了其他組件,需要在 components 目錄下創建該組件的樣式文件,併在 components/index.scss 中引入該 scss 文件。
2.6 樣式入口
在 packages/scss 下創建 index.scss,在裡面導入所有的 scss,使用組件庫時只需要引入該文件即可。
@import "./acss/flex";
@import "./base";
@import "./components";
3 在組件庫中引入樣式
最後只需要在組件庫中引入 scss/index.scss 即可。在組件庫的入口模塊 packages/yyg-demo-ui/index.ts 中引入 index.scss:
import '../scss/index.scss'
(在上文中的代碼已經包括這一句引入了)
到此便完成了組件庫樣式架構的搭建,整個樣式的目錄結構如下:
感謝你閱讀本文,如果本文給了你一點點幫助或者啟發,還請三連支持一下,點贊、關註、收藏,程式員優雅哥會持續與大家分享更多乾貨