AI 摘要：作者以 Element UI → Element Plus 的亲历为主线，讨论开源项目从诞生、演化到走向结束与再生的路径，强调“为自己所需而作”的初心、拥抱社区标准与透明治理，借助 RFC（Request for Comments）、BDFL（Benevolent Dictator For Life）式决策、语义化版本（Semantic Versioning, SemVer）与渐进式迁移（Progressive Migration）等方法，在 Trade-Off（权衡）中小步快跑、稳步迭代；同时用产品化思维和良好社区运营，尽可能延长项目生命周期，并在必要时坦然宣布进入 maintenance mode，给出替代与迁移方案，促成“死与新生”的良性循环。

你知道你现在可以在 CSS 使用 height: stretch 吗？也适用于 width。

Frontend Masters

Stretch

Did you know you can do height: stretch now in CSS? Works for width too. Dave Rupert The other day [Dave] shared a link to the new stretch keyword in CSS – and I saw a lot of questions about how it’s different from 100% (or 100vh when doing full-screen layouts).…

AI 摘要：这是一篇 PostCSS 12 年演进的复盘：从 Autoprefixer 的诞生到 PostCSS 成为被 Google、Wikipedia、Tailwind 等采用、月下载量 4 亿的开源基础设施。作者围绕产品定位、插件策略、性能架构、版本演进、社区与生态、与竞品相处以及维护者防止倦怠的实践，给出一套贯穿前端工具链建设与开源运营的可复用方法论：以用户可用为先、以架构赢性能、以默认值减少配置、以人情味促协作、以渐进式变更稳生态。

1. 历史与定位：从 Autoprefixer 到 PostCSS
• 痛点出发：不想手写厂商前缀，于是做了 Autoprefixer，并需要一个更强的 CSS 解析器与 API（应用程序接口）。
• 启发与决策：Rework 无法满足“保留原始空白”等需求，遂自研 PostCSS；教训“−1”：对大用户更合作，给原项目提交原型的机会。
• 推广与文档同等重要：投入与写代码相当的时间做 README 与对外沟通，主动向 Webpack 推荐用 PostCSS 做解析器，带来关键增长。
• 定位转变：原打算做“幕后”框架，但终端用户对新工具敏感、对插件友好，因此把 PostCSS 做成对用户可见的“插件平台”，帮助新 CSS 工具降低接入阻力。

2. 产品形态与插件策略（Lesson 1）
• 默认可用优于“纯插件”：PostCSS 默认“无作为”导致用户被插件选择淹没；对比 Lightning CSS 内置常用能力与 Vite 的“开箱即用”，体现“约定优于配置”。
• 插件架构的收益：小内核易维护；拆分团队各司其职；利于做 CSS 工具实验（如 easing 渐变转为 CSSWG 草案）；满足项目定制；开发工具需要灵活性。

3. 时机与竞争：不怕“来得晚”，要快验真（Lesson 2、Lesson 7）
• “太晚”的误判：Chrome 停增前缀与 CSS Houdini 的宣布，都未让 Autoprefixer 与 PostCSS 失去价值；实际落地速度与有效性才是市场检验。
• 行动原则：尽快做原型、看真实结果，不被“新技术将取代一切”的叙事带偏。
• 与“竞品”为友：与 Sass 协作、统一术语与基准；公开推荐 CSSTree、Lightning CSS 等新工具；在开源中，“竞争者”可以分担你的免费支持压力。

4. 性能与架构：架构比语言更重要（Lesson 3）
• 关键洞见：PostCSS 用 JS（JavaScript）比 C++ 的 Sass 快 4 倍，原因在于架构与内存管理，而非语言本身。
• 架构实践：采用令牌化-解析器（tokenizer-parser）拆分，80% 解析时间在令牌化，便于聚焦优化；用正则快速跳转定位结束符等微优化。
• 内存优化：CSSTree 通过对象复用减少垃圾回收（GC）次数，曾快于 PostCSS ≈1.5 倍；避免“Rust/C++ 一定更快”的二元迷思。

5. 维护者健康：防止问题复发，避免倦怠（Lesson 4）
• 问题“闭环”：用户误用导致的 issue，要加类型与运行时校验、警告与文档澄清，防止重复踩坑；文档常是最后手段，但 FAQ 有效减压。
• 实例：用户把 parser 当插件使用，直接在代码里给出警告信息，显著降低重复问题。
• 反内耗机制：尽快响应、邀请提问者补文档或提修复 PR；开源是协作，不是单向免费支持。被忽视的感觉才是用户最大挫败。

6. 版本演进与迁移策略（Lesson 5）
• “跳-合”节奏：首个大版本标记废弃，下一个大版本再移除；尽量提供迁移指南（如 PostCSS 8），并维护生态迁移进度 Wiki。
• 重大变更前置沟通：提前发布变更提案、开反馈通道，协调 Webpack、Vite 等生态构件的配合升级。

7. 塑形生态：用最佳实践驱动一致性（Lesson 6）
• 统一模板与规范：插件脚手架强制“输入/输出”示例，制定插件与运行器指南；文档示例会塑造社区习惯。
• 学习路径清晰化：提供从零到一的分步指南，甚至涵盖“如何对抗开发挫败”的内容。

8. 社区运营与人情味（Lesson 8）
• 人的纽带：给插件作者寄明信片/贴纸、出差拜访活跃贡献者，建立真实连接。
• 品牌风格：Autoprefixer 的“骑士”与 PostCSS 的“炼金术”主题，让项目更有趣、更易形成文化认同。

9. 开源维护小贴士
• 尽量无构建：库用原生 JS 源码配合手写 .d.ts 或 TypeDoc，方便直接安装分支测试与 node_modules 内即时调试复制。
• 静态站点别用 React：项目文档与官网用 Astro 或纯静态 HTML，维护成本更低、更稳。

evilmartians.com

What we learned from creating PostCSS—Martian Chronicles, Evil Martians’ team blog

We share what have we learned creating PostCSS and the huge ecosystem around it. Get 8 key lessons from Andrey Sitnik, creator of PostCSS.

AI 摘要：本文以头像菜单为例，系统介绍了锚点定位（Anchor Positioning）如何让元素基于另一元素进行纯 CSS 定位，涵盖锚点与目标的关联（anchor-name、position-anchor、position），两种定位思维模型：基于九宫格的 position-area 与基于边缘的 anchor()（仅用于 inset 系列），并演示了使用逻辑方向、溢出切换（position-try）与 calc() 的实战技巧，帮助开发者在无需 JavaScript 的情况下实现响应式菜单、气泡与工具提示。

1. 基本概念与关联关系
• 角色定义：被依附的元素为锚点（anchor），需要定位的元素为目标（target）。
• 建立关联：在锚点上声明 anchor-name（如 --profile-button），在目标上使用 position-anchor 指向该锚点名。
• 定位前置：目标需设置 position: absolute 或 fixed 才能启用锚点定位。

2. position-area：基于九宫格的定位模型
• 九宫格心智模型：以锚点为中心，在其包含块（containing block）上选定九宫格中的区域放置目标。
• 优先使用逻辑方向：以 block-start/block-end、inline-start/inline-end 与 center 取代物理方向（top/right/bottom/left），以适配不同书写模式与语言。
• 对齐与溢出：当目标比锚点宽时，使用 block-end span-inline-end 可实现“下方左对齐且向行尾延展”；类似地，可用 block-end center、block-start inline-end 等组合控制位置。
• 响应式回退：通过 position-try 指定备选位置，当首选位置空间不足时自动切换（如窄屏从向右溢出改为向左溢出）。

3. anchor()：基于边缘的精确定位
• 使用范围：仅可用于 inset 系列属性（物理：top/right/bottom/left；逻辑：inset-block-start/end、inset-inline-start/end；以及 inset-block、inset-inline 简写）。
• 边缘对齐：例如让菜单左边与头像左边对齐、菜单顶与头像底对齐，可写为 left: anchor(left), top: anchor(bottom)；逻辑等价为 inset-inline-start: anchor(start), inset-block-start: anchor(end)。
• 指定锚点：anchor() 可接收可选的锚点名（如 anchor(--profile-button left)），默认使用 position-anchor 指定的锚点。
• 配合 calc()：可将 anchor() 与 calc() 组合做细粒度偏移（如对齐去除内边距影响：inset-inline-start: calc(anchor(start) + 1.25em)）。

4. 实战场景与模式选择
• 导航头像菜单：点击头像（可结合 Popover API）后，菜单基于头像精准定位且纯 CSS 控制。
• 桌面与移动自适应：桌面可向 inline-end 溢出，移动端通过 position-try 切换为 inline-start 溢出，减少遮挡与视口溢出。
• 心智模型选型：喜欢“区域网格”可用 position-area；偏好“边缘数值”可用 anchor()。两者都能完成相同目标。

5. 规范与资源指引
• 推荐实践：优先使用逻辑属性与方向，增强无障碍与国际化适配；目标元素需 absolute/fixed 定位。
• 学习与实验：文中提供了 CodePen 示例用于自由尝试；更多详细属性与值可参阅 MDN 文档；还有教学游戏 Anchoreum。
• 反馈与社区：作者与 WebKit 福音师在 BlueSky/Mastodon 等渠道互动；遇到问题可提交 WebKit Bug 报告。

WebKit

A gentle introduction to anchor positioning

Anchor positioning allows you to place an element on the page based on where another element is.