年薪40万的React大佬，竟然被一个Safari兼容性问题卡了三天

前言：我不是在黑，我是在救你

这事儿得从一个bug说起

上周五下午，团队的一位"React高手"来找我：

"诶，你看这个，为啥在iPhone 12上导航栏就这么显示不对了？在Chrome里完美啊。我已经改了三个小时了，加了好几个媒体查询，还是不行..."

我打开他的代码一看，整个人都懵了。

一个看似简单的导航栏，他是这样写的：

<div className="navbar">
  <div className="nav-items">
    <div className="nav-item">首页</div>
    <div className="nav-item">产品</div>
    <div className="nav-item">关于</div>
  </div>
</div>

然后CSS是这样的：

.navbar {
display: flex;
justify-content: space-between;
width: 100%;
padding: 020px;
}

.nav-items {
display: flex;
gap: 30px;
}

.nav-item {
white-space: nowrap;
/* 开始加媒体查询 */
}

@media (max-width:768px) {
.nav-item {
    gap: 15px;
  }
}

@media (max-width:480px) {
.nav-item {
    gap: 10px;
  }
}

/* 继续加... 更多媒体查询... */

我问他："为什么不直接用min-width？"

他说："这个啥意思？"

我直接给他改成这样：

.nav-item {
  white-space: nowrap;
  font-size: clamp(12px, 3vw, 16px);
  gap: clamp(10px, 2vw, 30px);
}

——一行CSS搞定，再也不需要那一堆媒体查询。

他在那看了五分钟，最后只说了一句："我怎么没想到？"

然后他问我："这是什么高级技巧吗？"

我说："不，这就是CSS的基础。"

那一刻我才意识到——问题比我想的更严重。

坦白讲，这个现象我看多了

这不是个例。前两个月，我面试了一个号称"5年React经验"的人。

给他出了个题："用原生JS写一个Tab切换组件，支持键盘导航。"

他的反应是："这...这需要用什么库吗？"

我说："不用库，就原生JS。"

他卡了20分钟，最后放弃了。理由是："我习惯用React了。"

你说笑不笑话呢？

他简历上写的是"精通JavaScript"，实际上是"精通React"。两回事儿。

这就像一个开了5年车的人，会开自动挡，但问他手动挡怎么操作，他就慌了。看起来经验很丰富，其实只是按钮按得熟。

我现在面试前端，问的第一个问题都是："能不能用纯HTML写一个表单，不用任何框架？

你猜多少人能顺利答上来？

10个里不到3个。

其他人的反应都差不多："为...为什么要这样做？有框架不就行了？"

现在大家都这样问

这就是问题所在。

问题来了：为什么这么多人掉坑里？

真相1：框架让学习变得"太简单"了

你想象一下十年前的前端：

没有框架。你必须理解DOM。你要知道什么时候用appendChild，什么时候用innerHTML。CSS浮动布局再垃圾，你也得会。

现在呢？跟个B站教程敲敲敲，一个下午一个React组件就跑起来了。

有成就感吗？有。你学到东西了吗？没有。

你学的只是怎么用工具，而不是工具为什么这样设计。

真相2：市场短期内根本不care你的基础

你去招聘网站看看。

JD里写的是什么？"3年React经验"、"熟悉Vue.js"、"Next.js全栈开发"。

没人写"深度理解CSS的层叠"或"精通HTML语义"。

为什么？因为公司现在要的就是快速搭功能。需不需要理解底层？需要，但不着急。等出问题了再说。

所以大家就都卷React了。刷题刷框架，刷个一两年就能月薪30k，谁还费劲学CSS Flexbox呢？

但这就埋下了雷。

真相3：一旦换个环境，你可能就傻了

我见过好几个人，在用React的地方是team leader，到了要用纯JavaScript做底层库的地方，直接懵逼。

也见过人，会React不会Vue的，来个新项目改用Vue，花了两个月才适应。

为什么？因为你不懂底层啊。

你只会用工具，工具一变，你就玩完了。

但如果你懂HTML和CSS呢？你可以快速学任何框架。两周搞定。

让我们剖析：为什么基础能力如此被忽视

根本原因1：框架成功地隐藏了底层复杂性

十年前，你必须理解HTML和CSS才能工作。因为没有别的选择。

现在？Tailwind给了你一千个预制className，你按照demo一套，页面就出来了。React给了你组件模式，你再也不用手动操作DOM。

这是进步。但也是陷阱。

你变成了一个"框架使用者"而不是一个"网页开发者"。

根本原因2：招聘市场的扭曲激励

HR问："你会React吗？"

你说："会。"

HR说："好的，来我们公司月薪30k。"

没人会问："你理解HTML语义吗？"或"你的CSS能不依赖Tailwind吗？"

因为市场短期内只关心能不能快速堆功能。没人关心代码的生命周期。

所以大家都选择走捷径——学框架，忽视基础。这个恶性循环不会自己停止。

根本原因3：学习曲线的错觉

学Framework看起来"立竿见影"：跟个教程敲代码，半小时一个小页面，有成就感。

学HTML/CSS看起来"枯燥无趣"：一个display: flex你可能要花20分钟才能真正理解它。

但这正是认知的陷阱。

前者给你快乐，后者给你能力。我们都更容易被快乐吸引。

招聘市场的"潜规则"就是这样的

我一个朋友在大厂HR。有次我问她："你们招聘怎么考察前端的HTML/CSS水平？"

她说："考什么？我们看GitHub项目，看能不能快速写个组件。"

我说："那如果他的代码在IE里跑不动呢？"

她说："谁还支持IE啊。"

我说："我是问，如果遇到兼容性问题，他懂不懂排查？"

她沉默了。

这就是现状。 没人把基础当回事儿。

JD上写的清清楚楚——"掌握React/Vue/Next.js"。没人写"理解CSS盒模型"或"懂HTML语义化"。

所以大家都卷框架。 你学React，我学Vue，他学Svelte。

但10年的React只能值10年的薪资。而10年的CSS + 3年的框架，可能值15年的薪资。

只不过现在没人看得懂这个账。

你现在已经在做的"自杀式"开发

症状1：CSS永远都写不好

你的项目里是不是这样的：

/* 你写的CSS文件 */
.btn { color: blue; }
.btn-primary { color: red !important; }
.btn-primary-large { color: red !important; font-size: 16px !important; }
.btn-primary-large-dark { color: darkred !important; font-size: 16px !important; }

/* 还是不行，所以直接内联 */
<button style={{ color: 'red', fontSize: '16px' }}>按钮</button>

这就说明——你根本没理解CSS的层叠机制。

你以为!important能解决问题。其实它只是治标不治本的创可贴。

症状2：移动端永远是最后一个才想起来的

"哎呀，忘了适配手机...来，我加个媒体查询。"

然后你就开始加N个@media (max-width: xxx)。

改来改去，最后的CSS是这样的：

@media (max-width:1200px) { /* ... */ }
@media (max-width:992px) { /* ... */ }
@media (max-width:768px) { /* ... */ }
@media (max-width:576px) { /* ... */ }
@media (max-width:480px) { /* ... */ }

/* 还有custom... */
@media (max-width:375px) { /* ... */ }
@media (max-width:320px) { /* ... */ }

你永远在打补丁。

真正懂CSS的人，一开始就用min-width或clamp()，写完了就完了。

症状3：看到Tailwind就觉得自己很专业

"我现在用Tailwind，超牛逼，不用写CSS。"

其实你只是换了一种逃避方式。

class="flex items-center justify-between gap-4 md:gap-8 lg:gap-12 ..."

这和直接写inline style有什么本质区别吗？没有。

你还是没学会Flexbox的核心逻辑，只是把class名换了。

真正的问题是，Tailwind让你觉得自己会CSS了，其实你啥都没学到。

好了，废话不多说，怎么救自己？

第一步：做个真实的项目来"脱瘾"

这周末，给自己出个题：**"不用React，不用任何框架，用纯HTML+CSS+JS写一个真正能用的个人博客。"**

我知道你会很难受。

你会很想装个Next.js。你会很想用Tailwind。但就是不行。

就用记事本写HTML，Notepad++写CSS，原生JS处理交互。

坚持一周。

你会发现：

<!-- 开始你会这样写 -->
<div class="post">
<div class="title">我的文章</div>
<div class="content">
    <div>段落1</div>
    <div>段落2</div>
</div>
</div>

<!-- 写着写着，你会意识到应该这样 -->
<article>
<h1>我的文章</h1>
<section>
    <p>段落1</p>
    <p>段落2</p>
</section>
</article>

这个过程会很痛苦。但痛苦就是学习。

第二步：花一周时间真正搞懂两个东西

2.1 Flexbox（一维布局）

你现在写的大部分页面，95%的布局需求，一个Flexbox就搞定。

.container {
  display: flex;
  justify-content: space-between;  /* 主轴对齐：左右分散 */
  align-items: center;             /* 交叉轴对齐：上下居中 */
  gap: 20px;                       /* 项目间距：20像素 */
}

就这几个属性。理解了它们为什么存在，你就理解了Flexbox。

不是去背官方文档，而是：为什么justify-content有center、space-between、space-around这么多选项？

答案是：因为现实中确实需要这么多对齐方式。

一旦你懂了这个逻辑，Flexbox对你就不神秘了。

2.2 CSS Grid（二维布局）

大部分人觉得Grid复杂，其实就是因为没搞懂它的思路。

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

这一行CSS是什么意思？

• repeat(auto-fit, minmax(300px, 1fr))：尽可能多地放列，但每列最少300px，剩余空间平分

就这。 一个响应式网格。不需要一堆媒体查询。

理解了这个，你就理解了为什么Grid这么强大。

第三步：学会用浏览器的开发者工具

一个你可能忽视的事实：Chrome DevTools里就有你需要的所有答案。

右键检查元素，看看真实的DOM结构。

点击样式面板，看看为什么你的padding没生效。

打开Console，试试直接操作DOM：

// 是的，你可以这样干
document.querySelector('.navbar').style.backgroundColor = 'red';

// 甚至可以添加元素
const newBtn = document.createElement('button');
newBtn.textContent = '新按钮';
document.body.appendChild(newBtn);

很多问题，你只需要在Console里试验一下，就能理解了。

第四步：遇到问题时，用原生API而不是装库

页面需要一个Modal？

不要装rc-dialog或@mui/modal。

用HTML5的<dialog>元素：

<dialog id="modal">
  <p>这是一个对话框</p>
  <button onclick="document.getElementById('modal').close()">关闭</button>
</dialog>

<button onclick="document.getElementById('modal').showModal()">打开</button>

完了。三行HTML。就这么简单。

需要处理Escape键关闭？Chrome已经内置支持了。

需要动画？用CSS就行：

dialog::backdrop {
  background: rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

这叫"了解你的工具"。

最后的话：别等到被砸场子才后悔

我认识一个老哥，前两年因为只会React，被外包公司坑了。

给他分配了个维护老项目的任务——jQuery + Bootstrap写的古董代码。

他进去懵了。

不知道jQuery的选择器，不会用Bootstrap的栅格。连改个按钮样式都得问别人。

最后在项目组的鄙视中待了半年，然后离职了。

现在呢？他花了两个月的时间系统地学HTML、CSS、JavaScript。

现在他说："早知道会这样，我就早点学基础了。"

扪心自问这三个问题：

1. 如果公司不再用React了，改用Vue或Svelte，你能快速上手吗？

如果答案是"需要一个月"，说明你的基础不够扎实。

2. 你的导航栏在iPhone上崩溃过吗？你能不加媒体查询解决它吗？

如果答案是"不能"，说明你的CSS基础有漏洞。

3. 你的表单能支持屏幕阅读器吗？键盘Tab能正常导航吗？

如果答案是"不知道"，说明你根本没想过这些问题。

给你一个建议

这个周末不要刷LeetCode，不要刷React面试题。

打开你最后一个项目，审视一下这些：

• HTML结构是不是真的语义化了？
• CSS能不能在不加媒体查询的情况下响应式？
• 页面能在无框架的纯JS环境里跑吗？

如果都是"不"，那就说明你该学基础了。

框架会变。React从v15到v18，再到Hooks，再到Server Components，这几年已经变了好几回了。

但HTML和CSS的核心，十年没变过。再往后十年也变不了。

选择投资基础，还是投资框架？

这个决定，会直接影响你5年后在哪一个公司，拿多少钱。

这篇文章，我希望能戳醒一些人。

不是说框架不重要。而是说，地基更重要。

地基稳了，什么房子都能盖。

地基不稳，房子再漂亮也迟早要塌。