使用ACF字段开发页面margin块时单个块样式被覆盖问题咨询

每次渲染区块都会输出一次针对.margin-block类的样式规则，CSS后定义的同名规则会覆盖前序规则，因此所有区块最终都会生效最后一个区块的margin配置。

方案1：动态生成唯一类名避免冲突 #

给每个区块生成唯一类名后缀，保证每个区块的样式选择器独立，不会互相覆盖：

function render() 
{  
    $margin = get_field('margin');
    // 生成唯一标识作为类名后缀
    $block_unique_id = 'margin-block-' . uniqid();
?>
    <style>
        .<?= $block_unique_id; ?> {
            margin-top: <?= $margin; ?>px;
            background: blue;
        }
        @media (max-width: 1199px) {
            .<?= $block_unique_id; ?> {
                margin-top: calc(<?= $margin; ?>px * 0.53);
            }
        }
    </style>
    <section class="<?= $block_unique_id; ?>"></section>
<?php 
}

方案2：CSS变量+全局公共样式（更推荐） #

无需每次渲染都输出style标签，减少冗余代码，性能更优：

1. 先将公共样式一次性写入主题的style.css文件：

.margin-block {
    margin-top: var(--custom-margin, 0px);
    background: blue;
}
@media (max-width: 1199px) {
    .margin-block {
        margin-top: calc(var(--custom-margin, 0px) * 0.53);
    }
}

2. 修改render函数，通过内联样式传入自定义变量即可：

function render() 
{  
    $margin = get_field('margin');
?>
    <section class="margin-block" style="--custom-margin: <?= esc_attr($margin); ?>px;"></section>
<?php 
}

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