CSS 自定义属性
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
CSS 自定义属性（也叫 CSS 变量）是现代 CSS 中最强大的功能之一。
通过本 Lab，你将学会：
- 定义和使用 CSS 变量
- 创建颜色主题系统
- 使用 var() 函数和回退值
- 在组件中继承和覆盖变量
Intermediate⏱ 20-25 min
Learning Objectives
- 理解 CSS 变量的声明语法 (--variable-name)
- 掌握 var() 函数的使用方法
- 学会设置回退值
- 了解变量的作用域和继承
- 实践主题色彩系统的搭建
Scenario
你正在为一个主题卡片组件创建样式系统，需要使用 CSS 变量来管理颜色和间距，方便后续维护和主题切换。
Why Do This
- CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
- Clarify the box model and layout rules first, then add visual polish — less rework that way.
- Writing styles as reusable patterns is more valuable than tweaking a single page.
Hands-on Practice
- Write the layout skeleton first (display/gap/align), then add colors and shadows.
- Extract repeated styles into reusable classes.
- Use validation rules to reverse-engineer the design intent of your current styles.
Common Mistakes
- Adding margin after margin to fix positioning while ignoring layout containers.
- Selectors nested too deep, causing style coupling.
- Only caring about how it looks without considering maintainability.
Deliverable
A reusable component style template (layout rules + visual rules + naming conventions).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was your main layout decision? Why did you choose it?
What change did you make specifically for maintainability?
What would you prioritize improving next time?
Tags
CSS变量主题可维护性