FCSS 2:让 Utility CSS 读起来像原生 CSS

FCSS 2: Utility CSS that reads like CSS

FCSS 2 是一款全新的 Utility CSS 库,它的核心理念是让类名直接对应真实的 CSS 属性。如果你懂 CSS,那你已经会用了。它摒弃了晦涩的缩写,坚持使用如 background-color--blue 这样直观的命名,无需查阅速查表。该库支持 Vite、Next.js、Astro 和 Angular 等主流框架,在构建阶段自动清除未使用的类,确保最终生成的 CSS 体积极小且零运行时开销。无论是开发原型还是生产环境,FCSS 2 都能让样式编写回归简单与直观。

如果你懂 CSS,那你已经会用了 FCSS。
  1. rhdunn

    随着时间的推移,我逐渐在类似 Tailwind/FCSS(一个类对应一个 CSS 样式)和 Bootstrap(类名反映组件)之间找到了平衡。

    具体来说:

    1. 为 HTML 元素/属性提供一套默认的基础样式;

    2. 提供一组用于不同布局的类:grid、flex、masonry 等;

    3. 为不同元素提供样式组合:ol.flex/ul.flex 去除列表类型和内边距,dl.grid 提供网格样式的展示列表等;

    4. 提供辅助类与基础类或元素配合使用:flex.vertical 控制方向;flex.wrap/grid.wrap 实现布局换行;*.centered 实现文本居中等等。

  2. dankobgd

    这帮人就是死活不肯写正常的 CSS。

  3. bemtevi

    这看起来就像老式的 HTML,人们直接在 HTML 代码里写死所有样式!

同日更多故事

2026-10-14