如果您熟悉 Bootstrap 和 Tailwind CSS,您就會知道調試程式碼庫有多麼困難,尤其是當您開發大型應用程式時。老實說,我參與的每個 Bootstrap 或 Tailwind CSS 專案最終都有太多的程式碼行,而且到了我對這種方法感到厭倦的地步。
Yumma CSS 比較如何?
Yumma CSS 使用縮寫命名約定,類似於常規 CSS 語法。
使用 Flexbox 居中
讓我們看看如何在這些框架中使用 Flex box 進行居中:
使用 Bootstrap
<div class="align-items-center d-flex justify-content-center">...</div>
使用 Tailwind CSS
<div class="items-center flex jc-c">...</div>
用 Yumma CSS
<div class="ai-c d-f jc-c">...</div>
媒體查詢與變體
Yumma CSS 提供了一組偽類和響應式斷點,例如 sm:*、md:*、lg:*、xl:* 和 xxl:*。這使得您可以輕鬆地根據螢幕尺寸和用戶互動來調整您的設計。
建築構件
讓我們看看在建立卡片網格元件時,Yumma CSS 與 Tailwind CSS 相比如何。
Tailwind CSS 卡
<div class="grid h-screen w-full gap-4 p-6 md:grid-flow-dense md:grid-cols-3 md:grid-rows-3"> <div class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white p-6 shadow-lg md:col-span-1 md:row-span-2"> <div class="flex-grow"> <h1 class="mb-2 text-2xl font-semibold text-gray-800"> Yumma OS 7.2 </h1> <p class="mb-4 text-sm text-gray-600"> This update has some important bug fixes and also fixes an issue that was preventing users from enabling or disabling Advanced Data Protection. </p> <a class="text-sm text-pink-500 underline" href="/"> What's new? </a> </div> <div class="mt-auto flex flex-col space-y-4"> <button class="h-12 rounded-md bg-pink-600 px-6 font-semibold text-white"> Update Now </button> <button class="h-12 rounded-md border border-gray-200 px-6 font-semibold text-gray-900"> Update Tonight </button> </div> </div> <div class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white p-6 shadow-lg md:col-start-2 md:row-start-1"> <div class="flex-grow"> <h1 class="mb-2 text-2xl font-semibold text-gray-800"> Patch 6.2 </h1> <p class="mb-4 text-sm text-gray-600"> This update fixes security issues. Install it to keep your system safe. </p> </div> <button class="mb-4 mt-auto h-12 rounded-md bg-pink-600 px-6 font-semibold text-white"> Update Now </button> </div> <div class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white p-6 shadow-lg md:col-start-2 md:row-start-2"> <div class="flex-grow"> <h1 class="mb-2 text-2xl font-semibold text-gray-800"> What's new? </h1> <p class="mb-4 text-sm text-gray-600"> Take a look at the new features in the latest release, including better user interface elements and a more stable system. </p> <a class="text-sm text-pink-500 underline" href="/"> Learn more </a> </div> </div> </div>
Yumma CSS 卡
<div class="d-g h-1/1 w-full g-4 p-6 md:gaf-d md:gtc-3 md:gtr-3"> <div class="d-f fd-c ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-sm md:gc-s-1 md:gr-s-2"> <div class="fg-1"> <h1 class="mb-2 fs-xl fw-600 tc-d-lead-2"> Yumma OS 7.2 </h1> <p class="mb-4 fs-sm tc-l-lead-3"> This update has some important bug fixes and also fixes an issue that was preventing users from enabling or disabling Advanced Data Protection. </p> <a class="fs-sm tc-pink tdl-u" href="/"> What's new? </a> </div> <div class="mt-auto d-f fd-c s-y-4"> <button class="h-12 rad-2 bg-pink px-6 fw-600 tc-white"> Update Now </button> <button class="h-12 rad-2 b-1 bc-l-silver-5 px-6 fw-600 tc-lead"> Update Tonight </button> </div> </div> <div class="d-f fd-c ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-sm md:gcs-2 md:grs-1"> <div class="fg-1"> <h1 class="mb-2 fs-xl fw-600 tc-d-lead-2"> Patch 6.2 </h1> <p class="mb-4 fs-sm tc-l-lead-3"> This update fixes security issues. Install it to keep your system safe. </p> </div> <button class="h-12 rad-2 bg-pink px-6 fw-600 tc-white mt-auto mb-4"> Update Now </button> </div> <div class="d-f fd-c ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-sm md:gcs-2 md:grs-2"> <div class="fg-1"> <h1 class="mb-2 fs-xl fw-600 tc-d-lead-2"> What's new? </h1> <p class="mb-4 fs-sm tc-l-lead-3"> Take a look at the new features in the latest release, including better user interface elements and a more stable system. </p> <a class="fs-sm tc-pink tdl-u" href="/"> Learn more </a> </div> </div> </div>
可維護性和可擴充性
當您從事一個大專案時,能夠維持您的工作非常重要。這就是我們將 Yumma CSS 設計為模組化和可擴展的原因。對於使用 React 或 Vue 等現代框架的應用程式來說,這是一個不錯的選擇。其簡潔的類別名稱和有組織的結構可幫助您保持樣式易於管理和程式碼整潔。
Yumma CSS | Property |
---|---|
ai-c | align-items: center; |
bg-blue | background-color: #3575dd; |
d-f | display: flex; |
jc-c | justify-content: center; |
m-4 | margin: 1rem; |
p-4 | padding: 1rem; |
rad-1 | border-radius: 4px; |
ta-c | text-align: center; |
tc-white | color: #ffffff; |
w-full | width: 100%; |
結論
Yumma CSS 致力於在樣式方面保持簡單和簡約。它確實可以幫助減少程式碼的複雜性和冗長性。它的命名約定和模組化設計非常簡潔,使其成為現代 Web 開發的絕佳工具。試試 Yumma CSS,看看它如何幫助您更有效率地完成專案!
了解更多關於 Yumma CSS 的資訊
以上是Yumma CSS - 現代 CSS 框架的新替代品的詳細內容。更多資訊請關注PHP中文網其他相關文章!

您是否曾經在項目上需要一個倒計時計時器?對於這樣的東西,可以自然訪問插件,但實際上更多


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

WebStorm Mac版
好用的JavaScript開發工具

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

Atom編輯器mac版下載
最受歡迎的的開源編輯器