换成语义化标签，CSS代码就少了四成。
CSS那头，重点不在选择器多花哨，在于层叠和继承这两条基本规则。很多人写样式喜欢每条属性都写全，生怕漏了什么。其实父元素设了字体大小，子元素默认就继承，你非要在每个子元素里重复写一遍，除了让文件臃肿，没任何好处。倒是有一个坑我踩过：层叠的优先级，id、class、标签三种选择器权重不同，有时候你写了半天样式不生效，翻到文件末尾发现被一条id选择器覆盖了。那种感觉，像你排了半小时队，突然有人从旁边插到你前面。
JavaScript呢，它管的是行为。点击按钮弹出菜单，滚动页面加载更多内容，这些交互逻辑不该混在HTML里。现在流行把事件监听写在HTML属性上，比如onclick="doSomething()"，方便是方便，但代码一多就乱成一团。我宁愿多写几行addEventListener，把结构和行为分开，后期改起来脑子不疼。
说个具体的例子。我做过一个个人作品集页面，三个部分：封面、项目展示、联系方式。HTML里就是三个加上对应的标题和内容，干净利落。CSS里用flexbox把项目卡片排成网格，每个卡片只写宽度和间距，剩下的交给浏览器自动计算。JavaScript只在用户滚动到某个位置时，给封面加一个淡出效果。整个文件加起来不到两百行，加载速度快，改起来也顺手。
这行当有个怪现象：工具越来越先进，代码却越来越臃肿。框架一个接一个冒出来，今天学Vue明天学React，结果很多人连原生的HTML表单都写不利索。我有个朋友，前端做了五年，让他不用框架写个注册页面，他愣是憋了半小时。这不是技术问题，是思维被工具绑架了。
网页设计语法说到底，就是让你清楚地表达：这块内容是什么，它该长成什么样，用户操作它时发生什么。这三件事分开想，分开写，页面自然就清爽了。别迷信什么“全栈工程师”的头衔，能把这三个层次理清楚的人，写出来的东西比那些堆砌各种库的强十倍。
最后说个观察：很多人学网页设计，喜欢从框架入手，一上来就npm install。我建议你先用纯HTML和CSS做三个页面，不加任何库。做完你会发现，很多框架解决的问题，其实根本不存在。语法这东西，越简单越接近本质——就像写作，辞藻堆得再华丽，不如一句话说到点子上。
(责任编辑：综合)
