思路分享：如何嘗試創(chuàng)建自己的CSS框架？

時(shí)間：2023-07-24 14:06:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-24 14:06:02 來源：網(wǎng)站運(yùn)營(yíng)

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

一開始

我構(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ǔ)法，以便你可以像編程一樣體驗(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í)候去試試了。

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

docs/ assets/ base/ components/ index.html main.pcssstyle/ 包含所有源樣式。最初，我制作了大約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í)用程序的語(yǔ)義較少

即使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è)成就。

無論如何，我將繼續(xù)開發(fā)框架，我希望你也對(duì)我在這里的小工作感興趣。

---

原文：https://pitayan.com/posts/css-framework-attempt
作者：Yanze Dai
翻譯：公眾號(hào)《前端全棧開發(fā)者》