Those who have
written CSS for some time will remember it was once popular to split large CSS files into separate files for maintainability. For example, there might be a file for the header styles called header.css
, another for the sidebar called sidebar.css
, and one for the footer called footer.css
. These would be imported into the main stylesheet using import rules as follows:
@import url("header.css"); @import url("footer.css"); @import url("sidebar.css");
However, when building websites, it's now fairly widely accepted that the frontend code (the HTML, JavaScript, and CSS that is sent to the end-user) is delivered faster when there are fewer HTTP requests. Each file used on a page, whether HTML, JavaScript, CSS, image, or font makes up a separate HTTP request. As such, although it's possible to import additional CSS files using the @import
rule, it's bad practice.