CSS 架构方法论

css-architecture compare

CSS 组织方式决定维护成本。

主要方法论

BEM

Block Element Modifier：

.card { }              /* Block */
.card__title { }       /* Element */
.card--featured { }    /* Modifier */

[!info] 优点 命名清晰，避免样式冲突。

OOCSS

面向对象的 CSS：

1. 结构与皮肤分离
2. 容器与内容分离

Atomic CSS

原子化 CSS^[1]：

<div class="p-4 m-2 text-center bg-blue-500">

本博客方案

采用 Tailwind CSS 4：

• Utility-first 架构
• JIT 按需生成
• 自定义主题色

CSS ARCHITECTURE READY.