Vanilla CSS is all you need
5 months ago
- #Web Development
- #CSS
- #Design Systems
- 37signals使用纯CSS构建复杂的Web应用程序，无需Sass或PostCSS等构建工具。
- 他们的CSS架构扁平而简单，每个概念对应一个描述性命名的独立文件。
- 他们运用现代CSS特性，如原生自定义属性、嵌套规则、容器查询和:has()选择器。
- 色彩系统采用OKLCH实现感知均匀的颜色，通过媒体查询轻松实现深色模式。
- 间距体系基于字符单位(ch)定义水平间距，使布局内容驱动且可扩展。
- 工具类采用叠加使用方式而非作为基础，保持HTML可读性和CSS可维护性。
- :has()选择器能根据子元素样式化父元素，减少JavaScript需求。
- CSS层(@layer)管理优先级，解决了长期存在的CSS优先级冲突问题。
- 加载动画等UI元素完全用CSS实现，无需图片或JavaScript。
- 对话框动画使用@starting-style实现流畅过渡，无需JavaScript辅助。