今天想聊聊开发网站模板这事儿，上个月我不是接了个私活嘛帮朋友的公司弄个官网模板，结果踩了一堆坑，差点没把自己绕进去。

一开始想得太简单了

我寻思着做个模板能有多难，不就是画个页面框架嘛打开编辑器就哐哐开写，header、footer、侧边栏全给堆上去。结果第三天客户说想要个移动端适配的，我当场傻眼——这布局用px写死了，手机上看全是错位的。

被响应式布局坑惨了

赶紧连夜改代码，把固定宽度全换成百分比，字体大小改用rem。折腾到凌晨三点发现个更致命的问题：导航栏在手机上堆成一坨，点都点不着。只能咬牙重写CSS，用media query硬生生拆出三套布局方案。

• 千万别用px做单位，rem和%才是亲爹
• 媒体查询要提前规划，别等做完了再补
• 手机端测试要贯穿全程，别才检查

浏览器兼容这头怪兽

刚搞定移动端，又栽在IE浏览器上。明明Chrome显示好好的，到IE里图片全撑破容器。查了半天发现是flex布局的坑，只好一边骂微软一边写hack代码。最离谱的是Safari对CSS变量支持诡异，某个渐变色死活显示不正常。

后来学乖了，每写个新样式就在五个浏览器里同步测试。还在代码里加了堆注释，比如“这段专门修复Firefox的margin重叠bug”，不然过半个月自己都看不懂为啥要这么写。

内容管理的大坑

客户突然说要能随时换banner图，我头皮都炸了——当初可是把图片路径全写死在css里的！只能把样式和内容彻底剥离，给每个可变区域加数据标签。弄成用JSON文件管内容，虽然前期麻烦点，但后期改起来真香。

现在这个模板已经上线两周了，光排查这些小问题就耗掉我整个项目三分之一时间。下次再有人找我做模板，我肯定先列个避坑清单，从第一天就按规范来。这东西真不能凭感觉瞎写，每个细节都是教训堆出来的。