另一个实际好处是加载速度。你把样式全部塞进一个外部的.css文件里，浏览器第一次加载后就会缓存它。用户再点开你站里的其他页面，HTML只传结构，样式直接从本地缓存读。我测过一个电商站，原本每个页面都要重复下载30多KB的内联样式，改成外链后，第二次访问的请求体积直接砍掉四分之一。移动端用户感受最明显——省流量，也省等待时间。

响应式布局这件事，没有CSS基本做不成。你用表格或者绝对定位去适配手机、平板、宽屏显示器，那得写好几套逻辑，还得用JavaScript去判断屏幕宽度再切换。CSS的媒体查询是声明式的，你在样式表里写@media (max-width: 600px)，然后重新排列网格或者隐藏侧栏，浏览器自己处理剩下的。我去年帮朋友改一个小型博客，他原来用固定宽度960px的div套div，手机上一看字都挤到屏幕边缘。我加了不到三十行媒体查询，把两栏改成单栏，图片设成max-width:100%，问题就解决了。没有CSS，这活儿得重写整个页面结构。

CSS还给设计带来了“活”的感觉。过渡和动画属性，比如transition和animation，能让悬停按钮有微妙的颜色渐变，让下拉菜单有滑出效果。这些用JavaScript也能做，但代码量完全不是一个量级。JS要监听事件、操作DOM、处理时间函数，CSS里就一句transition: all 0.3s ease。我做过一个导航栏，鼠标滑过时背景色渐亮，用CSS写了三行，同事用jQuery实现，写了十几行还偶尔出现闪烁。不是JS不行，是CSS天生就更适合处理视觉状态变化。

还有一点容易被忽略——CSS让协作变得更干净。前端负责结构，样式独立成文件后，设计师可以直接打开CSS调整间距和颜色，不用碰HTML结构。后端程序员改模板时也不会误删样式代码。我见过一个团队，设计师自己用浏览器的开发者工具调好一个组件的样式，然后把修改后的CSS片段发给前端，前端粘贴进去就完事。整个流程不需要口头解释“哪个div里套了哪个span”。这种边界清晰带来的沟通成本降低，比任何技术指标都实在。

当然CSS也有烦人的地方，比如浏览器兼容性偶尔让人抓狂，某些旧版Safari对flex的解析就是不一样。但比起它省下的时间、流量和维护精力，这些小坑值得踩。至少在我经手的项目里，凡是规规矩矩用CSS做样式的，后期改起来都比那些把样式写死在HTML里的轻松太多。这就像收拾房间——你把东西分类放进抽屉里，找的时候才不用把整个柜子翻个底朝天。