你的CSS文件超過4000行。

一半的類名是.box、.container，甚至是更糟糕的.box2。

你在一個(gè)地方修改了按鈕樣式，結(jié)果其他三個(gè)地方同時(shí)“陣亡”。

每次修bug都像在玩打地鼠游戲——只是這回，地鼠手里拿著錘子。

聽起來熟悉嗎？

沒錯，我也經(jīng)歷過這些痛苦：

被級聯(lián)（Cascade）折磨，

被選擇器權(quán)重（Specificity）背叛，

和!important打得難舍難分，仿佛這是我的全職工作。

我一度討厭CSS，

是真的，非常討厭。

直到有一天，我發(fā)現(xiàn)了那個(gè)唯一的技巧——不是!important，也不是某個(gè)新出的CSS框架。

而是CUBE CSS。

等等，CUBE CSS到底是什么？

什么是CUBE CSS？

CUBE代表的是：

• Composition（組合）
• Utilities（實(shí)用類）
• Blocks（區(qū)塊）
• Exceptions（例外情況）

聽起來挺高級吧？其實(shí)它并不是高高在上的理論架構(gòu)，只是一種真正有效的CSS組織方式。

簡單來說：用更模塊化、更容易組合、更易維護(hù)的方式來編寫CSS，這樣你的樣式表就不會變成一團(tuán)毫無秩序的黑洞。

為什么需要CSS結(jié)構(gòu)化？

讓我猜猜——每次啟動新項(xiàng)目時(shí)，你都會告訴自己：

“這次我一定好好組織！”

但很快，截止日期逼近了，

你開始快速堆砌功能，

.red-button、.footer-red-button、.red-button-footer-new 這些奇葩類名一擁而上……

不知不覺，你陷入了CSS版的《盜夢空間》，就連小李子也救不了你了。

CUBE CSS 拯救了我的精神狀態(tài)，也挽救了我的代碼。

關(guān)鍵技巧：基于組件的組合式CSS

改變一切的核心技巧在這里：

.button {
  display: inline-block;
  padding: 0.5em 1em;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

看起來再普通不過，對吧？

但真正神奇的地方是：這個(gè).button類幾乎永遠(yuǎn)不再被改動。如果我需要一個(gè)紅色按鈕，我不再重新寫一遍CSS。

而是用組合方式實(shí)現(xiàn)：

<button class="button u-bg-red u-text-sm">刪除</button>

• Utilities（實(shí)用類）：負(fù)責(zé)微調(diào)細(xì)節(jié)
• Blocks（區(qū)塊）：定義基礎(chǔ)樣式
• Exceptions（例外情況）：處理特殊情形

你不必為了每個(gè)“紅色按鈕、小字號、多2px內(nèi)邊距”的按鈕而重新寫樣式，而是直接組合現(xiàn)有類即可。

實(shí)用類并不是邪惡的

我曾經(jīng)嘲笑過實(shí)用類CSS：

“一點(diǎn)都不語義化！”“這跟寫內(nèi)聯(lián)樣式有什么區(qū)別？”

但你知道還有什么不語義化嗎？.thingy、.box、.card2-final-final這樣的類名。

真正語義化的是：清晰且有效的代碼。

實(shí)用類讓你無需反復(fù)編寫重復(fù)的樣式；讓你無需頻繁打開樣式表就能迅速做出決定；給了你真正的控制權(quán)。

當(dāng)然，你并不一定需要用Tailwind（盡管它確實(shí)不錯）。你完全可以自己構(gòu)建一套小巧的實(shí)用類庫——就像我做的那樣。我的代碼庫為此深深感謝我。

可是BEM、SMACSS、OOCSS呢？

這些我都用過。

凌晨兩點(diǎn)時(shí)抱著咖啡哭泣，只為了記住到底是.block__element--modifier還是.block--modifier__element。

它們的問題在于：這些方法企圖通過增加更多CSS來解決CSS本身的問題。

而CUBE CSS走的是另一條路：保持極簡、模塊化且有意義。

這不是束縛，而是策略。

說真的，這真的有效嗎？

必須聲明：CUBE CSS不是魔法。它不會自動幫你寫CSS；它也無法自動修復(fù)實(shí)習(xí)生寫出來的17層嵌套flex布局。

但它能給你結(jié)構(gòu)。

當(dāng)你堅(jiān)持使用后，你會發(fā)現(xiàn)它的好處：

• 組件變得干凈整潔
• 特殊情況一目了然
• 新來的開發(fā)者無需心理治療也能快速上手

TL;DR：這個(gè)CSS技巧到底是什么？

停止每次都新寫樣式，開始組合你的CSS。

用區(qū)塊定義基礎(chǔ)，用實(shí)用類做細(xì)微調(diào)整，用例外情況處理特殊需求。

CUBE CSS并不是框架，而是一種思維方式。它讓我的代碼庫變得像經(jīng)歷過“近藤麻理惠式”的大掃除一樣干凈整潔。