CSS 不请求资源，而是 DOM 请求

这是 Harry 的一条很好的推文

所有开发人员都应该牢记的一件简单但重要的事情：CSS 资源（字体、背景图像）不是由您的 CSS 请求的，而是由需要它们的 DOM 节点请求的 [注意：略微简化，但这是正确的思考方式。]

— Harry Roberts (@csswizardry) 2021年9月10日

我喜欢它，因为它正如他所说，这是正确的思考方式。它有助于形成网站工作原理的心智模型。

只是再详细说明一下……

/*
  Just because I'm in the CSS, doesn't mean I'll load!
  In order for `myfont.woff2` to load, a selector needs to 
  set `font-family: 'MyWebFont';` AND something in the DOM
  needs to match that selector for that file to be requested.
*/
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}

/*
  Just because I'm in the CSS, doesn't mean I'll load!
  In order for `whatever.jpg` to load, the selector
  `.some-element` needs to be in the DOM. 
*/
.some-element {
  background-image: url(whatever.jpg);
}