Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. But if you include an @import in the head of your HTML document, it is written:
<style type="text/css">@import url("StyleSheet.css");</style>
From a standards point of view, there is no difference between linking to an external style sheet or importing it. Either way is correct, and either way will work equally well (in most cases). But there are a few reasons you might want to use one over the other.
According developer’s good scenario of using @import is, for example you are linked many external css files in your project as
<style type="text/css">
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
</style>
There is another way of using above styles. Create a another .css file (e.g. bundle.css) and put all .css file as
@import url('/css/reset.css');
@import url('/css/visualize.css');
@import url('/css/datatables.css');And relate it in your homepage as:
<style type="text/css">
<link rel="stylesheet" href="/css/cssImports.css"/>
</style>
Note:
For JavaScript, import doesn't work. But you can create a single JS file and include the JavaScript code of each file after one another. But this is not recommended. It is better to have separate <script> tag for each JavaScript file.
Leave Comment