PHP代码片段因相同class名样式互影响，如何保留同名解决冲突？

问题场景 #

当通过PHP引入以下文件时，div1类的样式会相互冲突：

header.php #

<div class="div1">
<!-- Header content -->
</div>
<style>
.div1 {
    /* Styles for div1 in the header */
}
</style>

footer.php #

<div class="div1">
<!-- Footer content -->
</div>
<style>
.div1 {
    /* Styles for div1 in the footer */
}
</style>

index.php #

<?php include 'header.php'; ?>
<?php include 'footer.php'; ?>

需求：保留div1类名，实现样式隔离，不修改类名或添加嵌套父类选择器。

可行方案 #

1. 使用原生Scoped CSS #

在style标签添加scoped属性，浏览器会自动为当前模块内的元素生成唯一属性，并修改CSS选择器匹配该属性，实现样式隔离。

修改header.php：

<div class="div1">
<!-- Header content -->
</div>
<style scoped>
.div1 {
    /* Styles for div1 in the header */
}
</style>

修改footer.php：

<div class="div1">
<!-- Footer content -->
</div>
<style scoped>
.div1 {
    /* Styles for div1 in the footer */
}
</style>

浏览器会自动将样式转换为类似.div1[data-v-xxxxxx]的形式，两个模块的属性值不同，样式不会冲突。

2. 使用Shadow DOM #

将每个模块的内容放入Shadow DOM中，Shadow DOM内部的CSS样式完全独立于外部文档，不会产生冲突。

修改header.php：

<div id="header-shadow-host"></div>
<script>
const host = document.getElementById('header-shadow-host');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<div class="div1">
<!-- Header content -->
</div>
<style>
.div1 {
    /* Styles for div1 in the header */
}
</style>
`;
</script>

修改footer.php：

<div id="footer-shadow-host"></div>
<script>
const host = document.getElementById('footer-shadow-host');
const shadowRoot = host.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<div class="div1">
<!-- Footer content -->
</div>
<style>
.div1 {
    /* Styles for div1 in the footer */
}
</style>
`;
</script>

每个Shadow DOM内部的样式仅作用于自身内容，外部无法影响，内部也不会污染外部。

3. 使用CSS Modules（需构建工具支持） #

如果项目使用Webpack等构建工具，可通过CSS Modules实现自动类名哈希。编写代码时仍使用div1，构建工具会为每个模块的类名添加唯一哈希后缀（如div1_abc123），实现样式隔离。

示例（PHP项目需适配构建流程）：

/* header.module.css */
.div1 {
    /* Styles for div1 in the header */
}

<!-- 编译后的header.php -->
<div class="div1_abc123">
<!-- Header content -->
</div>

footer模块同理，构建后两个div1会被替换为不同的哈希类名，避免冲突。

4. 内联样式（应急方案） #

将样式直接写在div的style属性中，每个元素的样式独立，不会冲突。但样式过多时维护性差，仅适合简单场景。

示例header.php：

<div class="div1" style="/* Styles for div1 in the header */">
<!-- Header content -->
</div>

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