如何实现可在行内样式使用的自定义CSS简写属性如margin-horizontal？

原生CSS目前不支持直接定义你想要的这种自定义简写属性，无法直接在style属性内写margin-horizontal: 50px就自动映射到margin-left和margin-right，但有几种可落地的替代方案：

方案1：纯原生CSS自定义变量实现（最推荐，无额外依赖） #

你只需要先在全局定义通用样式规则，后续用CSS变量传递参数即可，行内写法和你预期的几乎一致：

/* 全局通用规则，提前定义一次即可 */
* {
  margin-left: var(--margin-horizontal, initial);
  margin-right: var(--margin-horizontal, initial);
}

行内调用时只需要给自定义变量赋值：

<div style="--margin-horizontal: 50px"></div>

这个方案是纯原生CSS支持的，兼容性极好，唯一区别是属性名前需要加--前缀符合CSS变量的规范。

方案2：CSS预处理器实现 #

如果你的项目用了Sass/ Less等预处理器，可以写一个mixin批量生成属性，适合写在CSS文件里的场景：

// Sass 示例mixin
@mixin margin-horizontal($val) {
  margin-left: $val;
  margin-right: $val;
}

// 调用方式
.element {
  @include margin-horizontal(50px);
}

这个方案是编译阶段生成原生CSS，不需要运行时依赖，但不能直接写在行内style属性中。

方案3：JS运行时解析（仅适合非要用margin-horizontal原生写法的场景） #

如果必须严格按照你写的style="margin-horizontal: 50px"格式调用，可以用JS全局遍历处理自定义属性：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[style*="margin-horizontal"]').forEach(el => {
    const styleContent = el.getAttribute('style');
    const matchRes = styleContent.match(/margin-horizontal\s*:\s*([^;]+)/);
    if (!matchRes) return;
    const marginVal = matchRes[1].trim();
    el.style.marginLeft = marginVal;
    el.style.marginRight = marginVal;
    // 清理无效的自定义属性
    el.setAttribute('style', styleContent.replace(/margin-horizontal\s*:\s*[^;]+;?/, ''));
  })
})

后续就可以直接用你预期的写法调用，缺点是依赖JS运行，元素数量多的话会有微小的性能开销。

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