[[338981]]

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

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

作者|Yanze Dai

目錄

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

一開始

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

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

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

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

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

重新嘗試

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

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

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

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

https://tailwindui.com/

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

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

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

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

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

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

使用 postcss-cli 使編譯變得簡單

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

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

構(gòu)建源文件夾

隨著一遍又一遍地重新啟動所有內(nèi)容，我終于找到了一種模式，可以使我的代碼庫保持良好的狀態(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個組件，因為我認(rèn)為它們對于構(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è)計，那它和其他框架有什么不同?

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

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

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

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

如果我退后一步，考慮一下Tailwind.css的優(yōu)缺點，我是否可以基于Tailwind.css的傳統(tǒng)和它的“缺點”建立一個新的功能?我想答案應(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)點：

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

Tailwind.css的缺點：

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

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

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

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

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

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

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

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

核心功能

因為我希望為我的框架做出差異，所以我提出了這樣的核心特性來完成：無設(shè)計和可擴展。

首先，Tailwind.css是“無設(shè)計的”，它為我們的開發(fā)人員提供了樣式的完全控制權(quán)。我將遵循這一點，并確保我所有的組件都只是包含非常簡單的樣式的骨架。如果需要的話，組件會有字體 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è)計“骨架按鈕”的樣式。

從這樣：

到這樣：

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

簡單來說：Class + Utilities = 你的時尚組件。

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

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

總結(jié)

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

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

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