你打开一个刚下载的网站HTML模板，用浏览器跑一下，模板首页挺漂亮。网站轮播图、模板卡片布局、网站响应式导航，模板该有的网站都有。但等你真正往里填内容的模板时候，问题就来了——那个轮播图用的网站是写死的三张占位图，你想换成自己的模板产品截图，得翻三四个文件才能找到图片路径写在哪。网站导航栏的模板二级菜单在手机上点不开，因为CSS里有个overflow: hidden把下拉框裁掉了。网站这类模板，模板我见过太多了。网站

好的HTML模板和差的之间，差距不在视觉层面。截图看起来都差不多，真正拉开距离的是代码结构。我习惯拿到一个模板先看三样东西：CSS的命名方式、HTML的语义化程度、以及JavaScript的依赖数量。如果CSS类名全是.box1、.div2、.left-content这种，基本可以判断这个模板是拿可视化工具拖出来的，后期维护会很痛苦。反过来，如果看到类似.card__header--featured这种BEM风格的命名，至少说明作者想过别人要怎么改。

模板里的坑往往藏在“看起来能用”的地方

前阵子帮朋友改一个企业站的模板。首页有个“新闻动态”区块，模板里写了六条假新闻，每条都是<li>里塞了一段文字加一个日期。朋友说他想让新闻从后台接口拉，不要写死。我打开JS文件一看，好家伙，这个区块根本没有独立的渲染逻辑，就是纯静态HTML。要改成动态的，等于把这块拆了重写。模板作者省了事，用模板的人就得补课。

还有个更隐蔽的问题：字体图标。很多模板用Font Awesome或者Iconfont，但只引了CDN链接，没做本地fallback。用户网络一波动，图标全变成方块。这种细节在模板演示页上根本看不出来，因为演示环境网络通常很好。

选模板的时候，我一般会做几个小测试

把浏览器窗口从1920px慢慢拖到320px，看布局在哪个断点开始崩。有些模板只做了768px和1200px两个断点，中间那段就乱套了。然后打开控制台，看有没有报错——很多模板的JS在特定页面会抛Uncaught TypeError，因为某个元素在当前页面不存在，但脚本没做空值判断。再然后，把网速限到3G，看首屏加载时间。如果字体文件和图标库把关键渲染路径堵死了，用户看到的就是一片白。

另外我会特别留意模板有没有附带.scss或.less源文件。只给编译后CSS的模板，改主题色的时候特别费劲，得全局搜索替换十六进制色值，还容易漏掉:hover或:focus状态。有源文件的，改一个变量就能换整套配色，效率差好几倍。

说回“免费模板”这件事

GitHub上确实有不少高质量的免费HTML模板，比如HTML5 UP出的那些。但免费模板有个通病：文档约等于没有。README里就一句话“打开index.html即可”。你想知道怎么改导航栏的logo尺寸，只能自己去CSS里翻。付费模板通常贵不到哪去，ThemeForest上十几二十美元的，至少会附一份像样的文档，告诉你哪个文件控制哪个区块。时间成本也是成本。

我自己现在用模板，基本只把它当起点。结构骨架留着，CSS重置部分留着，其他全部按项目需求重写。模板最大的价值不是“直接能用”，而是省掉了从零搭栅格系统和响应式断点的那几个小时。把它当成一个已经调好基础布局的画布，而不是一件成衣。

最后提一句：别在模板里直接改。复制一份出来，改副本。不然哪天你想换个模板，或者模板作者更新了版本，你都不知道自己当初动了哪些地方。