CSS排版 | 锤子前端

《CSS 单位完全参考手册》

Wed, 02 Sep 2026 13:28:01 GMT

《CSS 单位完全参考手册》

标签：
#前端开发 #CSS #响应式设计 #Web排版 #容器查询 #视口单位 #字体相对单位 #CSS数学函数

总结：

这是一本由 Mykola Ptushchuk 编写的交互式 CSS 单位参考手册，涵盖从基础像素到现代容器查询单位的所有 CSS 度量单位。全书共 7 章，每个单位都配有实时浏览器演示，可在线调整参数观察实际效果，并提供完整 PDF 下载。

文章要点：

1. 全书结构清晰，覆盖七大单位家族：从绝对单位（px）、字体相对单位（em/rem/ch/cap 等）、视口单位（vw/vh 及小/大/动态视口变体）、容器查询单位（cqi/cqw 等）、百分比、数学函数，到角度单位，形成完整的 CSS 度量体系地图。

2. 视口单位家族详解：现代移动端浏览器 UI 会动态收缩/展开，因此视口单位分为默认（等价于大视口）、小视口（sv，假设浏览器控件展开）、大视口（lv，假设控件收起）和动态视口（dv，实时状态）四大家族，解决了 100vh 在移动端全屏布局中常见的"被地址栏遮挡"难题。

3. 容器查询单位让组件真正可移植：cqi/cqw 等单位测量的是组件所在的"查询容器"而非整个视口，使同一个卡片组件在 300px 侧边栏和 700px 主栏中能自动呈现不同布局，无需媒体查询或额外类名，实现了"组件响应自身上下文"而非"响应整个页面"的范式转变。

4. 字体相对单位不止 em/rem：除了常见的 em（当前元素字体大小）和 rem（根元素字体大小），还有 ch（数字 0 的字宽，适合设置最佳阅读行宽如 65ch）、cap（大写字母高度，适合图标与标题对齐）、lh（当前行高作为长度）等精细排版单位，以及对应的根元素变体（rch/rex/rcap 等，2026 年 1 月才在 Firefox 中补齐，至此全浏览器支持）。

5. CSS 数学函数是单位的粘合剂：calc() 可混合不同单位（如 100% - 240px），clamp() 实现流体排版（如 clamp(2rem, 5vw + 1rem, 4rem)），min()/max() 取极值，还有三角函数（sin/cos/tan）可用于无 JS 的圆形布局，指数函数（pow/sqrt）可构建模块化字号比例系统。

6. 实用选型建议：正文用 rem 尊重用户偏好，组件内部比例用 em 保持缩放一致性，line-height 推荐无单位写法（如 1.5）以便作为乘数继承，clamp() 的流体值中务必包含 rem 项以确保缩放无障碍性。

7. 交互式学习体验：每个单位都配有可拖拽、可滑动的实时演示，直接在浏览器中观察单位变化效果，将抽象概念转化为直观体验，并支持下载完整 PDF 离线阅读。

URL：
https://cssunits.com/

CSS Units

CSS Units — The Complete Reference

A complete interactive reference to every CSS measurement unit. From the basics of px and rem to the nuances of svh, dvh, and cqw.

《shadcn/typeset 发布：为HTML内容打造统一排版系统》

Sun, 19 Jul 2026 14:08:25 GMT

《shadcn/typeset 发布：为HTML内容打造统一排版系统》

标签：#前端 #shadcn #CSS排版 #Markdown渲染 #流式内容

总结：
shadcn/typeset 是一个面向 HTML 和 Markdown 的轻量排版系统，只需一个 CSS 文件和一个 typeset 类，即可为博客、文档、聊天流等场景提供统一且可灵活调节的文本样式，专为流式输出场景优化。

文章要点：
1. 开箱即用：只需在容器上添加 typeset 类，内部所有 HTML 元素（标题、段落、列表、表格、代码块等）自动获得优雅排版
2. 三旋钮控制：通过 --typeset-size（字号）、--typeset-leading（行高）、--typeset-flow（间距）三个 CSS 变量，轻松为不同场景（聊天、文档、博客）定制专属节奏
3. 流式友好：设计上避免了新内容块插入时导致已有内容样式重排的问题，非常适合 AI 聊天、流式输出等实时渲染场景
4. 完全可控：文件直接存在于你的项目中，无额外依赖包或配置层，真正做到了"你拥有它"

URL：https://ui.shadcn.com/docs/changelog/2026-07-typeset

Shadcn

July 2026 - Introducing shadcn/typeset

A complete typography system for HTML, from blog posts to streaming chat. One CSS file you own.

《用 Web Components 构建框架无关的设计系统（实践指南）》

Sat, 30 May 2026 00:08:24 GMT

《用 Web Components 构建框架无关的设计系统（实践指南）》

标签：#前端 #WebComponents #设计系统 #Elena #VitePress #CSS #无障碍

总结：
本文是一份超详细的实战教程，手把手教你用 Web Components（通过 Elena 库）和 VitePress 搭建一个框架无关、可发布的设计系统。核心思路是"最低可行层级"——用 web 标准直接写原子组件，避免框架锁定；组件保持"最笨"状态，把复杂业务逻辑留给应用层。文章涵盖 monorepo 结构搭建、Elena 组件脚手架、条件渲染、@scope 样式隔离、CSS 自定义属性主题化，以及通过 JSDoc + Custom Elements Manifest 自动生成 Props 表格的文档工作流。最终产出的是一个可独立发布的组件包 + 可部署的静态文档站。

文章要点：
1. 设计系统从第一天就绑定特定框架（如 React）是"令人费解的"——web 标准组件才是可移植、可组合、经得起时间考验的选择
2. Elena 是"刚好够用的抽象"：处理跨框架的 prop/attribute 同步、事件委托等脏活，但不掩盖 web 标准本质
3. 组件应保持"最笨"——被告知显式状态和内容的声明式组件，比内置复杂状态管理的"聪明"组件更健康
4. 设计决策应该在代码中而非 Figma 中完成：现代色彩空间、相对单位、对数排版比例等，设计工具只能模拟浏览器的很小一部分能力
5. 用 @scope 实现样式隔离 + 组件级 CSS 自定义属性作为"最终层 token"，既保证封装又有主题化回退
6. JSDoc 注释即文档：Elena 自动生成 custom-elements.json，VitePress 通过 data loader 直接渲染 PropsTable 和 ComponentHeader
7. 文档即测试场：在 VitePress 中实时预览组件，确保跨框架可移植性；开发时 concurrent 运行 watch + docs:dev 实现热更新
8. 条件渲染示例：同一个组件通过 href prop 自动切换 button/a 标签，CTA 链接按钮的常见需求也能语义化实现

URL：https://piccalil.li/blog/framework-agnostic-design-systems-part-1/

Piccalilli

Framework-agnostic design systems: a practical approach to web components

Baking framework lock-in into your design system from day one is a recipe for obsolescence. Component documentation is often tedious and out-of-sync with development. Let’s build a documentation-first, framework-agnostic component library using web standards…

《编写可维护CSS的实践指南》

Wed, 06 May 2026 05:40:40 GMT

《编写可维护CSS的实践指南》

标签：#前端 #CSS #TailwindCSS #AtomicCSS #StyleX #CSSModules #CSS_Scoping #CSS_Variables #CSS_Layers #Fluid_Typography #StyleLint #Component_Scoped_CSS

总结：
两位前端老兵Wes Bos和Scott Tolinski畅聊如何让CSS不变成"垃圾场"。核心思路是选一个系统坚持到底、用变量代替硬编码、保持组件独立可移植，并善用现代CSS原生能力（如@scope、@layer、clamp流体排版）减少媒体查询的重复劳动。他们还对比了Tailwind、StyleX、CSS Modules等主流方案，强调好CSS要"有弹性"——能自适应容器变化，而不是在每个断点重写一遍样式。

文章要点：
- **样式别"漏"出去**：好CSS要像密封舱，组件拆下来放在白纸上照样好看；如果样式太宽泛、到处泄漏，代码很快就会腐烂发臭
- **变量是救命稻草**：颜色、字体、阴影全进变量里，别写死数值；不然一年后你会在代码里挖出40种不同的灰色，改起来想哭
- **给CSS分层控权**：用`@layer`把重置、主题、组件样式分楼层，告别"加权重、加!important"的 specificity 战争，心里踏实多了
- **原生作用域来了**：`@scope`已经登陆主流浏览器，甚至可以把`<style>`直接丢进组件里自动限定范围，Vue和Svelte用户听了直呼"终于等到你"
- **流体排版超省心**：用`clamp()`做字体大小，让文字在手机和桌面之间丝滑缩放，很多时候连媒体查询都可以省了
- **Tailwind vs CSS Modules vs StyleX**：Tailwind像速记本，上手快但类名堆成山；CSS Modules稳扎稳打；StyleX走构建时优化路线，但媒体查询语法劝退不少人——选哪个不重要，关键是别混着用
- **上StyleLint当"坏人"**：让工具自动拦住"用硬编码颜色"这类操作，比你在PR里当挑刺老哥体面多了，团队协作必备

文章URL：https://syntax.fm/show/999/writing-maintainable-css/transcript

syntax.fm

Transcript: Writing Maintainable CSS - Syntax #999