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.
