深入解析CSS中的自定义属性

另外，自定义属性，按钮组件仍是没有语境且不能完全与header 组件解耦，
按钮组件简单的说申明：无论它们现状如何，我要自己的风格基于这些自定义属性；
header 组件：我要设置这些属性值，由我的子代来确定和如何使用它们。

主要的区别是，该扩展由按钮组件选择，并轻易消除例外情况。

下面的演示说明了语境样式的链接和按钮在网站的标题及内容区

创建例外
如果像.promo的组件加到header，然后buttons又加到.promo 里面，使其看起来像一个正常按钮，而不是标题按钮。

如果你用子代选择器，那你将要给header buttons写一大串样式，而且还不能影响promo buttons，混乱，容易出错，而且容易失控的数量会增加：

CSS Code复制内容到剪贴板

/* Regular button styles. */  

.Button { }   

/* Button styles that are different when inside the header. */  

.Header .Button { }   

/* Undo button styles in the header that are also in promo. */  

.Header .Promo .Button { }   

使用自定义属性，你可以简单的更新任何你想要的新按钮属性，或重置他们回默认样式，无视这些例外，改变的方式总是相同的。   

.Promo {   

  --Button-backgroundColor: initial;   

  --Button-borderColor: initial;   

  --Button-color: initial;   

}   

跟React学
当我第一次探索自定义属性语境样式的时候，我很怀疑自己。像前面说的，我倾向于喜欢组件自己定义自己的变化，而不是任何属性都继承自父元素。

但是有一件事，动摇了我在CSS自定义属性的观点，那就是React的props 的

React的props依然是动态的，DOM-scoped variables，他们继承，允许组件上下文关联，在React，父组件将数据传递给子组件，然后子组件定义props，他们愿意接受和使用它们。这种建筑模型通常被称为one-way data flow。

尽管自定义组件是全新的未测试的领域，我认为React model 给了成功的信心，一个复杂的系统可以建立在属性继承——此外，DOM-scoped variables 是一个非常有用的设计模式。

最大限度的减少副作用
CSS 自定义属性继承默认，在某些情况下，这导致组件的样式可能没有达到他们的预期。

在文章上一节中，我提到可以重置单个属性，这可以防止未知值被应用到元素的子元素：

CSS Code复制内容到剪贴板

.MyComponent {   

  --propertyName: initial;   

}   

尽管这不是规范的一部分，——正在讨论属性附[2]，这个可以用来重置所有自定义属性，如果你想白名单几个属性，你可以将他们单独继承，其他的正常即可：

CSS Code复制内容到剪贴板

.MyComponent {   

  /* Resets all custom properties. */  

  --: initial;   

  /* Whitelists these individual custom properties */  

  --someProperty: inherit;   

  --someOtherProperty: inherit;   

}  

管理全局names
如果你一直关注自定义属性，那你可能已经注意到本身带有components-specific前缀的组件，如--Button-backgroundColor.

与CSS 大多数名字一样，自定义属性是全局，很是有可能将正在使用命名与其他开发团队的名称产生冲突。

有一个简单的方法可以避免这个问题，就是坚持命名约定，我现在团队就是这么做的。

对于更复杂的项目，你可以考虑像CSS模块 localifies所有全局名称，而且他们最近也表示有兴趣支持自定义属性。

结束语
如果你在阅读这篇文章之前，不熟悉CSS 自定义属性，我希望你能给他一个机会。如果你还在怀疑他的必要性，希望我能改变你的想法。

我敢肯定，自定义属性能给CSS带来一系列的强大的功能和面貌，它还有更多的优势等待我们去发现。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!