网页设计采用DIV+CSS有什么好处

2005年我刚接触网页那会儿，还在用 <table> 嵌套布局。设计一个页面套五层表格，采用改个边距得翻十几行 cellpadding。好处后来第一次用 <div> 加 CSS 重写公司官网，网页改版时间从三天缩到四小时。设计那感觉就像从手摇车窗换成了电动车窗——不是采用能不能用的问题，是回不去了。

DIV+CSS 最直接的收益是 结构与表现分离。HTML 只管内容骨架，CSS 管长什么样。以前用表格布局，改个背景色得在 <td> 里找 bgcolor，或者更糟——用透明 gif 撑间距。现在一个 .card { background: #fff; } 就能控制所有卡片。我见过一个电商站，促销期间要换主色调，设计师丢过来一个 CSS 变量文件，前端改两行代码全站生效。要是表格时代，得改几百个 bgcolor 属性。

代码量减少只是一方面。更关键的是可维护性。表格布局的页面，你想加个侧边栏？得重新规划整个表格的列跨度。DIV+CSS 呢？直接写个 <aside> 然后 float: right; 或者用 flex 排一下。我习惯把布局 CSS 拆成 layout.css、components.css、utilities.css，改版时只动 layout，组件样式原封不动。这种模块化思维在表格时代根本没法玩——表格是铁板一块。

还有 SEO 和可访问性。搜索引擎爬虫不喜欢深层的表格嵌套，它们更愿意看到语义清晰的 <h1>、<p>、<nav>。屏幕阅读器也是。你用表格布局，读屏软件会念“表格 3 行 4 列”，用户一脸懵。用 DIV+CSS 配合 ARIA 角色，才能让视障用户顺畅浏览。这不是锦上添花，是法律要求——至少在美国 Section 508 和欧盟 EN 301 549 下是这样。

响应式设计更不用说了。媒体查询 @media 跟 DIV+CSS 是天生一对。表格布局想适配手机？要么做两个版本，要么用 display: block 强行拆表格——拆完结构全乱。我去年调过一个老后台，表格布局，在 iPad 上横向滚动条能拖出二里地。重构成 flex 布局后，三栏自动变一栏，产品经理当场加了鸡腿。

当然，DIV+CSS 不是银弹。滥用 <div> 会写出“div 汤”——一堆无意义的容器。我见过一个页面用了 47 个 <div> 就为了画一个按钮。这时候该用 <button> 或 <a>。语义化标签（header、main、footer）比纯 div 好得多。但这是使用者的问题，不是技术本身的锅。就像给你一把好刀，你非拿刀背切菜，然后怪刀不好。

另一个现实问题是学习曲线。新手容易把 CSS 写成意大利面条——到处 !important，选择器嵌套五层。我早期也这样。后来强迫自己用 BEM 命名法，每个类名都带块级作用域，才慢慢理清楚。表格布局虽然笨，但至少不会出现“这个样式从哪继承来的”这种灵魂拷问。所以我的建议是：先学盒模型和文档流，再碰 flex/grid，别一上来就抄框架。

最后说个观察。现在很多“低代码”平台又回到了表格布局的老路——拖拽生成一堆绝对定位的 div，本质上跟 2000 年的 <table> 没区别。历史是个圈。但如果你要手写代码，要长期维护，要适配各种屏幕，DIV+CSS 依然是那个最不坏的选择。至少改样式的时候，你不用去数表格的第几行第几列。

我现在的习惯：任何新项目，先写 HTML 骨架，不加任何 class。打开浏览器看纯文本流——如果内容顺序合理，再开始加 CSS。这个习惯帮我避开了无数“div 汤”陷阱。你也可以试试。