Link or @import?

Aaron · 06-15-2008, 09:15 PM

I finally figured out whether to use <link/>, or <script>@import css</script>!

yay
Best Practices for Speeding Up Your Web Site

Just wanted to share it with everyone, it's something that's bothered me for the longest time.

Wildhoney · 06-15-2008, 10:42 PM

I always use link. However, recently I've been organising my CSS files better. Now I have different CSS templates configured, and they import the CSS files I require. So I may have a CSS file called tables.css. That would load in my primary, secondary, and ternary CSS files for my HTML tables.

css Code:

@import 'tables/primary.css';
@import 'tables/secondary.css';
@import 'tables/ternary.css';

sidisinsane · 06-16-2008, 08:18 AM

Quote:

Originally Posted by Aaron

[...] <script>@import css</script>

Just a small correction. Of course you meant using

Code:

<style>@import css</style>

To prevent a "Flash of Unstyled Content" (FOUC) I usually link to a master-stylesheet - especially when I'm not adding any script-tags to my head.

In my master-stylesheet I then import other common ones - just like Wildhoney does. From a performance standpoint that might not be the best solution, but it serves me well in terms of workflow.

Kalle · 06-18-2008, 01:18 PM

I would use <link>, and its because of some browsers like some Opera 9'ers and older IE'ers will first read then HTML structure and THEN apply the CSS and not the other way, so the website transform will be abit weird while loading =)

Ross · 06-20-2008, 08:10 PM

You can always @import in the <link>'ed stylesheet so I've always had a few @import's at the top of my primary (navigation, css reset etc.) and then my core css underneath :)