Class Grouping & Named Media Queries Spec Suggestion

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Class Grouping & Named Media Queries Spec Suggestion

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





Reply | Threaded
Open this post in threaded view
|

Re: Class Grouping & Named Media Queries Spec Suggestion

Darby Manning
I think this is a really great concept, I’d love to implement this on upcoming projects.


Darby Manning
Creative Little Director
Email: [hidden email]
Mobile: 07788 268 646

Phone: 01483 452 752   /   Office Hours 9.30am - 5.30pm

Address: 21-22 Woodbridge Meadows, Guildford, GU1 1BA



This email & any attachment is intended for the named contact(s), or any person authorised to receive it on their behalf so should be treated as confidential. The recipient may not disclose this message or any attachment to anyone else without authorisation, doing so may be unlawful. If this email is received in error please notify the sender urgently & delete this message from your system. Any view expressed by the sender of this message or any attachment may be personal & may not represent the view held by Creative Little Dots. All emails to & from Creative Little Dots are recorded, may be monitored & scanned for viruses, we accept no liability for viruses or other material introduced with this message.

Creative Little Dots Ltd   |   Companies House Reg: 9066408   |   Vat Registration: 188664940