Find solution
How can I import an HTML template to Thunderbird?

SEO: Is it a good practice to include one main CSS file (using <link> tag) in HTML template and other CSS files inside this main one using @import tag?

  • Answer:

    I agree with on the points he raised but it does not answer the question. As per my understanding, the question is regarding a main CSS file that contains @import and is called using the <link> tag. I've borrowed this from the same source. LINK with @import: In the http://stevesouders.com/tests/atimport/link-with-import.php example, a.css is inserted using LINK, and a.css has an @import rule to pull in b.css: in the HTML document: <link rel='stylesheet' type='text/css' href='a.css'> in a.css: @import url('b.css'); This pattern also prevents the stylesheets from loading in parallel,  but this time it happens on all browsers. When we stop and think about  it, we shouldn’t be too surprised. The browser has to download a.css and  parse it. At that point, the browser sees the @import rule and starts  to fetch b.css. Figure 3. using @import from within a LINKed stylesheet breaks parallel downloads in all browsers LINK blocks @import: A slight variation on the previous example with surprising results in  IE: LINK is used for a.css and for a new stylesheet called proxy.css.  proxy.css is configured to return immediately; it contains an @import  rule for b.css. in the HTML document: 12<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='proxy.css'> in proxy.css: @import url('b.css'); The results of this example in IE, http://stevesouders.com/tests/atimport/link-blocks-import.php,  are shown in Figure 4. The first request is the HTML document. The  second request is a.css (two seconds). The third (tiny) request is  proxy.css. The fourth request is b.css (two seconds). Surprisingly, IE  won’t start downloading b.css until a.css finishes. In all other  browsers, this blocking issue doesn’t occur, resulting in a faster page  as shown in Figure 5. Figure 4. LINK blocks @import embedded in other stylesheets in IE Figure 5. LINK doesn't block @import embedded stylesheets in browsers other than IE LINK LINK: It’s simpler and safer to use LINK to pull in stylesheets: 12<link rel='stylesheet' type='text/css' href='a.css'> <link rel='stylesheet' type='text/css' href='b.css'> Using LINK ensures that stylesheets will be downloaded in parallel across all browsers. The http://stevesouders.com/tests/atimport/link-link.php example demonstrates this, as shown in Figure 7. Using LINK also  guarantees resources are downloaded in the order specified by the  developer. Figure 7. using link ensures parallel downloads across all browsers These issues need to be addressed in IE. It’s especially bad that  resources can end up getting downloaded in a different order. All  browsers should implement a small lookahead when downloading stylesheets  to extract any @import rules and start those downloads immediately. Until browsers make these changes, I recommend avoiding @import and  instead using LINK for inserting stylesheets. As mentioned above, it is best that you use only <link> tags and avoid @import. Source: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Bilesh Ganguly at Quora Visit the source

Was this solution helpful to you?

Other answers

A2A. Its okay to use both Link and @import tags, you won't face any problems. But it may affect your page load time. Loading pages faster depends on parallel download speed. When you use either link or @import  in your HTML, the page load time is normal.                    Figure 1.. always using either link OR @import is okay But when you use a combination of  link and @import, the page load time breaks, i.e. increases.               Figure 2. link mixed with @import breaks parallel downloads in IE This will drastically reduce your page efficiency. Also, using multiple @import tags can like this: <style> @import url('a.css'); @import url('b.css'); @import url('c.css'); @import url('d.css'); @import url('e.css'); @import url('f.css'); </style> will lead to out-of order download of the webpage, as shown in figure below.        Figure 3. @import causes resources to be downloaded out-of-order in IE All these problems don't show up when you use link tag. So I'd suggest you always go for link. Hope this answers he question.

Rizwan Sayyed

Thanks for the A2A. CSS isn't my area of expertise. I can tell you three things that may help: 1. link and import tags don't show up on lists of the most important features of high ranking pages. 2. I'll bow to Rizwan on issues affecting load time. Google definitely seems to prefer quick loading pages. So if these help in that area, it may be worth your time. Though again, if your concern is load time, there may be other tactics that have a bigger impact (handling of images, etc.) Rizwan or others would be a better source for that than I am. 3. Ranking is largely based on your page content, the optimization of the individual page, and the links to that page. Site construction will impact those issues. For example, you don't want your site construction to build very long urls with nonsense characters or with your keywords at the end of a nested string. Those issues notwithstanding, I would focus on the three items above. Good luck.

Tim Dawes

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.