整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頭條創作挑戰賽#
該系列已更新的文章：
分享一個實用的 vite + vue3 組件庫腳手架工具，提升開發效率
開箱即用 yyg-cli 腳手架：快速創建 vue3 組件庫和vue3 全家桶項目
Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo
Vue3 企業級優雅實戰 - 組件庫框架 - 2 初始化 workspace-root
Vue3 企業級優雅實戰 - 組件庫框架 - 3 搭建組件庫開發環境
在前一篇文章中分享了搭建組件庫的基本開發環境、創建了 foo 組件模塊和組件庫入口模塊，本文分享組件庫的樣式架構設計。
該實戰已更新文章：
常見的 CSS 架構模式有很多：OOCSS、ACSS、BEM、SMACSS、ITCSS 等，其中 SMACSS 和 ITCSS 很相似。我在企業級項目中最常使用的是簡化版的 ITCSS + BEM + ACSS，所以本文首先介紹這三種模式，其他模式大家自己上網查看。
ACSS 模式幾乎是一個樣式屬性就對應了一個樣式類。這種方式非常靈活，復用性很強、維護成本低，但破壞了 CSS 命名語義化。常見的名稱如：d-flex、m-10、w-20 等。
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 可以規范命令，頁面結構也比較清晰。
ITCSS 是一種樣式的分層結構，一共有七層，七個層次從上到下依次為：
ITCSS 分層非常細致，咱們組件庫的樣式在其基礎上進行了簡化，省略了 Base 層 或 Objects 層。而對于 Trumps 層，咱使用 ACSS 來替代，對于 Components 層，里面的每個組件內部又使用 BEM。所以咱們組件庫的樣式架構為：簡化版的 ITCSS + BEM + ACSS。
組件庫的樣式使用預處理器 SCSS，從結構整體來看，分為如下層級：
前面說過，base 層包括樣式變量定義、通用基礎樣式、定制基礎樣式。
首先在 packages/scss 目錄下創建 base 目錄，存放 base 層的 scss 文件。
settings 是一些變量的定義，在 packages/scss/base/ 目錄中創建 _var.module.scss 文件，該文件定義樣式變量。
$primary-color: #488019;
$common-padding: 20px;
:export {
primaryColor: $primary-color;
}Generic 通常是對瀏覽器樣式的重置，統一 HTML 標簽在不同瀏覽器中的展示，屏蔽瀏覽器間的差異。在這個部分可以使用開源庫normalize.css、reset.css 等。這一層可以在組件庫中省略，在各個具體的應用中引入對應css。不過程序員優雅哥還是將瀏覽器樣式重置引入到組件庫中，這樣應用開發過程中省點事。咱使用開源的 normalize.css 作為 Generic。normalize.css 的代碼可以在 GitHub 上搜索獲取。
繼續在 packages/scss/base/ 目錄中創建 _normalize.scss 文件，將 normalize.css 的內容直接復制進去就可以了。
Base 主要是存放部分重置樣式的自定義，如 html、body、section 等，這部分咱們暫時沒有自定義的內容，就無需編寫了。
最后需要將 base 層所有 scss 以統一的入口引入。在 packages/scss/base/ 目錄下創建 index.scss，該文件導入上面創建的兩個 scss 文件：
@use "var.module";
@use "normalize";tools 層用于存放工具函數和 mixins，github 上有個優秀的開源項目 sassMagic，咱們就使用它作為 tools 層。
將該項目 src 中的代碼拷貝到 packages/scss/tools/ 目錄下即可（如果 _sassMagic.scss 文件中有報錯，將里面對不存在文件的引入刪除即可）。我在這里將 _sassMagic.scss 文件重命名為 index.scss，這樣后面在使用時只需要使用 @use "../tools" 即可。
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;
}
}
}
}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 文件。
在 packages/scss 下創建 index.scss，在里面導入所有的 scss，使用組件庫時只需要引入該文件即可。
@import "./acss/flex";
@import "./base";
@import "./components";最后只需要在組件庫中引入 scss/index.scss 即可。在組件庫的入口模塊 packages/yyg-demo-ui/index.ts 中引入 index.scss：
import '../scss/index.scss'（在上文中的代碼已經包括這一句引入了）
到此便完成了組件庫樣式架構的搭建，整個樣式的目錄結構如下：
感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關注、收藏，程序員優雅哥會持續與大家分享更多干貨
、首字母大寫
::first-letter 偽類選擇器用來指定元素第一個字母的樣式。
2、透明圖片陰影
相信你一定用過box-shadow屬性給盒子設置陰影吧，但是當你想要給透明圖片添加陰影的時候，卻看起來像加了個邊框！這時候神奇的drop-shadow就派上用場了。
drop-shadow 的工作方式是，其遵循給給定圖片的 Alpha 通道。因此陰影是基于圖片的內部形狀，而不是顯示在圖片外面。
3、鏤空文字
-webkit-text-stroke: 1px #1e80ff;
注意：鏤空文字屬性ie瀏覽器不兼容
4、背景文字
利用background-clip: text;規定背景的繪制區域，再把文字顏色設置為透明實現。
5、網頁灰度效果
grayscale(amount)函數將改變輸入圖像灰度。amount 的值定義了灰度轉換的比例。值為 100% 則完全轉為灰度圖像，值為 0% 圖像無變化。若未設置值，默認值是 0。（如下鼠標懸浮體驗效果）
6、flex布局最后一行左對齊
方法1：使用js補齊元素，例如，每行展示3個元素，現在一共有5個元素，那么我們就可以在最后補一個同寬度的透明元素。
方法2：justify-content設置為space-between實現兩端對齊效果，最后一行再特殊處理：思路為選中最后一個元素，設置其右邊距，擠到只能容納最后一行元素的寬度。
方法3：justify-content設置為flex-start,先將全部元素左對齊，然后計算出每個元素的間距，通過gap設置元素間距(如果行列間距不同，可以用column-gap設置列間距，row-gap設置行間距)，偽裝實現兩端對齊的效果。
7、毛玻璃背景效果
使用backdrop-filter與filter都可以寫出高斯模糊的效果，但是兩者使用起來還是有區別的，而且使用的目標也不同。
區別：
backdrop-filter：使背景模糊，不會影響到背景下面的圖片
filter：通常是定義 img的可視效果，修改圖片的模糊效果，值越大越模糊
8、inline元素間的空白間隙
行內元素排列的時候，明明沒有邊框，也沒有間距，但就是有空隙。
其實間隙是由換行或者回車導致的，你可以將標簽代碼都寫同一行即可解決。但是這樣有點呆，我們可以通過設置父元素的font-size為0將空隙縮小到0。
9、文字溢出省略
單行文本：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行文本：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;（多少行省略）
overflow: hidden;
注意：ie不兼容，可用min-height：省略的行數*行高 來解決；
10、列表除最后一個元素外，其他元素統一樣式
一般這種情況，我們可以先全部統一樣式，然后再單獨設置最后一個元素樣式覆蓋公共樣式。
也可以用 :not 選擇器直接設置除了最后一個元素的樣式。
:not(selector) 選擇器匹配每個元素是不是指定的元素/選擇器。
11、隱藏滾動條
.element::-webkit-scrollbar {
display: none;
}
12、禁止用戶選擇
div {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
13、暫停動畫
animation-play-state可以控制動畫狀態
近很多做淘寶電商朋友問我：“為什么我在電腦端搜索的時候，想查看一下同行的店鋪，但不管是搜索其鏈接還是搜索店鋪id，點進去后都顯示寶貝不存在，這是為什么？”對于這個問題，相信屏幕前的很多中小賣家都遇過，但是奇怪的是他們手機端卻能夠正常搜索和展示，起到了一個單純屏蔽電腦端查看的效果
其實這是賣家為了防止同行盜圖或者抄襲自己的寶貝標題才不得已用的方法，方法有兩種，第一種是直接在淘寶服務市場購買官方的CSS權限服務，利用CSS樣式來做，官方權限一年是2400元，對于中小賣家來說一定程度上成本太高了，不建議使用。
第二種可以用代碼解決，可以自己給自己電腦操作，不用到處求人，現在我們來講一下第二種方法的大概流程吧
進入店鋪裝修首頁
找到自定義內容區，進去編輯
在這里輸入達到不顯示電腦端店鋪的代碼
最后點擊發布就完成啦
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
