4 Replies - 499 Views - Last Post: 01 August 2014 - 03:28 AM

#1 iLiTH  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 134
  • Joined: 25-August 13

@import vs. LINK

Posted 31 July 2014 - 10:32 AM

I'm setting up a new frame for my websites, and recently messing with MediaWiki showed me that CSS files can import other CSS files into themselves, basically, if you have header styles in a.css and footer styles in b.css, then you can include both into main.css to clean it up a bit.

However, I've also read about the speed differences between the two options (@import and LINK), in which LINK allows for parallel downloading of the files, where as @import loads them sequentially.

If I'm trying to keep a bunch of span tag styles (mostly just changing fonts) separate from my main set of CSS, is it practical to use @import in the main CSS file?

Is This A Good Question/Topic? 0
  • +

Replies To: @import vs. LINK

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3480
  • View blog
  • Posts: 11,858
  • Joined: 12-December 12

Re: @import vs. LINK

Posted 31 July 2014 - 10:49 AM

From this SO topic:

Quote

There are occasionally situations where @import is appropriate, but they are generally the exception, not the rule.

Read the other answers and comments as well, to get an idea of when using @import could be appropriate.

If you think you have a need for @import then I would first consider whether you are over-complicating your css.

This post has been edited by andrewsw: 31 July 2014 - 10:51 AM

Was This Post Helpful? 0
  • +
  • -

#3 iLiTH  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 134
  • Joined: 25-August 13

Re: @import vs. LINK

Posted 31 July 2014 - 10:57 AM

View Postandrewsw, on 31 July 2014 - 10:49 AM, said:

If you think you have a need for @import then I would first consider whether you are over-complicating your css.

Well, I'm certain that's not the case. My CSS is as simple as I can make it. I just want to modularize it... kinda like what you do would do with libraries in other languages.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: @import vs. LINK

Posted 01 August 2014 - 12:45 AM

Quote

I just want to modularize it... kinda like what you do would do with libraries in other languages.

then look into Grunt (or similars) it lets you take modules and compile it into a single file (or it compiles your .less modules into .css)
Was This Post Helpful? 1
  • +
  • -

#5 ge∅  Icon User is online

  • D.I.C Addict

Reputation: 78
  • View blog
  • Posts: 553
  • Joined: 21-November 13

Re: @import vs. LINK

Posted 01 August 2014 - 03:28 AM

I have used @import in a small hand-made website in order to better organise my code.

I was using PHP to replace CSS @import instructions with the actual CSS file content.

Something like this

HTML
<link rel="stylesheet" href="main.css" type="text/css" />


main.css
@import url("UI.css");
@import url("content.css");
...


.htaccess
RewriteRule ^(.+).css$ path/compileCSS.php?file=$1.css [L]


PHP
header("Content-type: text/css");
preg_replace_callback("#@import url\([\"|'?](.+)[\"|'?]\)#", function ($matches) {
    echo file_get_contents($matches[1])."\n\n";
}, $file_get_contents($securePath)); // where $securePath is the file name after you've done your security checks



I find it useful because it allows you to preview your files on your desktop computer without having to install a local Apache server (when the .htaccess file is not interpreted, CSS @import rules are still in your main.css file and work as intended), and of course you've got the benefit of compiling multiple CSS files into one file.

I've never tried to use this on an e-commerce site (powered by Prestashop or Magento) because they already do their own stuff and you don't want to mess with the server configuration in this case.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1