使用属性选择器的响应式样式

基于类名的原子化样式的一个挑战在于，它通常依赖于特定断点来确定上下文。

<div></div>
<div></div>
<div></div>

通常使用前缀来定位每个断点：

<div></div>

这在添加多个类之前效果很好。但是当我们开始添加多个类时，就很难追踪哪些类与哪些断点相关，以及在哪里添加、删除或更改内容。

<div>
</div>

我们可以尝试通过重新分组来提高可读性：

<div>
</div>

我们还可以添加一些特殊的分割符（无效的类名将被忽略）：

<div>
</div>

但这仍然感觉很混乱，难以理解。

我们可以通过对属性选择器进行分组而不是实际的类来获得更好的概览并避免实现前缀：

<div data-lg="span-4 font-size-xl font-weight-700" data-md="span-6 font-size-xl font-weight-500" data-sm="span-12 font-size-lg"></div>

这些不是类的集合，而是一组空格分隔的属性，我们可以使用[attribute~="value"]选择器来选择它们，其中~=要求精确的单词出现在属性值中才能匹配。

@media (min-width: 0) {
 [data-sm~="span-1"] { /*...*/ }
 [data-sm~="span-2"] { /*...*/ }
 /* etc. */
}
@media (min-width: 30rem) {
 [data-md~="span-1"] { /*...*/ }
 [data-md~="span-2"] { /*...*/ }
 /* etc. */
}
@media (min-width: 60rem) {
 [data-lg~="span-1"] { /*...*/ }
 [data-lg~="span-2"] { /*...*/ }
 /* etc. */
}

这可能看起来有点奇怪，但我认为将原子类转换为属性相当简单（例如，.sm-span-1 转换为 [data-sm~="span-1"]）。此外，属性选择器的特异性与类相同，因此我们不会损失任何东西。而且，与类不同，属性可以在不转义特殊字符（如 / .:?）的情况下编写。

就是这样！再次强调，这只是一个想法，旨在使在媒体查询中切换声明更容易编写、阅读和管理。这绝对不是要取消类或类似内容的建议。

以上是使用属性选择器的响应式样式的详细内容。更多信息请关注PHP中文网其他相关文章！