如何注入HTML不影响页面样式？解决Foundation框架样式冲突

我需要为第三方制作可直接复制粘贴到其CMS的页面块，目前用Foundation框架实现样式，但引入Foundation后会破坏原站点的部分样式。想知道如何避免这种冲突，以及是否有支持内联所有CSS的框架或其他替代方案。

当前实现代码：

<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js" crossorigin="anonymous"></script>

<script>
    const fs = document.createElement('link');
    fs.rel = 'stylesheet';
    fs.href = 'https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css';
    fs.crossOrigin = 'anonymous';
    document.getElementsByTagName('head')[0].appendChild(fs);

    const fa = document.createElement('link');
    fa.rel = 'stylesheet';
    fa.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css';
    fa.integrity = 'sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==';
    fa.crossOrigin = 'anonymous';
    fa.referrerPolicy ='no-referrer';
    document.getElementsByTagName('head')[0].appendChild(fa);
</script>
<div class="grid-container padding-top-bottom">
    <div class="grid-x grid-padding-x align-middle">
        <div class="cell medium-6">
            <h1>Hello World</h1>
        </div>
        <div class="cell medium-6" style="padding-right:10px">
            <p>Some other text and images</p>
        </div>
    </div>
</div>

一、避免Foundation干扰原样式的方法 #

1. 给Foundation样式加作用域前缀 #

Foundation支持通过Sass编译自定义作用域，给所有框架样式套一个唯一的父类前缀（比如.my-custom-block），这样只有嵌套在这个类里的元素才会应用Foundation样式，不会污染全局。

• 操作方式：在Foundation的Sass源文件里，把所有框架样式包裹在自定义选择器内，编译后再引入：

.my-custom-block {
  @include foundation-everything;
}

然后把页面块的根元素加上class="my-custom-block"，Foundation的样式就只会影响这个容器内的内容。

2. 用Shadow DOM做完全隔离 #

把页面块放到Shadow DOM里，Shadow DOM内部的样式和外部完全隔离，不会互相影响。用JS创建Shadow根节点，把页面块挂载进去就行：

// 找到页面块容器
const blockContainer = document.querySelector('.grid-container');
// 创建Shadow根
const shadowRoot = blockContainer.attachShadow({ mode: 'open' });
// 把页面内容和需要的样式移入Shadow DOM
shadowRoot.innerHTML = `
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
  <div class="grid-x grid-padding-x align-middle">
    <div class="cell medium-6">
      <h1>Hello World</h1>
    </div>
    <div class="cell medium-6" style="padding-right:10px">
      <p>Some other text and images</p>
    </div>
  </div>
`;
// 注意：初始化Foundation时要确保能访问到Shadow DOM内的元素

3. 只引入需要的Foundation样式 #

别直接引入完整的Foundation CSS，只提取页面块用到的组件（比如网格系统）的样式，然后把这些样式套在自定义作用域类下，减少全局污染的概率。

二、支持内联CSS的框架/替代方案 #

1. Tailwind CSS #

Tailwind是原子化工具类框架，所有样式都是小粒度的类名，你可以直接写在元素上，还能通过工具提取当前页面用到的所有样式，生成极小的CSS代码，直接内联到页面块的style标签里，完全不会和原站点冲突。
示例重构后的代码：

<style>
/* 这里是提取出的当前页面用到的Tailwind样式 */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.items-center { align-items: center; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
</style>
<div class="grid grid-cols-2 items-center py-4">
  <div>
    <h1>Hello World</h1>
  </div>
  <div style="padding-right:10px">
    <p>Some other text and images</p>
  </div>
</div>

2. Tachyons #

和Tailwind类似，Tachyons也是原子化CSS框架，所有样式都是独立的工具类，直接写在元素上就行，也能提取用到的样式内联，不会产生全局样式污染，适合做独立页面块。

3. 纯内联样式+原生布局 #

如果不需要复杂组件，只需要布局，直接用CSS Grid或Flexbox的内联样式实现，完全不用依赖外部框架，从根源上避免冲突。比如：

<div style="display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 1rem 0;">
  <div>
    <h1>Hello World</h1>
  </div>
  <div style="padding-right:10px">
    <p>Some other text and images</p>
  </div>
</div>

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