在开发时，一直希望有一种原生的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国际化。

Tailwind CSS offers out of the box support for theming your project. With Tailwind CSS, you can offer multicolor theme feature in your project with few lines of code.

某日，群里有这样一个问题，如何实现这样的表盘刻度，这其实是个挺有意思的问题，方法也有很多。

本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。

如何使一个div的部分区域变透明而其他部分模糊掉？

小小的 Reset，大大的学问~