CSS 代码片段

I’ve been thinking about the kind of CSS I write by default when I start a new project.

我一直在思考我在开始新项目时默认编写的 CSS 类型。

Some of it is habitual. I now use logical properties automatically. It took me a while to rewire my brain, but now seeing left or top in a style sheet looks wrong to me.

其中一些是习惯使然。我现在自动使用 逻辑属性。我花了一段时间来重塑我的思维，但现在在样式表中看到 left 或 top 对我来说看起来是错误的。

When I mentioned this recently, I had some pushback from people wondering why you’d bother using logical properites if you never planned to translate the website into a language with a different writing system. I pointed out that even if you don’t plan to translate a web page, a user may still choose to. Using logical properties helps them. From that perspective, it’s kind of like using user preference queries.

当我最近提到这一点时，有人质疑为什么如果你从未计划将网站翻译成具有不同书写系统的语言，仍然要使用逻辑属性。我指出，即使 你 不打算翻译网页，用户仍然可以选择翻译。使用逻辑属性对他们有帮助。从这个角度来看，这有点像使用用户偏好查询。

That’s something else I use by default now. If I’ve got any animations or transitions in my CSS, I wrap them in prefers-reduced-motion: no-preference query.

这是我现在默认使用的另一件事。如果我的 CSS 中有任何动画或过渡，我会将它们包裹在 prefers-reduced-motion: no-preference 查询中。

For instance, I’m a huge fan of view transitions and I enable them by default on every new project, but I do it like this:

例如，我是视图过渡的超级粉丝，我在每个新项目中默认启用它们，但我这样做：

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

I’ll usually have a prefers-color-scheme query for dark mode too. This is often quite straightforward if I’m using custom properties for colours, something else I’m doing habitually. And now I’m starting to use OKLCH for those colours, even if they start as hexadecimal values.

我通常也会有一个 prefers-color-scheme 查询来支持暗模式。如果我使用自定义属性来定义颜色，这通常相当简单，这也是我习惯性地在做的事情。现在我开始使用 OKLCH 来定义这些颜色，即使它们最初是十六进制值。

Custom properties are something else I reach for a lot, though I try to avoid premature optimisation. Generally I wait until I spot a value I’m using more than two or three times in a stylesheet; then I convert it to a custom property.

自定义属性是我经常使用的另一项内容，尽管我尽量避免过早优化。通常我...