iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

下一代 CSS 解決方案:Master CSS 具增強語法的虛擬 CSS 語言 系列

Master CSS 出自🇹🇼台灣團隊,我們只需要在 HTML 中的標籤元素為其增添類別(class),就能高效構建出使用者介面,接近原生的語法讓 HTML 和 CSS 更加無縫,以增強開發上的體驗降低學習成本。
本系列將介紹 Master CSS 原理與常用語法,你可以先使用原生 CSS 語法熟悉,再逐步開始學習縮寫與速記簡寫, Master CSS 雖有原子化 CSS 的味道,但與 UnoCSS、Tailwind CSS 或 Bootstrap 相比,Master CSS 不僅僅是框架或引擎,而是定位成「增強的 CSS 語言」,各種突破性與創新的概念相信能成為下一代 CSS 解決方案。

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文 團隊啾嚕咕嚕跳起來
DAY 1

Master CSS 是什麼?全球第一個 Virtual CSS!

簡介 2022 年 03 月 16 日,全球第一個 Virtual CSS 正式發佈 🥳 何謂 Virtual CSS,Virtual CSS 是一個藉由增強語...

2023-09-16 ‧ 由 miru129 分享
DAY 2

為什麼使用 Master CSS 它的優點與基礎原理

為什麼 Master CSS 前端的框架與工具推進得很快,不論是在開發上體驗的或是部署上與效能的提升,其實每個框架、函式庫及工具的誕生都是為了解決一些痛點。 寫...

2023-09-17 ‧ 由 miru129 分享
DAY 3

Master CSS 不只是在行內寫類別樣式

Atomic CSS(ACSS) 不管是 Tailwind CSS、UnoCSS,都擁有一個概念——原子化 CSS(Atomic CSS),雖然你在 Maste...

2023-09-18 ‧ 由 miru129 分享
DAY 4

Master CSS 能做到什麼?

類別名稱的可讀性 Master CSS 是將樣式以類別名稱撰寫寫在 class 內,然而當需要設定樣式一多的話,仍無法避免類別名稱過於冗長及難以判讀的可能性,但...

2023-09-19 ‧ 由 miru129 分享
DAY 5

Vue 3 使用 Master CSS

Vue 3 使用 Master CSS 1. 建立一個 Vue.js 專案 使用 create-vue 建立一個 Vue 專案,並切換至專案目錄安裝相關依賴。...

2023-09-20 ‧ 由 miru129 分享
DAY 6

Master CSS 類別語法突顯上色和語法自動完成提示的 VS Code 插件 - Master CSS Language Service

Visual Studio Code (VS Code) Visual Studio Code 是一款由微軟開發的跨平台程式編輯器,因其開放原始碼及社群與插件的...

2023-09-21 ‧ 由 miru129 分享
DAY 7

Master CSS 預設並標準化全域樣式

如果你是採取 CDN 載入 Master CSS 並開始使用,應該會發現在官方安裝的指引中,index.html 程式碼如下: <head>...

2023-09-22 ‧ 由 miru129 分享
DAY 8

Master CSS 樣式宣告的基本語法

前言 Master CSS 透過結構化的語法,涵蓋了所有原生的 CSS 功能,也就是說 Master CSS 的核心引擎,幾乎不會影響各家瀏覽器及排版引擎對 C...

2023-09-23 ‧ 由 miru129 分享
DAY 9

Master CSS 樣式宣告好長呀!可以縮短類別名稱嗎?當然可以 - 使用縮寫縮短 Calss 名稱

前言 Master CSS 透過結構化的語法,涵蓋了所有原生的 CSS 功能,Master CSS 在類別上直接宣告原生 CSS 雖然方便,但也容易導致類別名稱...

2023-09-24 ‧ 由 miru129 分享
DAY 10

Master CSS 樣式宣告縮短還要好記 - 樣式類別的速記簡寫

前言 Master CSS 對於類別名稱過多過長的問題,提供了縮寫來縮短類別的名稱,而在開發上為了更優雅及高效,速記的簡寫因此而誕生,雖然簡寫對學習上或記憶上需...

2023-09-25 ‧ 由 miru129 分享