Class Grouping & Named Media Queries Spec Suggestion

 Hi,

Currently the usage of media queries in modern web development can often lead to considerable code bloat due to setting  the same properties over and over using breakpoint based class names.

The front-end team here at Creative Little Dots had a brainstorm about how these issues could be resolved in a future version of CSS and we would like to present the idea of class grouping and named media queries. Here’s an example of a typical stylesheet today:



<!-- HTML —>

<p class=”text-left-phone text-right-tablet text-center-laptop text-bold-laptop”></p>



/* CSS Rules */

..text-left {
    text-align: start;
}
..text-center {
    text-align: center;
}
..text-right {
    text-align: end;
}
..text-bold {
    font-weight: bold;
}



/* Mobile */

@media only screen and (max-width: 40rem) {

    .text-left-phone {
        text-align: start;
    }
 
    .text-center-phone {
        text-align: center;
    }
 
    .text-right-phone {
        text-align: end;
    }
 
    .text-bold-phone {
        font-weight: bold
    }
}



/* Tablet */

@media only screen and (min-width: 40.0625rem) {

    .text-left-tablet {
        text-align: start;
    }
 
    .text-center-tablet {
        text-align: center;
    }
 
    .text-right-tablet {
        text-align: end;
    }
 
    .text-bold-tablet {
        font-weight: bold;
    }
}



/* Laptop */
 
@media only screen and (min-width: 64.0625rem) {
 
    .text-left-latptop {
        text-align: start;
    }
 
    .text-center-latptop {
        text-align: center;
    }
 
    .text-right-latptop {
        text-align: end;
    }
 
    .text-bold-latptop {
        font-weight: bold;
    }
}


This is all very well but does seem unnecessary considering all we are doing in this instance is allowing classes to be toggled at different screen sizes. With class grouping we can actually limit classes to a media query very much like one would create an array in other languages:


<div class=" my-breakpoint[my-class my-other-class] "></div>


This can be better demonstrated by replicating the above present day example using class grouping and named media queries, like so:



<!-- HTML —>

<p class=”phone[text-left] tablet[text-right] laptop[text-center text-bold]”></p>



/* CSS Rules */
..text-left {
    text-align: start;
}
..text-center {
    text-align: center;
}
..text-right {
    text-align: end;
}
..text-bold {
    font-weight: bold;
}



/* Mobile */

@media (name: phone) only screen and (max-width: 40rem);


/* Tablet */

@media(name: tablet) only screen and (min-width: 40.0625rem);


/* Laptop */

@media (name: laptop) only screen and (min-width: 64.0625rem);



I’m not sure if anything like this have been proposed before but it seems like a very useful concept that could be used without breaking the current spec. Media queries could still accept content as well for complete backwards compatibility.

Let me know what you think.


- Matt Pilott

Received on Monday, 25 January 2016 18:00:08 UTC