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 本身不行，而是——你可能正踩在这些使用误区

Vue 开发者可能都注意到，UnoCSS 的讨论频率越来越高。它不像 Tailwind 那样有营销声势，不像 Windi 那样起得早，却在 2024 年之后逐渐“渗透”进越来越多的 Vue 项目中。很

前情提要：我是如何变成 Tailwind 重度用户的 作为一个多年写 CSS 的前端，我曾经深陷“命名地狱”： 什么 .container-title, .btn-primary, .form-ite