Responsive Styling Using Attribute Selectors

One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context.

<div class="span-12"</div<!-- we want this for small screens --<div class="span-6"</div<!-- we want this for medium screens --<div class="span-4"</div<!-- we want this for large screens --

Its common to use a prefix to target each breakpoint:

<div class="sm-span-12 md-span-6 lg-span-4"</div

This works well until we start adding multiple classes. Thats … Read article “Responsive Styling Using Attribute Selectors”

The post Responsive Styling Using Attribute Selectors appeared first on CSS-Tricks.