返回节目列表
大型项目的 CSS 架构设计
() => {
const hours = Math.floor(duration() / 3600);
const minutes = Math.floor(duration() % 3600 / 60);
const seconds = Math.floor(duration() % 60);
return hours > 0 ? `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}` : `${minutes}:${seconds.toString().padStart(2, "0")}`;
} 播放次数: 18,320
深入探讨如何在大型项目中组织 CSS 代码，包括 BEM、CSS Modules、Tailwind CSS 等方案的对比和选择。
CSS架构前端
音频播放
() => {
const hours = Math.floor(store_get($$store_subs ??= {}, "$player", player).currentTime / 3600);
const minutes = Math.floor(store_get($$store_subs ??= {}, "$player", player).currentTime % 3600 / 60);
const seconds = Math.floor(store_get($$store_subs ??= {}, "$player", player).currentTime % 60);
return hours > 0 ? `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}` : `${minutes}:${seconds.toString().padStart(2, "0")}`;
} () => {
const hours = Math.floor(duration() / 3600);
const minutes = Math.floor(duration() % 3600 / 60);
const seconds = Math.floor(duration() % 60);
return hours > 0 ? `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}` : `${minutes}:${seconds.toString().padStart(2, "0")}`;
}
节目笔记
## 本期内容
- CSS 架构的重要性
- BEM 方法论详解
- CSS Modules 实践
- Tailwind CSS 的适用场景
## 时间线
00:00 - 开场介绍
03:15 - CSS 架构原则
10:30 - BEM 实战
22:45 - CSS Modules
35:00 - Tailwind CSS
45:00 - 方案选择建议