从Tailwind迁移，学习如何结构化我的CSS
内容提要
作者分享了从Tailwind迁移到更语义化的HTML和原生CSS的经验，强调了CSS结构的重要性。文章探讨了重置样式、组件化CSS、颜色管理、字体大小、实用类、基础样式、间距、响应式设计和构建系统等实践，旨在提升CSS的灵活性和可维护性，并探索更多CSS特性。
关键要点
-
作者分享了从Tailwind迁移到更语义化的HTML和原生CSS的经验。
-
重置样式：作者复制了Tailwind的重置样式，强调了box-sizing: border-box的重要性。
-
组件化CSS：通过将CSS按组件组织，确保每个组件的CSS不会相互覆盖。
-
颜色管理：所有颜色都在一个文件中列出，以便于管理。
-
字体大小：定义了一系列变量来简化字体大小的设置。
-
实用类：复制了一些Tailwind的实用类，以便在多个组件中使用。
-
基础样式：基础样式应保持简洁，逐步从组件中提取公共样式。
-
间距管理：努力制定更有原则的间距管理方法，避免随意添加间距。
-
响应式设计：尝试使用CSS网格布局，减少媒体查询的使用。
-
构建系统：使用esbuild进行生产环境的CSS打包，利用CSS的内置导入和嵌套选择器功能。
-
迁移原因：Tailwind对构建系统的依赖增加，限制了CSS的灵活性，作者希望探索更语义化的HTML和CSS特性。
延伸问答
为什么作者决定从Tailwind迁移到原生CSS？
作者认为Tailwind对构建系统的依赖增加，限制了CSS的灵活性，并希望探索更语义化的HTML和CSS特性。
作者在重置样式中采用了哪些Tailwind的做法？
作者复制了Tailwind的重置样式，特别是设置box-sizing: border-box，以确保元素的宽度包括其内边距。
如何管理CSS中的颜色？
作者在一个文件中列出所有颜色变量，以便于管理和使用。
作者是如何处理CSS组件化的？
作者通过将CSS按组件组织，确保每个组件的CSS不会相互覆盖，并为每个组件创建独立的CSS文件。
在响应式设计中，作者采用了什么新方法？
作者尝试使用CSS网格布局，减少媒体查询的使用，以实现更灵活的响应式设计。
作者在字体大小管理上做了哪些改进？
作者定义了一系列变量来简化字体大小的设置，模仿Tailwind的做法，使字体大小的设置更加直观。
