1. 首页
  2. css

CSS自定义属性是一个\”改变什么的菜单\”吗?

PPK在\”使用定制属性的两个选项\”中列出了一个有趣的情况,他和Stefan Judis使用定制属性做同样的事情有两种不同的方法。在一种方法中,链接的悬停和焦点样式由两个不同的自定义属性处理,每个状态一个。在另一种方法中,使用一个自定义属性。
两个自定义属性:
.component1 {–linkcolor: red;–hovercolor: blue;}.component2 {–linkcolor: purple;–hovercolor: cyan;}a {color: var(–linkcolor);}a:hover,a:focus {color: var(–hovercolor)}
一个自定义属性:
.component1 a {–componentcolor: red;}.component1 :is(a:hover,a:focus) {–componentcolor: blue;} .component2 a {–componentcolor: purple;}.component2 :is(a:hover,a:focus) {–componentcolor: cyan;} a {color: var(–componentcolor)}
使用两个属性有一种更自然的感觉,比如它非常明确地说明了特定自定义属性的作用。但是使用一个自定义属性有很多优点。不仅仅是为了减少一个自定义属性,而是为了使自定义属性与单个属性1比1匹配。
再进一步,您可以设置一个规则集,每个属性有一个自定义属性,并为其提供一个类似于的菜单。对此,PPK说:
现在您基本上找到了一个定义文件。您不仅可以看到组件的默认样式,还可以看到哪些内容可能会更改,哪些内容不会更改。
也就是说,您可以对任何要更改的内容和任何不需要更改的内容使用自定义属性,你不会的。这当然是一个有趣的方法,我不会责怪任何人去尝试。>.lil-grid {/* will change */–padding: 1rem;padding: var(–padding);–grid-template-columns: 1fr 1fr 1fr;grid-columns: var(–grid-template-columns);/* won\”t change */border: 1px solid #ccc;gap: 1rem;}
我对此犹豫不决的是,这充其量只是暗示了什么会改变,什么不会改变。例如,即使没有在自定义属性中设置,我仍然可以更改内容。稍后,我可以做:
.lil-grid.two-up {grid-columns: 1fr 1fr;}
消除自定义属性用法。类似地,我可以从不更改–grid-template-columns的值,这意味着它看起来像是在不同的情况下发生了变化,但从来没有改变过。
同样,我可以这样做:
.lil-grid.thick {border-width: 3px;}
…尽管我的原始组件规则集暗示边框宽度不会改变,但它是通过修饰符类来改变的。因此,为了使这样的方法起作用,你把它当作一个你坚持的惯例,一个通用的编码标准。不过,我担心这会成为一个麻烦。对于您决定更改的任何声明,都必须返回并将其重构为自定义属性或不是自定义属性。
这让我想到了\”隐式样式化API\”,即HTML和CSS。我们已经在浏览器中有了一个样式API。HTML在浏览器中被转换成DOM,我们用CSS来设计DOM。选择一些东西,设置它们的样式。
也许我们不需要一个菜单来显示您可以或不能设置的样式,因为DOM和CSS已经是这样了。这并不是说一组精心设计的自定义属性不能成为其中的一部分,但它们不需要表示关于哪些更改哪些不更改的强硬规则。
说到隐式样式API,Jim Nielsen在\”Shadow DOM及其对非官方样式API的影响\”中写道:
[…]Shadow DOM打破了我们多年来在web上使用的自文档样式API。
什么样式的API?如果你想在屏幕上设置一个元素的样式,你可以打开开发工具,查看DOM,找到你想要的元素,找到合适的选择器来定位这个元素,编写你的选择器和样式,你已经完成了。
当你停下来思考时,这是非常了不起的。
我想这是我对web组件最大的不满。我并不讨厌shadowdom;事实上,它可能是我最喜欢的web组件。我只是不喜欢我如何为它们发明一个样式化API(即内部摆动的自定义属性,或::part),而不是使用为我们服务了很久的样式化API:DOM+CSS

CSS自定义属性是一个\”改变什么的菜单\”吗? 为WP2原创文章,链接:https://www.wp2.cn/css/css%e8%87%aa%e5%ae%9a%e4%b9%89%e5%b1%9e%e6%80%a7%e6%98%af%e4%b8%80%e4%b8%aa%e6%94%b9%e5%8f%98%e4%bb%80%e4%b9%88%e7%9a%84%e8%8f%9c%e5%8d%95%e5%90%97%ef%bc%9f/