如何避免在多个Web组件上重复CSS属性
我正在使用 Web 组件进行构建，没有任何第三方框架。
我的几个组件中有普通的
button {
appearance: none;
background: none;
border: none;
...
}
你们认为当前最好且广泛支持的避免这种重复的方法是什么？
我查看了可构造样式表，但它在我的主要浏览器 Firefox 中的支持很差。我还考虑过 CSS 自定义属性，但这仍然会导致 background、border 等属性到处重复，对吗？
I'm building with Web Component without any 3rd-party framework.
And I have vanilla <button> in several of my components, and I have to reset EVERY ONE of them before I do my custom styling on them because resetting it once at a root level doesn't work since the properties involved are not one of inheritable styles that pierce through shadow dom:
button {
appearance: none;
background: none;
border: none;
...
}
What do you all think is the current best and widely supported way to avoid this repetition?
I have looked at the Constructable Stylesheets, but it's poorly supported in Firefox, which is my main browser. I also considered CSS Custom Properties, but that would still lead to repetition of background, border etc. properties everywhere right?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
可构造的样式表旨在解决您遇到的这个问题。
已经有自第73版（2020年2月）以来，Firefox中可构造的样式图的实验支持。不知道为什么它已经超过2年没有离开实验功能状态。
您可以通过设置
layout.css.constyable-stylesheets.enabledtrueinininof：config。在不再实验之前，您可以使用 polyfill 。
接下来有助于您减少冗余的下一件事称为 css模块脚本。从该页面：
不幸的是，这也尚未降落在Firefox（请参阅此跟踪错误 ），但是已经。
Constructable stylesheets are designed to address, among others, exactly this problem you're having.
There has been experimental support for constructable stylesheets in Firefox since version 73 (Feb. 2020). Not sure why it hasn't left the experimental feature status for more than 2 years now.
You can enable it by setting
layout.css.constructable-stylesheets.enabledtotrueinabout:config.Until it's no longer experimental, you can use a polyfill.
The next thing that will help you reduce redundancy is called CSS Module Scripts. From that page:
Unfortunately, that also hasn't landed in Firefox yet (see this tracking bug), but already in the specification.
但是如果我用reactjs对 tailwind css 说。 Reactjs 专门为消除重复而设计。
请检查 tailwind 文档，其中甚至您可以为任何内容分配自定义 css 函数。
But if i say to tailwind css with reactjs. Reactjs specially designed to remove repetition.
Please check tailwind docs where even you can assign your custom css function for anything.