How to use @import in a CSS file?

In this article we will learn how to use @import in a CSS file, in the correct way and also some tips for its proper functioning.

What’s up programmer, ok? Let’s learn how to use @import! 😀

Sometimes we need to import fonts into our CSS file, so this can be done via the [email protected] property

One rule to keep in mind is that the @import clause must always be the first one in the code.

This is the biggest source of problems, mixing styles and elements with it, making import useless

So to work correctly we must do this:

@import('https://fonts.googleapis.com/css?family=Titillium+Web');

body {
 font-family: 'Titillium Web', sans-serif;
}

This way @import will work correctly!

By following these steps you will never be angry on import again! 😀

Remembering that some say that import is a bad practice, I also avoid using it

Whenever there is the possibility of using the link tag in the head of the HTML

I opt for this approach, a big point is that everyone is already used to it and centralizes the imports of all project files there

Facilitating project maintenance and control

Another impact is on performance, as an import makes the browser wait until the stylesheet has finished downloading.

Conclusion

In this article we learned  how to use @import in a CSS file correctly

For this, it is necessary that the import is on the first line of the file, before any rule

Otherwise, the rule will be unusable and you will not be able to use what you wanted to import

Want to learn more about CSS? Click here!