資料夾與檔案

降低依賴 SASS/SCSS 且只支援於主流現代瀏覽器

使用純 CSS 編寫，搭配 CSS Variables 與 使用巢狀寫法方便維護(後續章節會提到)。

使用 Cascade Layers 輔助權重區別。

基本概念為絕對不能被覆蓋掉的樣式放後面圖層。

@layer reset, ui, vendor, variations, utilities, print;

目前還沒有主流使用方式，我參照目前我覺得合理的方式編排。

一般被視為 global 的 css

請寫入 ui.css 或 @import 到 ui layer。

Component 一般來說是不應該被更動且獨立的

所以 Component 的 css 應該被放入到 /components 自己的檔案或資料夾裡，非必要請不要建立一個 components 的＠layer。除非是打包時，Component 裡的 CSS 沒有應用到，這時才把它搬到 ＠layer(components)。

請注意寫在 Component 的 CSS Variables 需有預設值，以防沒有設定 CSS Variables， 也就是說，Component 的 CSS Variables 預設值，避免再使用 CSS Variables 代替，才能達到獨立性以及重用性。 例如：請寫 color: var(--color, red); 不要寫 color: var(--color, var(--color-default));

修改第三方原始檔

則請複製原始碼至 vendor.css 裡修改，例如改變第三方的 font-size ，從 px 改成相對單位，以符合臺灣無障礙規定。

如果只是想引入第三方 css 不修改，請建立一個檔案並 @import 放入 vendor layer 中，以便以圖層方式管理 css。

覆蓋第三方CSS

variations 則是撰寫覆蓋第三方的 css，例如您想使用覆蓋的方式修改樣式，也就是不動到原始碼。

utilities 為最小單位

基本都只有一個 css 屬性，因為其絕對不能再被覆蓋的特性，所以排在最後面，優先權較高。

print 因為是獨立且不可被覆蓋，所以也是放後面。