CSS Import

Cascading Style Sheets (CSS) are the design foundation of most websites. It describes how the elements should be rendered on screen. This is where the CSS @import at-rule steps in to help. The @import rule tells the CSS engine to import an external style sheet into another style sheet. This allows style rules from a style sheet to be added to another style sheet. This rule can also be used in combination with media queries to import a style sheet based on the device type. The @import style rule is beneficial because it can be used to avoid duplicate style rules and even import specific styles based on the accessing device. The @import rule must be at the top of the style sheet.

@import "style.css"; /* using a string */
@import url("rebrand.css"); /* using a URL */
@import "print.css" print; /* using a media query */

The problem is not in the complexity of the language or the difficulty of coding. The problem lies in the sheer volume of information needed to create even an average sized website. If you consider the amount of HTML that is needed to create even simple design features and then extrapolate that out to numerous pages with designs and information on each page, the task can be daunting.

This large amount of information can also be difficult to stay on top of. If you want to copy and paste certain rules, then you have to go back to find them. Even if you do a great job of organizing your CSS, the sheer size of the website and amount of information can be completely overwhelming. The @import rule is a great way to organize a large amount of style rules.

The positives of CSS @import

The best thing about CSS @import is that it saves you time and frustration. If you are not using @import then you are, at the very least, going back to old CSS to copy and paste the information that you need or managing all style rules in a single style sheet. This can be time consuming, frustrating, and even difficult as your website grows larger and larger and the code becomes more difficult to find. Even worse is having duplicate styles leading to a larger style sheet that can lower the performance of the website.

CSS @import saves a lot of time, but it also provides great accuracy. Rather than potentially writing poor style rules or copying and pasting the wrong information, all you have to do is import the rules that are present. This is simple and very accurate, especially compared to the alternatives. It can also be used to separate your style rules into separate style sheets, for example:

@import "buttons.css";
@import "links.css";
@import "forms.css";

On top of those positives, here is a more detailed list of why CSS @import is a great web development tool:

• It saves time even compared to the copy and paste approach or the adding links approach.
• It is difficult to make a mistake with the @import method.
• It provides organizational help when building a medium to large website. There is so much information and coding involved that any help matters.
• You can create as many CSS files as you want to import. You could create a primary file and then have additional files like typography or images.
• It is a free, time-saving, simple and effective web building tool.

The negatives of CSS @import

The only real negative associated with CSS @import is that it can add page loading time to your website if not used during the build process. When a page is loading with the @import command, it has to go read and import the style sheet specified in the rule and then apply it to the current page. This does not take much time, and even the largest of websites that use the @import command will not experience a noticeable difference in loading time. However, for the bots that use loading time to calculate your search ranking, this could move you up or down the coveted search engine list.

Alternatives to CSS @import

There are a few alternatives to CSS @import. Some were previously mentioned, but will be brought up here with a little more detail. While there are alternatives, CSS @import is the quickest and most accurate way to bring already existing styles from one style sheet to another. The alternatives are as follows:

• Links: Using a <link> tag to link your CSS files within the header of your HTML allows CSS files to be downloaded rather than called. This means that the browser does not have to go to another style sheet to import it, instead it can be downloaded on the spot. Linking is an advantage because it does not increase loading times, but there are some negatives to it as well. The biggest is that if you want to link to your CSS file, you have to know where it is. If you do not, and your website is large and complex, then it could take quite a while to find that link.

• Rewriting the same style rules: This is one avenue of merging but it is not a really valid alternative. To rewrite the same thing over and over again on different pages would be too much to handle and inefficient at best. While it can be done, and it could be done effectively, the risk of error and the huge amount of time needed make this irrelevant.

• Copy and paste: The other way to merge data is simply copying and pasting. If you have built a website before, then you know there is a great deal of copying and an even greater deal of pasting. However, when style sheets, and long ones at that, are the things being copied and pasted it can become difficult. For one thing, if you miss one letter or add more spaces, then you can easily mess up existing code. You also have to know where to go on an old CSS to find the information you want to copy.

Is CSS @import worth using?

The short answer is yes. The positives simply outweigh the negatives and by a fairly large margin. If you are a company that has the resources to hire someone to work full time on coding, building, and maintaining your website, then you may be alright without the @import command. On the other hand, if you are a web designer or an owner of a small business building your own website, the advantages cannot be ignored.

CSS @import could possibly add loading time to your website. The trick, however, is that it will not add loading time to your home page. This is key because anyone who visits your home page, for the most part, is there for a reason. If they visit subsequent pages it is because they are interested and hooked on your idea or product. This type of visitor to your site is probably willing to stay the extra .074 seconds (this is a made up figure but you get the point) that it takes to load your page because of the CSS @import. This extra time can even be completely removed if @import is used during the build process.