From dcbacfe7cec32a1eb40fe8b6fbd38fb953f636e2 Mon Sep 17 00:00:00 2001 From: yuler Date: Mon, 6 Jul 2026 15:38:49 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=93=9D=20Add=20modern=20CSS=20design?= =?UTF-8?q?=20patterns=20post?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summarize 37signals Campfire CSS article covering OKLCH, custom properties, :has(), and responsive patterns. Co-authored-by: Cursor --- src/content/posts/2026/modern-css-design.md | 183 ++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 src/content/posts/2026/modern-css-design.md diff --git a/src/content/posts/2026/modern-css-design.md b/src/content/posts/2026/modern-css-design.md new file mode 100644 index 0000000..461e982 --- /dev/null +++ b/src/content/posts/2026/modern-css-design.md @@ -0,0 +1,183 @@ +--- +title: '现代 CSS 设计模式笔记' +description: '重读 37signals Campfire CSS 文章的笔记，涵盖 OKLCH 配色、自定义属性模式、:has()、基于 ch 的响应式断点与 any-hover 等实践。' +tags: ["CSS", "OKLCH", "Campfire"] +date: 2026-07-06 +--- + +今天重新阅读一些 basecamp 的这篇文章 [modern-css-patterns-and-techniques-in-campfire](https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/) + +做个简单的总结, 看看是否可以提取一下共用的 css 或者 design.md 方便后续项目直接使用 + +## oklch + +文章提及到使用 [oklch](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) 来定义颜色 + +- Lightness(亮度): perceptual lightness ranging from 0%—100%; +- Chroma(色度): the amount of color from pure grey to full saturation, 0–0.5; +- Hue(色相): the color’s angle on the color wheel, 0–360deg. + +```css +:root { + --lch-gray: 96% 0.005 96; + --lch-gray-dark: 92% 0.005 96; + --lch-gray-darker: 75% 0.005 96; +} +``` + +带来的好处是，更方便人类的阅读和使用, 我们可以通过调整 lightness 来改变颜色的深浅，而不改变颜色的色相，这在 RGB 模式很难做到 + +先定义纯 lch 的颜色值，然后通过定义抽象的自定义属性通过 oklch 方法 + +```css +--color-border: oklch(var(--lch-gray)); +--color-border-dark: oklch(var(--lch-gray-dark)); +--color-border-darker: oklch(var(--lch-gray-darker)); +``` + +同时 oklch 可以很方便的添加 alpha 透明度 + +```css +--color-link-50: oklch(var(--lch-blue) / 0.5); +``` + +## Custom Properties + +** Declared vs. Fallback values** + +```css +/* Declared */ +.btn { + --btn-background: var(--color-text-reversed); + --btn-border-color: var(--color-border); + --btn-border-radius: 2em; + --btn-border-size: 1px; + --btn-color: var(--color-text); + --btn-padding: 0.5em 1.1em; + + align-items: center; + background-color: var(--btn-background); + border-radius: var(--btn-border-radius); + border: var(--btn-border-size) solid var(--btn-border-color); + color: var(--btn-color); + display: inline-flex; + gap: 0.5em; + justify-content: center; + padding: var(--btn-padding); +} + +/* Fallback values */ +.btn { + align-items: center; + background-color: var(--btn-background, var(--color-text-reversed)); + border-radius: var(--btn-border-radius); + border: var(--btn-border-size, 2em) solid var(--btn-border-color, var(--color-border)); + color: var(--btn-color, var(--color-text)); + display: inline-flex; + gap: 0.5em; + justify-content: center; + padding: var(--btn-padding, 0.5em 1.1em); +} +``` + +通过 fallback 模式，这样可以让我们的代码看起来更紧凑的同时也能通过自定义属性暴露出变量 + +我们该如何决定何时使用自定义属性呢？ +1. 每当我们需要在多个地方使用相同的值时（遵循 DRY 原则） +2. 当我们知道某个值将会被更改时 + +**Variants** + +当我们知道自己需要更改某些值来创建元素的变体时，我们可以把自定义属性看作一个 CSS 类的迷你 API。我们可以通过更改自定义属性的值来声明变体，而无需重新定义属性。 + +```css +/* Variants */ + +.btn--reversed { + --btn-background: var(--color-text); +} + +.btn--negative { + --btn-background: var(--color-negative); +} + +:is(.btn--reversed, .btn--negative) { + --btn-color: var(--color-text-reversed); +} + +.btn--borderless { + --btn-border-color: transparent; +} + +.btn--success { + animation: success 1s ease-out; + + img { + animation: zoom-fade 300ms ease-out; + } +} +``` + +## CSS :has() + +你可以把 :has() 看作是查询元素内部内容的一种方式。 + +Example 1 + +```erb +<%= form.button class: "btn btn--reversed center", type: "submit" do %> + <%= image_tag "check.svg", aria: { hidden: "true" }, size: 20 %> + Save changes +<% end %> +``` + +```css +&:where(:has(.for-screen-reader):has(img)) { + --btn-border-radius: 50%; + --btn-padding: 0; + + aspect-ratio: 1; + block-size: var(--btn-size); + display: grid; + inline-size: var(--btn-size); + place-items: center; + + > * { + grid-area: 1/1; + } +} +``` + +只需将任何内容放入 `.btn` 里，剩下的就交给它处理吧。不再需要像以前一样的 `.btn--circle-icon` 或 `.btn--icon-and-text` 这样的实用类 + +文章中还列举了一些其他例子， 总的来说，以前需要配合服务端或者 js 来做的，现在 CSS 就直接能处理了，而且使用 has 就能直接完成了 + +## Responsive design + +在 Campfire 中，零个基于 viewport 像素判定「移动端」的断点，布局随内容与字体缩放自适应。不是通过 @media 查询 viewports 比多少小就断言他是移动端设备, 他只有一个断点 + +```css +/* narrower than 100 characters */ +@media (max-width: 100ch) { + ... +} +``` + +在 CSS 中，ch 是一个相对单位，1ch 等于当前字体中数字 “0” 的宽度。因此，100ch 粗略地可以理解为“100 个字符的宽度”。 + +这种方式替换了传统的 `min-width: 768px` 这样的断点, 不仅架构简单，而且更符合基于内容排版的思想 + +## any-hover + +文章还提到 any-hover 来检测是否支持 hover 属性，举了一个 iPad 的例子， 如果 iPad 连接上 Magic Keyboard 的话就会匹配 hover 相关样式 + +```css +@media (any-hover: hover) { + &:where(:not(:active):hover) { + /* hover effect */ + } +} + +@media (any-hover: hover) and (pointer: fine) { /* hover 才显示 */ } +@media (any-hover: none) and (pointer: coarse) { /* 常显 */ } +``` \ No newline at end of file From b40c27639a477205dad822fc791066c8daaececc Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 6 Jul 2026 07:39:32 +0000 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=92=84=20Apply=20format:fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/posts/2026/modern-css-design.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/content/posts/2026/modern-css-design.md b/src/content/posts/2026/modern-css-design.md index 461e982..c2f4875 100644 --- a/src/content/posts/2026/modern-css-design.md +++ b/src/content/posts/2026/modern-css-design.md @@ -7,7 +7,7 @@ date: 2026-07-06 今天重新阅读一些 basecamp 的这篇文章 [modern-css-patterns-and-techniques-in-campfire](https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/) -做个简单的总结, 看看是否可以提取一下共用的 css 或者 design.md 方便后续项目直接使用 +做个简单的总结，看看是否可以提取一下共用的 css 或者 design.md 方便后续项目直接使用 ## oklch @@ -25,7 +25,7 @@ date: 2026-07-06 } ``` -带来的好处是，更方便人类的阅读和使用, 我们可以通过调整 lightness 来改变颜色的深浅，而不改变颜色的色相，这在 RGB 模式很难做到 +带来的好处是，更方便人类的阅读和使用，我们可以通过调整 lightness 来改变颜色的深浅，而不改变颜色的色相，这在 RGB 模式很难做到 先定义纯 lch 的颜色值，然后通过定义抽象的自定义属性通过 oklch 方法 @@ -43,7 +43,7 @@ date: 2026-07-06 ## Custom Properties -** Declared vs. Fallback values** +**Declared vs. Fallback values** ```css /* Declared */ @@ -83,6 +83,7 @@ date: 2026-07-06 通过 fallback 模式，这样可以让我们的代码看起来更紧凑的同时也能通过自定义属性暴露出变量 我们该如何决定何时使用自定义属性呢？ + 1. 每当我们需要在多个地方使用相同的值时（遵循 DRY 原则） 2. 当我们知道某个值将会被更改时 @@ -150,11 +151,11 @@ Example 1 只需将任何内容放入 `.btn` 里，剩下的就交给它处理吧。不再需要像以前一样的 `.btn--circle-icon` 或 `.btn--icon-and-text` 这样的实用类 -文章中还列举了一些其他例子， 总的来说，以前需要配合服务端或者 js 来做的，现在 CSS 就直接能处理了，而且使用 has 就能直接完成了 +文章中还列举了一些其他例子，总的来说，以前需要配合服务端或者 js 来做的，现在 CSS 就直接能处理了，而且使用 has 就能直接完成了 ## Responsive design -在 Campfire 中，零个基于 viewport 像素判定「移动端」的断点，布局随内容与字体缩放自适应。不是通过 @media 查询 viewports 比多少小就断言他是移动端设备, 他只有一个断点 +在 Campfire 中，零个基于 viewport 像素判定「移动端」的断点，布局随内容与字体缩放自适应。不是通过 @media 查询 viewports 比多少小就断言他是移动端设备，他只有一个断点 ```css /* narrower than 100 characters */ @@ -163,13 +164,13 @@ Example 1 } ``` -在 CSS 中，ch 是一个相对单位，1ch 等于当前字体中数字 “0” 的宽度。因此，100ch 粗略地可以理解为“100 个字符的宽度”。 +在 CSS 中，ch 是一个相对单位，1ch 等于当前字体中数字“0”的宽度。因此，100ch 粗略地可以理解为“100 个字符的宽度”。 -这种方式替换了传统的 `min-width: 768px` 这样的断点, 不仅架构简单，而且更符合基于内容排版的思想 +这种方式替换了传统的 `min-width: 768px` 这样的断点，不仅架构简单，而且更符合基于内容排版的思想 ## any-hover -文章还提到 any-hover 来检测是否支持 hover 属性，举了一个 iPad 的例子， 如果 iPad 连接上 Magic Keyboard 的话就会匹配 hover 相关样式 +文章还提到 any-hover 来检测是否支持 hover 属性，举了一个 iPad 的例子，如果 iPad 连接上 Magic Keyboard 的话就会匹配 hover 相关样式 ```css @media (any-hover: hover) { @@ -180,4 +181,4 @@ Example 1 @media (any-hover: hover) and (pointer: fine) { /* hover 才显示 */ } @media (any-hover: none) and (pointer: coarse) { /* 常显 */ } -``` \ No newline at end of file +``` From 66fa4fe75e9eca36fd295581622aeef8e729b1db Mon Sep 17 00:00:00 2001 From: yuler Date: Mon, 6 Jul 2026 15:45:49 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=A9=B9=20Address=20PR=20review=20feed?= =?UTF-8?q?back=20on=20modern=20CSS=20post?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix fallback CSS example, add missing --lch-blue, bold markdown, and responsive section wording. Co-authored-by: Cursor --- src/content/posts/2026/modern-css-design.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/content/posts/2026/modern-css-design.md b/src/content/posts/2026/modern-css-design.md index c2f4875..988e886 100644 --- a/src/content/posts/2026/modern-css-design.md +++ b/src/content/posts/2026/modern-css-design.md @@ -22,6 +22,7 @@ date: 2026-07-06 --lch-gray: 96% 0.005 96; --lch-gray-dark: 92% 0.005 96; --lch-gray-darker: 75% 0.005 96; + --lch-blue: 54% 0.23 255; } ``` @@ -70,8 +71,8 @@ date: 2026-07-06 .btn { align-items: center; background-color: var(--btn-background, var(--color-text-reversed)); - border-radius: var(--btn-border-radius); - border: var(--btn-border-size, 2em) solid var(--btn-border-color, var(--color-border)); + border-radius: var(--btn-border-radius, 2em); + border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-border)); color: var(--btn-color, var(--color-text)); display: inline-flex; gap: 0.5em; @@ -155,7 +156,7 @@ Example 1 ## Responsive design -在 Campfire 中，零个基于 viewport 像素判定「移动端」的断点，布局随内容与字体缩放自适应。不是通过 @media 查询 viewports 比多少小就断言他是移动端设备，他只有一个断点 +在 Campfire 中，没有基于 viewport 像素判定「移动端」的断点，布局随内容与字体缩放自适应。不是通过 @media 查询 viewport 宽度小于多少就断言它是移动端设备，它只有一个断点： ```css /* narrower than 100 characters */ From 7fa1258ce251f57a0b4212d968b9dfe15553a128 Mon Sep 17 00:00:00 2001 From: yuler Date: Mon, 6 Jul 2026 16:01:58 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=93=9D=20Update=20post=20metadata=20a?= =?UTF-8?q?nd=20screenshot=20URL?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/screenshot.mjs | 2 +- src/content/posts/2026/modern-css-design.md | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/scripts/screenshot.mjs b/scripts/screenshot.mjs index c28f8df..938410e 100644 --- a/scripts/screenshot.mjs +++ b/scripts/screenshot.mjs @@ -13,7 +13,7 @@ export const OUT_DIR = 'screenshots' export const PAGES = [ { url: '/', slug: 'home' }, { url: '/posts', slug: 'posts' }, - { url: '/posts/hi', slug: 'posts-hi' }, + { url: '/posts/2004/hi', slug: 'posts-hi' }, { url: '/workouts', slug: 'workouts' }, { url: '/workouts/17883105335', slug: 'workouts-17883105335' }, { url: '/thoughts', slug: 'thoughts' }, diff --git a/src/content/posts/2026/modern-css-design.md b/src/content/posts/2026/modern-css-design.md index 988e886..e978002 100644 --- a/src/content/posts/2026/modern-css-design.md +++ b/src/content/posts/2026/modern-css-design.md @@ -1,7 +1,8 @@ --- -title: '现代 CSS 设计模式笔记' +title: 'Modern CSS Design' +slug: 'modern-css-design' description: '重读 37signals Campfire CSS 文章的笔记，涵盖 OKLCH 配色、自定义属性模式、:has()、基于 ch 的响应式断点与 any-hover 等实践。' -tags: ["CSS", "OKLCH", "Campfire"] +tags: ["CSS", "OKLCH", "Design"] date: 2026-07-06 ---