网站代码模板
去年帮朋友改一个烘焙工作室的网站官网，打开源码那一刻我差点把咖啡喷屏幕上——首页轮播图下面直接跟着一段注释：``。问题是网站，上面的代码div结构是表格布局，还嵌套了三层。模板这就是网站典型的“网站代码模板”用歪了。
模板本身没错。代码我硬盘里就存着七八套自己攒的模板HTML骨架，从极简博客到带侧边栏的网站企业站都有。但很多人把模板当成了填空题，代码而不是模板起跑线。见过最离谱的网站一个案例：某培训机构官网的导航栏，每个`
真正的模板应该像乐高底板，不是拼好的模型。我习惯把模板拆成三个层次：结构层（`
<article class="card"> <img src="placeholder.jpg" alt=""> <h3>标题占位</h3> <p>描述文本</p> </article>看着简单吧？但新手会直接往`src`里塞一张800KB的未压缩图片，然后问我为什么Lighthouse跑分只有30。模板里的`alt=""`是提醒你补内容，不是让你留着空属性上线。
说个具体的观察。去年GitHub上有个“响应式后台模板”火了，两周攒了4k星。我拉下来一看，侧边栏折叠用了`transition: all 0.3s`，结果移动端打开时整个页面都在抖。作者后来在issue里承认，那个`all`是为了省事写的。模板代码里的每个“省事”都会变成你项目里的“事故”。
我自己的做法是：拿到任何模板先做减法。删掉所有`!important`，删掉没用的CSS重置，把`px`换成`rem`。上周给一个花店改模板，发现作者在`body`上写了`font-size: 62.5%`，但所有字号还是用`px`写的。这种半吊子rem方案比纯px还难维护——你改根字号，页面纹丝不动。
还有JavaScript部分。模板里的轮播图通常用`setInterval`写死3秒切换。用户鼠标悬停时不会暂停，切到后台标签页还在跑。我一般会改成`IntersectionObserver`控制播放，再加个`prefers-reduced-motion`媒体查询。这些细节模板不会告诉你，但上线后用户会告诉你。
最要命的是表单模板。十个模板九个用``收邮箱，剩下一个用`type="email"`但不写`required`。我见过一个报名页，用户提交空表单后跳转到“提交成功”页——因为模板的`action`指向了一个静态HTML。这种问题测试时发现不了，等真实用户填了假数据才暴露。
所以现在有人问我要模板，我都先发一个自己写的“反模板”清单：把`
最后说个真事。上个月帮人看一个用Bootstrap模板做的律师站，导航栏在iPad竖屏时折行成两排，把logo挤到了屏幕外。查了半天发现是模板作者在`.navbar-brand`上写了`max-width: 120px`，而客户的logo图片宽度是240px。改一个数字的事，但客户已经带着这个bug跑了三个月广告。模板不会替你思考，它只会替你写代码。