In this guide, we’ll dive into effective management and reuse of media queries, with a special focus on the custom media queries and how they can be utilised in current web development practices.

To begin with, let’s start with a fundamental overview of media queries.

Media Queries for the responsive layout

Media queries are essential in responsive web design, enabling content to adjust to various factors like screen size, orientation, and user preferences. They act as a conditional mechanism within CSS, applying styles specifically when predefined criteria are satisfied.

The anatomy of a media query includes a media type (like screen or print) and features (such as min-width, width or orientation).

Let’s take a look at the example below (view it in CodePen here).

:root {
  --background-color: grey;
}

body {
  /* BASE STYLE - small viewport */
  background-color: var(--background-color);

  /* medium viewport */
  @media (min-width: 600px) {
    --background-color: blue;
  }

  /* large viewport */
  @media (min-width: 1000px) {
    --background-color: green;
  }

  /* super large viewport */
  @media (min-width: 1500px) {
    --background-color: red;
  }
}

In mobile-first design, the base styles, such as a grey background, are initially set for smaller screens like mobile devices. As the viewport width increases, these styles are then modified for larger screens by updating the background colour through custom properties, tailored to each specific viewport size.

This time, let’s update the heading font size.

:root {
  --background-color: grey;
  --font-size: 32px;
}

body {
  ...
}

h1 {
  font-size: var(--font-size);

  /* large viewport */
  @media (min-width: 1000px) {
    --font-size: 48px;
  }
}

Now reusability issues arise. Let’s imagine a scenario where various components, spread across different files, need to be updated based on the viewport width with the media queries. This requires checking files to identify the specific min-width breakpoints used across the application, which can become quite tedious.

A potential workaround is to document and refer to these breakpoints, but a more efficient solution is to address this programmatically. Before exploring Custom Media Queries, which aren’t yet widely supported in browsers, let’s talk about how SASS Mixins can be utilised to effectively manage this situation.

Note: While media queries excel at adjusting page-level layouts, Container Queries are better suited for component-level styling. Stay tuned for an upcoming article where I’ll explore Container Queries in detail.

With SASS Mixin

In our example, we’ve defined three breakpoints using min-width:

600px
1000px
1500px

SASS Mixin enable us to reuse these breakpoints. For instance:

@mixin medium-viewport {
  @media (min-width: 600px) { @content; }
}

@mixin large-viewport {
  @media (min-width: 1000px) { @content; }
}

@mixin super-large-viewport {
  @media (min-width: 1500px) { @content; }
}

Here @mixin creates three adaptable breakpoints, with @content directive allowing us to insert a block of styles. We apply these mixins as follows (view CodePen here):

:root {
  --background-color: grey;
  --font-size: 32px;
}

body {
  // BASE STYLE - small viewport
  background-color: var(--background-color);

  // medium viewport
 @include medium-viewport {
    --background-color: blue;
  }

  // large viewport
  @include large-viewport {
    --background-color: green;
  }

  // super large viewport
  @include super-large-viewport {
    --background-color: red;
  }
}

h1 {
  font-size: var(--font-size);

  // large viewport
  @include large-viewport {
    --font-size: 48px;
  }
}

And it is produced in CSS like:

:root {
  --background-color: grey;
  --font-size: 32px;
}

body {
  background-color: var(--background-color);
}
@media (min-width: 600px) {
  body {
    --background-color: blue;
  }
}
@media (min-width: 1000px) {
  body {
    --background-color: green;
  }
}
@media (min-width: 1500px) {
  body {
    --background-color: red;
  }
}

h1 {
  font-size: var(--font-size);
}
@media (min-width: 1000px) {
  h1 {
    --font-size: 48px;
  }
}

SASS Mixins help us centralise all breakpoints, facilitating easy reference and reuse.

Next, we’ll explore how Custom Media Queries can offer native CSS solutions for the same challenges. However, as browsers currently don’t support Custom Media Queries, we’ll get a library for assistance. In the next section, we’ll discuss how utilising PostCSS enables the use of Custom Media Queries in our projects.

PostCSS

PostCSS is a powerful tool that uses JavaScript-based plugins to automate routine CSS operations, enhance CSS capabilities, and even polyfill future CSS features. PostCSS transforms CSS with these plugins, allowing developers to write future-proof CSS in current projects.

Based on the data from npm trends, PostCSS has achieved the highest number of downloads in the past month at the time of writing this article (Dec 2023) compared to other pre CSS processors, as indicated by its download graph.

To install PostCSS, run the command below:

yarn add -D postcss postcss-cli
// or
npm i -D postcss postcss-cli

PostCSS Preset Env

PostCSS Preset Env is a plugin for PostCSS that enables you to use modern CSS features while ensuring compatibility with older browsers. It acts as a set of polyfills for future CSS specifications, allowing developers to write CSS using the latest syntax without worrying about browser support issues. Essentially, it helps in bridging the gap between current CSS capabilities and the evolving CSS specifications.

To install it, run the command below:

yarn add -D postcss-preset-env
// or
npm i -D postcss-preset-env

For the configuration in postcss.config.json, check out its official documentation page for more details.

Using PostCSS Preset Env in CodePen

In CodePen, you can easily integrate PostCSS Preset Env into your projects. When setting up a new pen, under the CSS settings, you can specify to use PostCSS and include @use postcss-preset-env; at the top of your CSS. This enables you to write CSS using modern features that PostCSS Preset Env will process.

Integration with NextJS

NextJS has built-in support for PostCSS and by default, you will see that the postcss-preset-env is already configured in postcss.config.json and we can use the Custom Media Queries right away.

With Custom Media Queries

The @custom-media feature in CSS simplifies the use of media queries by allowing you to create reusable aliases, similar to custom properties in CSS native way. These aliases can then be used throughout your stylesheet. Here’s how you can define and use them:

1. Defining Custom Media Queries:

@custom-media --medium-viewport (min-width: 600px);
@custom-media --large-viewport (min-width: 1000px);
@custom-media --super-large-viewport (min-width: 1500px);

Alternatively, you can use range syntax:

@custom-media --medium-viewport (width >= 600px);
@custom-media --large-viewport (width >= 1000px);
@custom-media --super-large-viewport (width >= 1500px);

2. Using Custom Media Queries:

@custom-media --medium-viewport (min-width: 600px);
@custom-media --large-viewport (min-width: 1000px);
@custom-media --super-large-viewport (min-width: 1500px);

:root {
  --background-color: grey;
  --font-size: 32px;
}

body {
 background-color: var(--background-color);

 @media (--medium-viewport) {
   --background-color: blue;
 }

 @media (--large-viewport) {
   --background-color: green;
 }

 @media (--super-large-viewport) {
   --background-color: red;
 }
}

h1 {
 font-size: var(--font-size);

 @media (--large-viewport) {
   --font-size: 48px;
 }
}

Reusability Across Files

As of writing this article, @custom-media directives are not inherently shareable across different CSS files. You typically need to declare them in each file where they’re used. However, CSS preprocessors like SASS or LESS, or tools like PostCSS can facilitate cross-file reuse through a build process.

Using Custom Media Queries with SASS

To manage custom media queries in SASS, you can centralise their definitions in an internal SCSS file, such as internal.scss which we will only include those that won’t be directly complied into CSS output such as SASS functions, placeholders or mixinx.

internal.scss

@custom-media --medium-viewport (width >= 600px);
@custom-media --large-viewport (width >= 1000px);
@custom-media --super-large-viewport (width >= 1500px);

custom-properties.scss

:root {
  --background-color: grey;
  --font-size: 32px;
}

and include this file in each SASS styling files with SASS @use rule.

main.scss

@use './custom-properties';
@use './body';
@use './heading';

body.scss

@use '../path/internal' as *;

body {
  // BASE STYLE - small viewport
  background-color: var(--background-color);

  // medium viewport
  @media (--medium-viewport) {
    --background-color: blue;
  }

  // large viewport
  @media (--large-viewport) {
    --background-color: green;
  }

  // super large viewport
  @media (--super-large-viewport) {
    --background-color: red;
  }
}

heading.scss


@use '../path/internal' as *;

h1 {
  font-size: var(--font-size);

  // large viewport
  @media (--large-viewport) {
    --font-size: 48px;
  }
}

This method allows for a centralised management of custom media queries, making your stylesheets more maintainable and scalable.

I hope this guide provides a clear understanding of how to implement and manage Custom Media Queries efficiently in your CSS and SASS projects.