Two ways to load only the CSS you need
Tags: css
Published: 2022-03-18 15:07:57

**Written by [Kingsley Ubah](https://blog.logrocket.com/author/kingsleyubah/)✏️**

CSS, which stands for cascading style sheets, is a styling language used for presenting content on a website.

A style sheet can be included in a web page through various ways; you can embed a `<link>` tag that links to an external CSS file, you can embed the styles inline or inside a `<style>` block within the `<head>` area, or you can use a modern CSS tool like PostCSS to use some extra handy features.

In some cases, however, you might want to use a particular style sheet only if a specified condition is `true`. For example, you might want to apply a mobile-friendly style sheet when viewing a site on a mobile device and apply a desktop version when viewing the site on a desktop screen.

In this tutorial, we'll go over two effective ways, using media queries and PostCSS, to selectively load and apply style sheets as well as review some caveats surrounding each process:

*   [CSS media queries vs. HTML media queries](#css-media-queries-vs-html-media-queries)
*   [Using media queries within the HTML <link> tag to load style sheets](#using-media-queries-within-the-HTML-<link>-tag-to-load style-sheets)
*   [Evaluating nested media queries](#evaluating-nested-media-queries)
*   [PostCSS imports](#postcss-imports)

## CSS media queries vs. HTML media queries

A media query is a CSS technique used to make a website look good on any screen. It uses the `@media` rule to include a block of CSS properties that can be applied only if a condition is `true`.

For example, using the `@media` rule in CSS, you can write a media query to style your text differently in screens wider than 500px and screens lower than 500px:

```css
/* text is blue on screens smaller than 500px */
@media (max-width: 500px) {
    p {
       color: blue;
    }
}

/* text is red on screens larger than 500px */
@media (min-width: 500px) {
    p {
       color: red;
    }
}
```

Media queries are commonly written in style sheets, but you can write media queries directly inside your HTML markup, too.

### Using media queries within the HTML `<link>` tag to load style sheets

The `<link>` tag in HTML establishes a link between an HTML document and an external resource, such as an external style sheet.

Though this element can appear multiple times within a document, it only goes into the `<head>` section. `<link>` is an empty tag, so it can hold multiple attributes that describe to the browser how the linked item relates to the containing document.

When working with complex websites, you can create different CSS files, all tailored to different screen sizes or orientations. Then, using the `media` attribute on the `<link>` tag, you can set up media queries to load corresponding stylesheets.

Consider the following HTML, for example:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <link rel="stylesheet" media='screen and (max-width: 699px)' href="phone.css"/>
  <link rel="stylesheet" media='screen and (min-width: 700px)' href="tablet.css"/>
</head>
<body>
  <p>Text color: Blue in phones, red in tablets, green in even smaller screens</p>
</body>
</html>
```

Here's the style for `phone.css`:

```css
p {
  color: blue;
}
```

And here's the style for `tablet.css`:

```css
p {
  color: red;
}
```

On viewports with a width less than 700px, the stylesheet `phone.css` will apply to the document, making the text turn blue. When the screen width exceeds 699px, `tablet.css` will apply to the document, and the text will become red.

This approach gives you more flexibility when it comes to organizing your stylesheets. So, instead of putting all your styles and media queries inside a single CSS file, you can break them down into different files and load them directly from HTML using media queries.

With HTML media queries, both CSS files are downloaded regardless of whether or not the media query is satisfied. The browser must download all of it so it can reevaluate when orientation changes. However, parsing unwanted CSS by the browser is delayed.

But, with CSS media queries, all style blocks are completely parsed and processed, whether or not the query is satisfied.

### Evaluating nested media queries

When loading a CSS file via HTML `<link>`, the style sheet may contain a media query of its own.

To demonstrate this, we'll nest another media query inside of `phone.css`:

```css
p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}
```

Here, we're saying that the text should turn green when the screen width is less than 200px. When our browser resizes to take up a width of 200px or less, the text turns green.

However, widen the screen to a width higher than 200px, and the text turns back to blue. This demonstrates that the browser will also process any nested media query.

## PostCSS imports

[PostCSS provides an extensive plugin ecosystem](https://blog.logrocket.com/getting-started-with-postcss-in-2019-484262a4d725/) to help CSS authors improve their CSS writing experience. This includes a plugin that can combine style sheets from different CSS files into a single CSS file.

One way to set up PostCSS in your web project is with the PostCSS CLI, and that's what we'll use here. Note, however, that Node and npm are both required to run PostCSS, so ensure you have them installed first.

To begin, let’s create an empty `postcss-demo` folder, then `cd` into the folder and initialize a fresh node project by running `npm init -y` from the command line. This generates a package.json file in our `postcss-demo` folder with default values.

Now, to install PostCSS, the PostCSS CLI, and the PostCSS imports plugin all in one go and save them as dependencies, use this command:

```bash
npm i -D postcss postcss-cli postcss-import
```

PostCSS uses the PostCSS import plugin to bundle together different style sheets from different sources into a single CSS file.

For example, inside the `postcss-demo/src` folder, we can decide to group our style sheets into different folders based on what they do.

Style sheets that reset the document go into the base folder, style sheets that design common UI components (for example, `button.css` for buttons, `card.css` for cards, and `form.css` for forms) go into the components folder, and so on.

Basically, you can organize your stylesheets however you want to.

Then, with a couple of configuration settings and CLI commands, we can bring in all these CSS files we need into one single CSS file for production.

For reference, here's the structure of our project at this point:

```bash
postcss-demo
├── src
│   ├── base
│         ├── base.css
│         ├── reset.css
│   ├── components
│         ├── button.css
│         ├── card.css
│         ├── form.css
│   ├── utilities
│         ├── container.css
│         ├── margin.css
│         ├── padding.css
│   └── style.css
├── node_modules
├── package.json
└── package-lock.json
```

Now that we installed all our dependencies, we must set up a PostCSS config file. To do this, create a `postcss.config.js` file directly in `postcss-demo` (root folder).

Inside this file, we'll register the plugin so we can use it:

```js
module.exports = {
    plugins: [
        require('postcss-import'),
    ]
}
```

Next, inside of the `postcss-demo/src/style.css` file , we are going to instruct PostCSS on what stylesheets to import using the `@import` directive:

```css
@import 'base/base.css';
@import 'base/reset.css';

@import 'components/button.css';
@import 'components/card.css';
@import 'components/form.css';

@import 'utilities/container.css';
@import 'utilities/padding.css';
@import 'utilities/margin.css';
```

Here, we specified the relative paths to all the style sheets that we want to import.

With the directives and the paths all in place, let’s import these different style sheets into `styles.css`. To do that, open the `package.json` file and include the following script under `scripts`:

```json
{
  //
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postcss:watch": "postcss src/style.css --dir public"
  },
  //
}
```

Here, we specify what to do when the script `postcss:watch` runs. In addition to running `postcss`, we tell it to go into our `src` folder, find the `styles.css` file, and then we specified what directory to output the combined style sheets into.

Finally, run the following script:

```bash
npm run postcss:watch
```

Upon successful execution, the script generates a public folder with the file `style.css`. This file contains all the style sheets previously imported into `src/style.css`.

Therefore, any stylesheet imported into `src/styles.css` outputs to `public/style.css`.

## Conclusion

In this tutorial, we discussed in detail two ways to load CSS into a webpage by covering media queries and Post CSS imports.

Media queries can be written both inside CSS and HTML. Inside HTML, the `<link>` tag must be provided with a `media` attribute containing the media query and the URL link to the external CSS file, which applies when the query condition is `true`.

PostCSS, however, uses a special import plugin to bundle together disparate CSS files into one single CSS file.

If you have any questions related to this topic, please let me know in the comments.

Have a great week!

---

## Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, [try LogRocket](https://logrocket.com/signup/).

![LogRocket signup](https://blog.logrocket.com/wp-content/uploads/2019/12/cpu-memory-usage.png)https://logrocket.com/signup/

[LogRocket](https://logrocket.com/signup/) is like a DVR for web and mobile apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — [Start monitoring for free](https://logrocket.com/signup/).