分享一种利用 AI 学习 CSS 的方法

作为一名后端/系统开发人员，对于前端技术只是抽空学一下，对于一些概念总是理解不深刻，感觉 CSS 不难，但有总感觉没有得其精髓。最近在看 《 Modern CSS with Tailwind Flexible Styling Without the Fuss - Second Edition (beta B3.0) (Noel Rappin)》这本书时发现推荐的这本 《Hell Yes! CSS!》对于理解 CSS 的核心概念特别有用，结合 DeepSeek 的解释，对于理解 CSS 似乎非常有帮助。

全书只有二十多页，用漫画杂志的形式将 CSS 的学习痛点和核心概念都讲清楚了，学会后再使用其他 CSS 延伸的如 TailwindCSS 或 鸿蒙之类的应该都很有帮助。

由于是英文，而且其中一些点可能很难 get ，于是就想到了跟 AI 一起学习，试了一下效果不错，在我的引导下 + DeepSeek 的帮助下，不到一上午就学习完毕，有一些概念终于弄懂了。全文整理了进 4w 字，分享出来方法，想看的可以来我博客看。

References:

• 《Hell Yes! CSS!》
• DeepSeek
• 跟着 《 Hell Yes! CSS!》和 AI 学 CSS

看到盒模型就不用看了，朋友，现在是 2025 年，CSS 不应该作为学习类语言，应该作为字典类语言，你就学一个 flex 布局 然后剩下就问 gpt ，颜色怎么改，边距怎么改，怎么做居中，怎么写渐变

@murmur 会的跳过就好，主要关心那些难理解的复杂布局，有些东西不懂就很难借助 ai 来助力，个人实战感受。

@murmur 我觉得表格,浮动,定位,flex,栅格还是要过一遍比较好

@crocoBaby 我的理解呢，css 很难，这个是公认的，知识点太多，太杂，而且是很依赖经验的东西 光靠学是学不会的，记也记不住，我从 IE5 兼容性就开始写 css ，做到现在有些复杂嵌套，让我调 bug 我也得看好就 好在 css 只看结果，可以面多加水，水多加面，你说 box-sizing 写错了，最后尺寸是 100+20 还是 100-20 还是 100 ，这个不重要，小了你就放大点，大了就放小点，要多写多调试，看多了绝对晕

我觉得最难理解的就是 width 和 height ，这两个玩意的参数和外部对他们的影响有非常多可能

我也觉得，css 大概弄懂下面这些就行了：盒子模型、layout 、flexbox 、响应布局理解思路：把屏幕分割 12 列，媒体查询根据尺寸显示多少列，不过现代框架自适应都封装好了，所以我觉得理解下思路即可。

@meihuanyu88x * { box-sizing: border-box;}

@Frytea 我根据你的笔记看了一下这本书，我总结下我的一点看法 1 、不建议新人现在上来就学盒模型，学什么边距塌缩，box-sizing ，border-box ，content-box 的东西，直接晕死了 2 、同样的，选择器只需要学 class 选择器，chrome 浏览器 id 选择器的性能优势早就没了，我还见过用 id 选择器 querySelectorAll 能出十几个元素的神奇页面 3 、一样的，visibility:hidden 用的时候在学，类似的还有 opacity 和 rgba(0,0,0,0)的区别 4 、不建议新人学 odd ，even 这些伪类，学不明白就用 js 写，mvvm 写隔行样式非常简单 5 、我甚至建议新人全 div 写法，你如果用 float 布局，你后面调行高对齐也很麻烦，还不如 flex+div 通吃，现在又不要求你语义性 6 、不建议新人上来就学嵌套选择器，如果要学，可能 less 或者 scss 的嵌套更好理解，也更工程性，这部分还牵扯 css 优先级问题 7 、也不建议新人上来就学 rem em vw vh 这些复杂尺寸，rem/em 这些可以用插件后期轻松解决

@murmur #4 哈哈哈哈哈，终于看到一个贴切的形容了——水多了加面，面多了加水