关于 CSS 的全局作用域

html {
  font-family: Roboto, sans-serif;
}

除了某些表单元素之外，您刚刚为网站上的所有文本设置了字体！不错！这可能是您想要做的事情，因为网站上可能有数百个元素，每次都设置font-family会很繁琐且容易出错。

CSS 本质上是全局的。有意为之！

我喜欢 David Khourshid 的说法

您是否曾经停下来想过 为什么 CSS 有全局作用域？也许我们希望使用一致的排版、颜色、大小、间距、布局、过渡等，并使我们的网站和应用程序感觉像一个有凝聚力的整体？

热爱级联，级联是您的朋友。

然而，CSS 的全局性质可能是 CSS 最被人诟病的反功能。有些人真的不喜欢它。我们都知道，编写一条影响整个网站的 CSS 规则很容易，从而破坏了您实际上不想破坏的东西。

两个 CSS 属性走进一家酒吧。

一家完全不同的酒吧里的一把吧凳翻倒了。

— Thomas Fuchs 🎄🕹💾 (@thomasfuchs) 2014 年 7 月 28 日

有 全新的测试类别 来帮助解决这些问题。

作用域样式并不是 CSS-in-JS 工具领域如此受关注和采用的唯一原因，但这是一个重要的原因。有大量的网站根本不直接编写任何 CSS（即使是预处理样式），而是选择 JavaScript 库，在其中样式实际上是在 JavaScript 中编写的。 有一个游乐场 演示了各种选项的语法。这是 styled-components 的工作原理

import React from 'react';
import styled from 'styled-components';

const Container = styled.main`
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  background-color: #f6f9fc;
`;

export default function Login() {
  return (
    <Container>
      ... Some stuff ....
    </Container>
  );
}

实际上有数十种选项，每种选项都以稍微不同的方式执行操作，同时提供略微不同的语法和功能。Vue 甚至 提供 了在 .vue 文件中直接作用域的 CSS

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

不幸的是，<style scoped> 并没有作为原生 Web 平台功能真正实现。但是，有 Shadow DOM，在 Shadow DOM 中，可以将样式块注入模板，并且这些样式将与页面的其他部分隔离

let myElement = document.querySelector('.my-element');

let shadow = myElement.attachShadow({
  mode: 'closed'
});
shadow.innerHTML = `
  <style>
    p { 
      color: red;
    }
  </style>

  <p>Element with Shadow DOM</p>
`;

没有样式会泄漏到该 Shadow DOM 边界内或外。对于寻求这种隔离的人来说，这很酷，但可能很棘手。您可能需要构建 CSS 以包含可以与 Shadow DOM 化的 Web 组件一起导入的某些全局样式，以便在您的网站中实现一些样式一致性。就我个人而言，我希望可以使 Shadow DOM 单向可渗透：样式可以泄漏进来，但在内部定义的样式不能泄漏出去。

CSS-in-JS 只是作用域样式的一种方式。实际上，存在两种方法。您可以将 CSS-in-JS 称为完全隔离，而您可以直接使用完全抽象来编写 CSS

完全抽象可能来自像 Tachyons 这样的项目，该项目为您提供了一组固定的类名来用于样式（Tailwind 类似于它的可配置版本），或一个编程工具（如 Atomizer），它将专门命名的 HTML 类属性转换为具有其所需内容的样式表。

即使在整个网站中 100% 遵守 BEM，也可以被认为是完全的 CSS 隔离，从而解决了全局作用域可能带来的问题。

就我个人而言，我希望看到我们转向 这种未来

当我们编写样式时，我们总是会做出选择。这是一种全局样式吗？我是有意地将此样式泄漏到整个网站吗？或者，我正在编写特定于此组件的 CSS 吗？CSS 将在这两者之间分成两半。特定于组件的样式将被作用域并与组件捆绑在一起，并在需要时使用。

两全其美，就是这样。

总之，很棘手。

问题不在于 CSS in JS。

而是 CSS 的全局作用域。

解决全局作用域，CSS in JS 就会随之而来。

（我不知道“随之而来”是指消失、完全被接受还是进行重大改革。）

（同样，我也不知道“解决全局作用域”意味着什么。）

— ppk 🇪🇺 (@ppk) 2018 年 11 月 28 日

也许这将成为 2019 年最热门的 CSS 主题。