CSS基础

大家好!😁。 Code Review 的时候，我最怕看到什么？ 不是复杂的算法，也不是什么正则。而是明明一个 HTML 标签就能搞定的事，有人非要写几百行 JS + CSS 去重新发明轮子 。 前几天

我带团队Review一个新项目的启动代码时，有一个文件我一定会仔细看，那就是CSS Reset。 它虽然不起眼，但却像我们整个CSS架构的地基。地基打不好，上面的楼盖得再漂亮，也容易出问题，后期维护成

在2025年的今天，我想说一句可能会被很多同行喷的话🤯： 我个人认为，以styled-components和Emotion为代表的、在运行时注入样式的CSS-in-JS技术，从长远来看，是一项失败的技

写了这么多年CSS，我发现有个现象很有意思：有些我们每天都在用的属性，我们以为自己很熟，但其实可能只用了它10%的功能。background-image就是最典型的一个。 大部分时候，我们对它的使用场

前端技术的发展速度，快得让人焦虑。我们每天都在学习新的框架、新的工具，但同样重要的，是关注语言本身——CSS和JavaScript——正在发生的变化。 这篇文章，不想聊那些你已经熟练掌握的技术。我们来

我们做前端的，为了让网站在不同设备上都好看，天天都在和“响应式”打交道。其中最常见的一个场景，就是处理字体大小。 通常，我们是这么做的： 这套代码能用，但它有一个问题：字体大小的变化，是“跳跃式”的，

咱们做前端的，每天都有不可避免的事情—— CSS样式覆盖。 场景你一定不陌生：项目越来越大，引入了UI组件库，又来了几个新同事，大家写的CSS文件越来越多。突然有一天，产品经理让你改一个按钮的颜色，你

干前端的，天天都在跟CSS打交道。以前我们写CSS，要是遇到复杂点的场景，比如“当一个卡片里有图片时，给卡片加个边框”，或者要给一长串不同的标题应用同一个样式，那代码写起来，说实话，挺啰嗦的。 但时代

在现代Web开发中，色彩的表现力是用户体验的核心要素之一。长久以来，RGB（Red, Green, Blue）及其包含透明度的RGBA一直是CSS中最主流的色彩表示方法。然而，RGB本质上是一种设备依

在前端开发的世界里，我们常常听到一句话：“这效果实现不了？上JS啊！” 于是，为了一个简单的Tabs切换、一个元素的显隐，我们可能就引入了一个库，或者手写了一段DOM操作。 但随着CSS语言的飞速发展

作为一名前端开发者，我们一定都遇到过这样的需求：实现一个占满整个屏幕的欢迎页、弹窗蒙层或者一个 fixed 定位的底部菜单。 直觉告诉我们，这很简单，给它一个 `height: 100vh` 就行了

是的，你没看错。 我们在一个组件中，只用了 2 行 CSS，就还原出了 Apple Vision Pro 系统里的「毛玻璃 UI 效果」，还带一定程度的背景滚动模糊、亮度抬升、高斯柔光——核心关键点就

在一次前端性能优化项目中，我们发现仅仅一个 icon font 文件就高达 20MB。这不仅拖慢了首屏加载速度，还极大地浪费了带宽。最终，我们将它压缩到了 10KB，而不影响任何功能表现。 这一过程背

我们最近刚把一个后台系统从 element-plus 切成了完全自研组件，CSS 层统一用 Tailwind。全员同意设计稿一致性提升了，但代码里怨言开始冒出来。 这篇文章不讲原理，直接上代码对比和团

不是我杠。是真的用了一段时间之后，我开始怀疑，我到底是在写样式，还是在拼？？ Inline-style 再丑，好歹直觉。Tailwind，看起来像原子，其实是一坨。 👀背景：Tailwind 被当成“

🔥先说结论：我已经全面弃用 iconfont，只用 SVG 用了 6 年 iconfont，直到一次 icon 闪退 + 一个 retina 模糊问题，我怒转 SVG。现在回看，我只想说：一切都晚了。

起因：一句话的“需求” 一天，产品在设计稿下方评论说： 我本来以为就是加个 transition，小事一桩。 上线后产品说：“嗯，这个感觉不错耶，那我们把所有按钮 hover 都做成统一的吧。” 我知

我不是第一次用 CSS Module，但这次是真的被坑麻了。 写这篇不是为了教你怎么用，而是想提醒一下——别轻信“模块化样式管理更高级”这种话，现实比你想象得复杂多了。 起因：领导说“咱们不要用 st

说到编程语言，谁的名字最响？ JavaScript？控制一切前端交互； Python？AI 和爬虫首选； Rust？系统级新贵，性能炸裂。 而 CSS 呢？ 不客气地说，CSS 一直在“技术鄙视链”的

Tailwind CSS 被誉为“实用优先的 CSS 框架”，然而在实际项目中，很多团队用了 Tailwind，效率却不升反降。 不是因为 Tailwind 本身不行，而是——你可能正踩在这些使用误区