Using @import in Cascading Style Sheets

The How and Why of Importing External Style Sheets

Businessman using computer mouse and typing on laptop
Paul Bradbury/OJO Images/Getty Images

There are a number of ways that you can apply CSS styles to a webpage, including both external style sheets or even inline styles. If you are using an external style sheet, which is the recommended way to  dictate the look and feel of an HTML document, one approach is to use @import.

The @import rule allows you to important external style sheets in your document - either into an HTML page or even into other CSS documents.

Breaking lots of styles into a number of smaller, focused files (one for layout, one for typography, one for images, etc.) can sometimes make it easier to manage those files and the various style that they contain. If you want to enjoy that benefit, then importing those various files is what you will need to do to get them all working for your web page's display.

Importing Into HTML

To use the @import rule in your HTML, you would add the following to the <head> of the document:
  @import url("/styles/default.css");

This code would now import this style sheet for use on this HTML page and you could manage all of your styles in that one file. The downside to important stylesheets this way is that this method does not allow for parallel downloads. The page must download an entire stylesheet before it moves on to the rest of the page, including any other CSS files you are importing using this method.This will have a negative effect on your page's speed and download performance.

Considering how important page performance is to today's website success, this drawback alone may be a reason why you would want to avoid using @import.

An Alternative Approach

As an alternative to using @import in your HTML, you can link to that CSS file like this:

<link href="/styles/default.css" rel="stylesheet">

This functions very similar to the @import in that it allows you to manage all of your CSS from one central location / file, but this method is preferable from a download perspective.  If you do still want to segment different kinds of styles into separate files, you can continue to do so and use the @import functionality inside your master CSS file. This means that your external CSS files can still be managed individually, but since they all import into one master CSS, performance is improved.

Importing Into CSS

Using the <link> code example above would bring the "default.css" file to use on your HTML page. Inside that CSS file you would have your various page styles. You can have all those styles detailed on that one page, or you can use @import to break them apart for easier management.  Once again, let's say that we are using 4 separate CSS files  - one for layout, one for typography, and one for images. The fourth file is our "master" file which is what our page links to (for this example, this is "default.css"). At the very top of that master CSS file we can add the rules shown below:

@import url('/styles/layout.css');
@import url('/styles/type.css');
@import url('/styles/images.css');

Note that these rules must be before all other content in your CSS file for them to work. You cannot have any other CSS style before these import rules!

Underneath those import rules, you can add whatever other CSS styles you want to have in your default sheet. When that main CSS file is loaded, it will first import these separate files and add their styles to the very top of the stylesheet. It will then have all your other styles underneath these imported ones, creating the full CSS file that the web browser will use to display your site. You get the benefit of managing smaller, more focused files while still having a single stylesheet linked to in that HTML.

Using @import for Media Queries

One thing you may consider doing it separating your website's media queries for responsive website styles into a separate file.

Because these responsive styles can be confusing when seen alongside your site's other style rules, having the on their own in a different file may be attractive. One concern with this approach is that, since your @import rules must be first, this means that your media queries would be loaded before the rest of your site's styles. When creating a mobile-first responsive site that takes performance into account, this is likely to be a problem.For this reason, it is suggested that you do not section your site's responsive styles separately and use @import to bring them into your site. Yes, there may seem to be benefits of doing so, but the drawbacks outweigh those benefits.

Do I Need To Use @import?

No, you do not. Many sites simply display all of their main styles inside one file and, as large as that file may be, it is managed that way (this is how I do it in my own work). If you find @import helpful, then it can be part of your workflow. Otherwise, you can safely build webpages that <link> your single stylesheet of all your CSS rules.

Browser Support

Very, very old browsers have trouble with some of these @import rules, but these browsers are unlikely to be a problem for you these days. This is especially true now that the end of life deadline for older versions of Internet Explorer has passed. Ultimately, if you decide to use @import rules in your HTML or CSS, you should not run into issues with legacy versions of web browsers unless you have some strange need to support incredibly old versions of IE. 

Original article by Jennifer Krynin. Edited by Jeremy Girard on 4/2/17