Using @import a second CSS stylesheet can be included as a reference from a CSS file.
An example of this referencing is shown below where the file stylesheetB.css has been referenced using @import.
@import url(“stylesheetB.css”);
@import should be added to the head of the CSS file.
Adding an import of another CSS file to a an existing file allows for reuse and management of code but will increase the time taken to download the files making the rendering of the site slower, affecting the Google site ranking given that site response is taken into consideration.
Some of the advantages and disadvantages of including a style sheet import are given below.
Advantages
There are occasionally situations where @import is appropriate Like using @media to apply different styles to different devices.
It can be practical to create one or more standard CSS construction files which are referenced according to the design or features implemented. For example references to the design/development company can be maintained separately as opposed to editing a CSS file across multiple sites or simply making it easier to find the file within a given site.
Commonly used features such as a Google font can be created and then referenced by each stylesheet as opposed to repeatedly including the code within each file. Updates are then mastered once rather than multiple times with the possibility of error or omission.
Disadvantages
Adding the import to an existing style sheet can affect the concurrency in the downloading of the files. This can lead to the referenced imported CSS file being held until the referencing file has been downloaded.
Each file downloaded has an overhead. Concentrating all of the CSS code into a single minified file is more efficient and will take less time to download.
