如何根据URL域名后缀差异应用不同CSS且无需加载额外CSS文件

不需要拆分加载额外CSS文件，可按场景选以下两种成熟方案，兼容性覆盖所有主流浏览器：

• 优先方案：服务端给根节点加域名标识类
  站点渲染HTML时，直接根据当前请求的域名给<html>或<body>标签加对应类名：访问.nl域名输出<html class="site-nl">，访问.be域名输出<html class="site-be">。
  写样式时通用样式正常编写，差异化样式只需要在对应选择器前加上根类名前缀即可，示例：

  /* 两个域名共用的基础样式 */
  .nav {
    padding: 0 20px;
    font-size: 16px;
  }
  /* .nl域名专属样式 */
  .site-nl .nav {
    background: #f1592a;
    color: #fff;
  }
  /* .be域名专属样式 */
  .site-be .nav {
    background: #000;
    color: #fdda24;
  }
  

  该方案无运行时开销，不会出现样式闪烁，是生产环境首选实现。

• 纯静态站适配方案：头部内联JS提前注入标识类
  如果是没有服务端渲染逻辑的纯静态站点，可在页面<head>的最靠前位置插入小段内联JS，在CSS加载前完成域名判断、给根节点加对应类名，避免页面加载时出现样式闪烁，示例代码：

  <head>
    <script>
      // 必须放在CSS引用之前执行
      const htmlEl = document.documentElement;
      const tld = location.hostname.slice(-3);
      if (tld === '.nl') htmlEl.classList.add('site-nl');
      if (tld === '.be') htmlEl.classList.add('site-be');
    </script>
    <!-- 后续引入通用CSS文件即可 -->
    <link rel="stylesheet" href="/static/common.css">
  </head>
  

  后续差异化样式的写法和服务端加类的方案完全一致，所有样式仍维护在同一个CSS文件中，不会产生额外的CSS请求。

注意：不要使用CSS @document 规则实现域名判断，该规则目前仅Firefox浏览器支持，Chrome、Safari、Edge等主流浏览器均未兼容，生产环境使用会直接失效。

内容的提问来源于stack exchange，提问作者DJS