This Website Has No Class
8 months ago
- #HTML
- #Web Development
- #CSS
- 作者回顾了自己之前关于使用HTML元素如组件的建议，意识到自己并未完全遵循这些指导原则。
- 他们决定重构网站，移除所有CSS类，采用受CSS禅意花园启发的无类(class-free)方案。
- CSS结构被组织为三层：基础层、组件层和实用工具层，重点使用标签选择器并淘汰实用工具类。
- 作者探索了用现代CSS特性（如嵌套、:where()和:has()）实现上下文样式，但发现这会导致选择器过于复杂。
- 受自定义元素和Web组件的启发，他们提出使用自定义标签和属性作为解决方案，且不依赖JavaScript。
- 这种方法使标记更简洁、CSS体积更小（约5KB），并提升了可访问性，但需要更周密的规划。
- 作者承认该方案可能不适合所有项目，特别是前端技术水平参差不齐的团队。
- 他们坦言并未完全消除类，因为保留了Eleventy语法高亮插件使用的类。
- 总体而言，作者认为这次实践深刻影响了其网页开发理念，但尚未准备全面推广这种方法。