Masonry layout can be made with the CSS columns property, and with Tailwind, that's just a couple CSS classes. CSS Columns is about as old as flexbox, but it never seemed to be as popular.

CSS的任何新特性从诞生到被浏览器普遍支持，要经历漫长的周期，而CSS Houdini开放了底层接口，让开发者直接接触、开发原生的CSS效果，实现更为复杂、流畅的效果和动画。

在文字内容排版这块，CSS 是计算机领域中无可争议的霸主气，什么 SVG 什么 canvas 根本就是望尘莫及。

Card-style components are pretty much still a thing these days, and there are many ways to make a bunch of identical rectangles look prettier.

CSS 方法论是一种面向 CSS、由个人和组织设计、已被诸多项目检验且公认有效的最佳实践。这些方法论都会涉及结构化的命名约定，并且在组织 CSS 时可提供相应的指南，从而提升代码的性能、可读性以及可维护性。

根据 State of CSS 2020 的调查结果显示，目前使用最多的五种分别为：BEM、ACSS、OOCSS、SMACSS、ITCSS。

在开发时，一直希望有一种原生的CSS方式来裁剪图片，并将其定位在我需要的任何方向。

在这篇文章中，将带领大家了解Jake Archibald在今年年初提出的新的CSS属性object-view-box。它允许我们裁剪或调整被替换的HTML元素，就像一个 <img/> 或 <video>。

Learn how Linaria, Airbnb’s newest choice for web styling, improved both developer experience and web performance.

1. 自适应尺寸的尽量用 CSS 实现
2. 三角的实现推荐 clip-path，更容易理解
3. 充分考虑实现的可维护性，比如能用一个变量，就不要用两个变量，CSS 同样如此
4. 叠加一层半透明的黑色可以实现图像变暗
5. 图像变暗还可以通过 CSS 滤镜 brightness 实现
6. 未来还可以通过颜色混合 color-mix 来实现，可以提前了解一下
7. 背景混合模式可以让颜色叠加根据自然

Atomic CSS 一詞出自於 Yahoo! 的工程師 Thierry Koblentz（以下簡稱 TK）在 2013 年所發表的 Challenging CSS Best Practices。

在看這篇文章之前，我們可以先看一下 2022 年 2 月的這篇專訪：The Making of Atomic CSS: An Interview With Thierry Koblentz，在這篇裡面提及了更多 Atomic CSS 出現的背景以及早期在 Yahoo! 內部的應用。

根據文章中的說法，有天他的主管來問他有沒有一種可以不改到 stylesheet 但還是可以動到畫面的方法，因為他想避免把東西改壞。

於是 TK 就做了一個「utility-sheet」，讓工程師可以在不改到 stylesheet 的狀況下依然能改到前端的樣式。聽起來這個 utility-sheet 應該就是一個靜態的 CSS 檔案，然後裡面有著各種 utility class。

接著過了幾年，一個工程主管問他是否能「全部都用 utility class」來改寫 Yahoo! 的首頁，在當時可以說是先驅中的先驅了。

很多页面布局，特别是那种工具类的、比如编辑器、可视化平台等，为了充分的利用屏幕空间，都会提供拖拽调节各个分栏尺寸的功能，比如像 vscode。

抽象开来，其实就是这样一个布局，左右、上下都是可以调整的；纯 CSS 也是可以实现这样的效果。

这段时间一直忙于“洋芋田富文本编辑器”的开发，没空写技术文章；现在开发基本完成，里面一些有意思的技术点值得整理出来分享给大家。

工作中发现前端 CSS 的使用五花八门，这么多种类，我们该怎么选呢，作者分享了一种在现在微前端趋势下，在中后台项目中最好用的，开发体验最佳组合方式。

在 SF 问答区中闲逛，发现了一个有趣的问题”css变量数字怎么转换为字符串使用？“。在 CSS 中如果要将文本内容展示到页面中，一般来说都是通过伪元素的 content 来实现，然而目前看到的这个提问并没有得到期望的结果。

本文从构造组件库的角度，分析了 React 生态下各类 CSS 样式方案，并基于不同场景，给出选择合适方案的推荐。

自从著名设计师 Ethan Marcotte（@beep）在 A List Apart上发表了一篇名为《 Responsive Web Design》的文章之后，响应式网页设计（RWD，即 Responsive Web Design）的身影就出现在了公众面前。自此就有了响应式 Web 设计这个概念。从提出这个概念到今天已经有十多年的时间了。在这十多年来，CSS 也发生了巨大的变化，新增了很多新的特性，近两年尤其如此，近两年尤其如此（详细请参阅《2022 年的 CSS》一文）。这些变化，对于响应式Web设计的开发也有较大的改变。Una Kravets（@Una）大神，在2021的Google I/O 大会上的分享，提出 新的响应式：组件驱动式 Web 设计。Web 生态即将进入响应式 Web 设计的新时代，并转变我们对其含义的看法，也为会Web设计带来新的变化。组件式驱动 Web 设计（或开发）也被称为是下一代响应式 Web 设计（或开发）。

今天我们将讨论一个容易被忽略却很重要的话题：CSS国际化。