[[338981]]

在2019年，我創(chuàng)建了一個(gè)CSS框架并將其命名為Rotala.css[1]。經(jīng)過一些重構(gòu)和修改，我終于在2020年發(fā)布了“玩具”框架。但它仍在原型設(shè)計(jì)中，因?yàn)槲艺J(rèn)為我的解決方案還不優(yōu)雅。

原文|https://pitayan.com/posts/css-framework-attempt

作者|Yanze Dai

目錄

• 一開始
• 重新嘗試
• 構(gòu)建源文件夾
• 創(chuàng)造不同
• 核心功能
• 總結(jié)

一開始

我構(gòu)建此框架的原因很簡(jiǎn)單：我自己想要一個(gè)CSS框架。

我知道從頭開始構(gòu)建它會(huì)花費(fèi)很多時(shí)間。因此，我希望站在其他強(qiáng)大的工具上來創(chuàng)建這樣的框架，以加快開發(fā)速度。

最初，我開始使用 SASS 進(jìn)行原型設(shè)計(jì)。它是一個(gè)工具，可讓你組合許多獨(dú)特的語法，以便你可以像編程一樣體驗(yàn)CSS的設(shè)計(jì)。

@mixin button-icon { 
  margin: 0 2px; 
} 
 
.button { 
  padding: 2px; 
 
  @include button-icon; 
} 

坦白地說，我從其他著名的框架(如Bootstrap和Bulma和Spectre和Miligram)中學(xué)到了很多好的技術(shù)。我從他們那里借來了一些好的設(shè)計(jì)，尤其是從 Spectre.css 那里借來的(模仿別人來重新發(fā)明輪子沒有什么可恥的)。

重新嘗試

CSS從來不是我的專長(zhǎng)，所以我并沒有期待我最初的原型設(shè)計(jì)能有什么好東西。我第一次做的東西都是脆弱的和“copy-cat”。框架中沒有“我創(chuàng)造的”。

即使只是一次沒有經(jīng)驗(yàn)的嘗試，我又怎么能承擔(dān)如此糟糕的結(jié)果呢?

毫無疑問，我從頭開始。這次，我要做一個(gè)很棒的。棒到讓我微笑。

一個(gè)偶然的機(jī)會(huì)，我看到一個(gè)視頻，說的是一個(gè)不同的CSS框架Tailwind.css，它讓一切都變得更美好。也許是時(shí)候去試試了。

https://tailwindui.com/

Tailwind.css允許你用他們的“partical(粒子、碎片)”風(fēng)格類建立自己的框架。我很喜歡這樣的解決方案，因?yàn)樗荋TML模板的原始用法。

<button class="mx-4 p-2 text-gray-600 bg-gray-300">button</button> 

Tailwind.css中的所有內(nèi)容都進(jìn)行了細(xì)分，因此將這些類寫入元素就像將構(gòu)建塊放在一起一樣。

然而，我的Rotala.css會(huì)輸出樣式表而不是模板。所以，我必須想辦法讓它在構(gòu)建時(shí)吐出一些文件。

研究證明我的擔(dān)心是多余的，Tailwind.css中的所有樣式都可以像SASS一樣通過適當(dāng)?shù)呐渲镁幾g成一個(gè)小的css文件。

/* Base */ 
@import "tailwindcss/base"; 
@import "./base.pcss"; 
 
/* Components */ 
@import "tailwindcss/components"; 
@import "./components.pcss"; 

使用 postcss-cli 使編譯變得簡(jiǎn)單

$ postcss docs/main.pcss -o docs/assets/css/rotala.css 
... 

從build命令可以看到，我完全放棄了SASS并遷移到Postcss。SASS并沒有什么不好，但我只是希望我的框架只使用一種技術(shù)，以避免某些復(fù)雜性。

構(gòu)建源文件夾

隨著一遍又一遍地重新啟動(dòng)所有內(nèi)容，我終于找到了一種模式，可以使我的代碼庫(kù)保持良好的狀態(tài)。

源文件夾結(jié)構(gòu)如下所示：

rotala/ 
  docs/ 
  style/ 
  CHANGELOG.md 
  README.md 
  package.json 
  postcss.config.js 

docs/ 文件夾用于保存可以幫助演示輸出的靜態(tài)文件。這也是Github頁面的替代設(shè)置，可以輕松地幫助發(fā)布靜態(tài)頁面而無需額外的路由參數(shù)。

docs/ 
  assets/ 
  base/ 
  components/ 
  index.html 
  main.pcss 

style/ 包含所有源樣式。最初，我制作了大約20個(gè)組件，因?yàn)槲艺J(rèn)為它們對(duì)于構(gòu)建現(xiàn)代網(wǎng)站的基本部分非常必要。這些樣式很大程度上基于Spectre.css和Bulma(我是這些框架的粉絲)。

style/ 
  base/ 
  components/ 
    Accordion/ 
    Typography/ 
    Badge/ 
    Breadcrumb/ 
    Tooltip/ 
    Button/ 
    Checkbox/ 
    Divider/ 
    Drawer/ 
    Table Group/ 
    Form Group/ 
    Input/ 
    Tab/ 
    Avatar/ 
    Link/ 
    Menu/ 
    Modal/ 
    Notification/ 
    Pagination/ 
    Popover/ 
    Radio/ 
    Select/ 
  base.pcss 
  components.pcss 
  main.pcss 
  prefix.pcss 

創(chuàng)造不同

當(dāng)你讀到這一行時(shí)，你可能會(huì)問：既然你抄襲了很多其他框架的設(shè)計(jì)，那它和其他框架有什么不同?

我的腦子里也有同樣的問題，我的意圖是創(chuàng)建自己的CSS框架。

重塑別人的作品看起來不像是一種“為自己創(chuàng)造”的精神。這意味著這個(gè)小框架將永遠(yuǎn)是我的玩具，對(duì)其他開發(fā)人員沒有價(jià)值。

其實(shí)，我也希望別人能從我建造的東西中受益。但我已經(jīng)厭倦了從頭再創(chuàng)造一切，有沒有一種簡(jiǎn)單的方法，通過添加一些畫龍點(diǎn)睛的手法，讓這個(gè)死氣沉沉的項(xiàng)目起死回生?

很難做到“與眾不同”，特別是當(dāng)你沒有很好的靈感時(shí)。

如果我退后一步，考慮一下Tailwind.css的優(yōu)缺點(diǎn)，我是否可以基于Tailwind.css的傳統(tǒng)和它的“缺點(diǎn)”建立一個(gè)新的功能?我想答案應(yīng)該是YES。

<div class="md:flex bg-white rounded-lg p-6"> 
  <img class="h-16 w-16 md:h-24 md:w-24 rounded-full mx-auto md:mx-0 md:mr-6" src="avatar.jpg" /> 
  <div class="text-center md:text-left"> 
    <h2 class="text-lg">Erin Lindford</h2> 
    <div class="text-purple-500">Customer Support</div> 
    <div class="text-gray-600">erinlindford@example.com</div> 
    <div class="text-gray-600">(555) 765-4321</div> 
  </div> 
</div> 

Tailwind.css的優(yōu)點(diǎn)：

• 無固持己見的風(fēng)格
• 低級(jí)別實(shí)用class
• 設(shè)計(jì)可定制
• 插件系統(tǒng)
• 基于Postcss生態(tài)系統(tǒng)

Tailwind.css的缺點(diǎn)：

• 模板可能過于“擁擠”
• 文件大小為“大”，需要在構(gòu)建時(shí)清理。
• 實(shí)用程序的語義較少

即使Tailwind.css有一些缺點(diǎn)，我認(rèn)為這些缺點(diǎn)也可以被優(yōu)點(diǎn)遠(yuǎn)遠(yuǎn)地抵消。所以在我的框架中，我需要想出處理這些缺點(diǎn)的計(jì)劃。

不得不說第二個(gè)和第三個(gè)缺點(diǎn)已經(jīng)是Tailwind.css的“特色”的一部分了，我無法擺脫它。但是第一個(gè)“擁擠的模板”似乎很容易平衡。多虧了Tailwind.css強(qiáng)大的功能，我還可以通過以下方式編寫樣式：

.container { 
  @apply bg-white rounded-lg p-6; 
 
  @screen md { 
    @apply flex; 
  } 
} 

我相信blow這個(gè)用法看起來好多了，不是嗎?

如果我希望稍微改變一下 .container，我也可以使用“模板樣式”直接裝飾它。

<div class="container font-bold mx-2"> 
  ... 
</div> 

我清楚和明白，我不是第一個(gè)這樣想的人，但至少這可以成為我的框架在其他框架中脫穎而出的一個(gè)很好的特點(diǎn)。

核心功能

因?yàn)槲蚁Ｍ麨槲业目蚣茏龀霾町悾晕姨岢隽诉@樣的核心特性來完成：無設(shè)計(jì)和可擴(kuò)展。

首先，Tailwind.css是“無設(shè)計(jì)的”，它為我們的開發(fā)人員提供了樣式的完全控制權(quán)。我將遵循這一點(diǎn)，并確保我所有的組件都只是包含非常簡(jiǎn)單的樣式的骨架。如果需要的話，組件會(huì)有字體 text-size color background-color padding margins 等等。

.button { 
  @apply appearance-none; 
  @apply select-none; 
  @apply align-middle; 
  @apply font-medium; 
  @apply text-center; 
  @apply text-base; 
  @apply no-underline; 
  @apply leading-normal; 
  @apply whitespace-no-wrap; 
  @apply inline-block; 
  @apply cursor-pointer; 
  @apply rounded-sm; 
  @apply py-1 px-3; 
} 

這樣一來，所有的組件只要添加新的樣式覆蓋，就可以修改成想要的形狀。它遵循了我們應(yīng)該如何處理CSS樣式的原始實(shí)踐。

假設(shè)我們正在設(shè)計(jì)“骨架按鈕”的樣式。

從這樣：

到這樣：

<button class="button text-gray-700 bg-gray-300 hover:bg-gray-500 transition-colors duration-150"> 
  Background Gray 
</button> 

簡(jiǎn)單來說：Class + Utilities = 你的時(shí)尚組件。

模板中看起來太擁擠了，因此，使用它的更好方法可能是擴(kuò)展當(dāng)前類。

.button { 
  @apply text-gray-700; 
  @apply bg-gray-300; 
  @apply transition-colors 
  @apply duration-150; 
 
  &:hover { 
    @apply bg-gray-500; 
  } 
} 

總結(jié)

剩下的任務(wù)將是實(shí)現(xiàn)我希望在框架中擁有的所有其他組件。創(chuàng)建每個(gè)組件所需的時(shí)間比以前要少，因?yàn)槲叶x了如何將“骨架”組件用作核心功能。

現(xiàn)在，所有必要的組件都可以用來構(gòu)建網(wǎng)站。仍然存在很多弊端，但我認(rèn)為從零開始創(chuàng)建自己不擅長(zhǎng)的東西對(duì)我來說是一個(gè)成就。

本文轉(zhuǎn)載自微信公眾號(hào)「前端全棧開發(fā)者」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端全棧開發(fā)者公眾號(hào)。