Class Grouping & Named Media Queries Spec Suggestion
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:
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:
@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.
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