Responsive Styling Using Attribute Selectors

One challenge with atomized styles based on class names is that it often relies on specific breakpoints to determine the context.

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

Prefixes are usually used to locate each breakpoint:

<div></div>

This works well before adding multiple classes. But when we start adding multiple classes, it is difficult to track which classes are related to which breakpoints and where to add, delete or change content.

<div>
</div>

We can try to improve readability by regrouping:

<div>
</div>

We can also add some special splitters (invalid class names will be ignored):

<div>
</div>

But it still feels confusing and difficult to understand.

We can get a better overview and avoid implementing prefixes by grouping property selectors instead of actual classes:

<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>

These are not collections of classes, but sets of space-separated properties, which we can select using the [attribute~="value"] selector, where ~= requires that the exact word appear in the attribute value to match.

 @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. */
}

This may seem a little weird, but I think converting an atomic class to a property is rather simple (e.g., converting .sm-span-1 to [data-sm~="span-1"] ). Furthermore, the property selector has the same specificity as the class, so we don't lose anything. Moreover, unlike classes, properties can be written without escaping special characters (such as / .:? ).

That's it! Again, this is just an idea to make switching statements easier to write, read and manage in media queries. This is definitely not a suggestion to cancel classes or something like that.

The above is the detailed content of Responsive Styling Using Attribute Selectors. For more information, please follow other related articles on the PHP Chinese website!