网页前端设计

浏览器里敲下F12，网页任何一个网站的前端源代码都摊在你面前。HTML是设计骨架，CSS是网页皮肤，JavaScript是前端肌肉和神经——这三样东西拼起来，就是设计网页前端设计的全部家当。别被那些花哨的网页框架唬住，它们再炫，前端底层还是设计这三样。

我见过太多人一上来就啃React、网页Vue，前端结果连个居中对齐都要查半天。设计真没必要。网页HTML的前端每个标签都在告诉浏览器：“这是个标题”、“这是设计段落”、“这是图片”。语义化不是玄学，是让机器和人都能看懂你的结构。CSS呢？它管的是“标题该多大”、“段落该多宽”、“图片该圆角还是直角”。至于JavaScript，它让页面活过来——点击按钮弹出提示，滚动时元素淡入，表单提交前先检查一遍。

前阵子帮朋友改一个企业官网，原代码里全是div套div，像俄罗斯套娃一样没完没了。我花了一下午把它们换成header、nav、main、footer，样式表几乎没动，页面却清爽了不止一倍。这就是语义化的价值——你写给机器看，更写给下一个接手的人看。那个人可能是三个月后的你自己。

说回CSS，很多人觉得它简单，不就改个颜色调个间距吗？但真正做起来，flexbox和grid能让人抓狂。一个三栏布局，float时代要写clearfix，flex时代要纠结justify-content和align-items，grid时代总算痛快了，可兼容性又冒出来。我自己的经验是，别追求一步到位，先用最笨的办法让页面在Chrome里好看，再回头补兼容。等你把flex玩熟了，grid的优先级自然就提上来了。

JavaScript是重头戏，也是最容易写烂的部分。刚学那会儿我特爱用jQuery，一个$符号走天下，爽是爽，可页面一复杂，代码就成了意大利面条。后来转原生，document.querySelector、addEventListener这些写多了，反而摸清了浏览器脾气。现在看到有人拿框架解决“点击按钮变颜色”这种需求，我都替他累。框架是好东西，但得等你的页面真的复杂到需要状态管理、组件复用的时候再上。

调试是另一个被低估的技能。F12打开控制台，红色的报错信息别急着复制粘贴去搜，先读一遍，多半能猜个大概。变量未定义、空值调用、异步顺序搞错——就那几类。我处理过最离奇的一个bug，是图片懒加载把首屏图也懒掉了，白屏好几秒。最后发现是threshold设错了，改个0.1就好。这种问题，光看代码想破头也发现不了，非得动手测。

做前端还有个绕不开的坎：浏览器兼容。IE死了，但它的幽灵还在——某些老系统里，Chrome不让装，只能靠Edge的IE模式撑着。每次遇到这种环境，我都在想，是不是该给用户写封信，求他们换个浏览器。可转念一想，人家用你的页面是为了办事，不是来给你测试的。所以现在写CSS，我会习惯性地加-webkit-前缀，写JS，就避开那些太新的API。麻烦是麻烦点，但总比用户打开一片空白强。

从写第一行HTML到现在，我最大的感受是：前端设计不是画图，也不是纯逻辑，它是两者的混血儿。你得懂点审美，知道什么颜色配在一起不辣眼睛，也得懂点计算机原理，明白为什么DOM操作多了页面会卡。这行当没有标准答案，同一个页面，十个人能写出十种代码。但好代码都有个共同点——干净，好改。就像写文章，华丽的辞藻堆不出好内容，结构清晰、表达准确，才是硬道理。

浏览器里那些页面，看起来千差万别，拆开了都是HTML、CSS、JavaScript。别怕它们，多写，多试，多错，慢慢就摸出门道了。