If I have a CSS file that is included into the page like
<link rel="stylesheet" type="text/css" href="all.css">
And then that file has...
#import "shCore.scss";
#import "shThemeDjango.scss";
Does this do 1 HTTP request or 3?
Is there a benefit of importing multiple files vs linking to all of them in the main file?
(I know the ideal solution is to combine all and minify)
I would recommend not using #import. This stops the browser from downloading files in parallel as it has to parse the first css file. Then go retrieve the import css files and import them.
google on #import
As you mentioned combining and minifying your css is the best option. Using a tool like minify allows you to keep your stylesheets separate and clean but serve them combined and minified.
This would still mean three HTTP-request, and there it most likely make the load process even slower, as Jros mention.
Instead I suggest that you minify all your CSS into one file, to make as few HTTP-requests as possible, and to decrease the amount of data that needs to be transferred.
Here's an example of a CSS minifying tool you can use, if you don't want to do it server-side.
I think, given the context of the question, there has been some misleading advice. Sure, "vanilla" CSS #import will make a HTTP request. But the OP seems to be using a pre-processor.
Pre-processors, such as; SASS or LESS, work by compiling down your code, often into a singular css file. Meaning an #import has already been handled and included for you. You just reference the end-point stylesheet.
So no. Knock yourself out, when using a pre-processor. It's a great way to organise your code.
Related
In Wordpress, my main style.css file imports various sub-files, such as content.css, archive.css, product.css and so on:
#import url("content.css");
#import url("archive.css");
#import url("product.css");
Without success have I have been looking for a way - through browser console or online resource - to download "in a shot" a single CSS containing style.css plus all related #import files, without having to copy and paste all of them in a new file.
Do you know if there is a solution for this? Thank you.
You could use a CSS pre-processor such as LESS or Sass (SCSS), they come with many other features as well.
Depending on the editor you already use you might be able so simply install a package (like Easy LESS for Visual Studio Code), rename your style.css to style.less and be done.
Choosing and switching to a CSS pre-processor might however, depending on your circumstances, environment and experience, not be easy or straightforward at all.
I'd suggest just to copy paste them your css files into one. Using a tool for a simple task as this one can only result in bugs.
I have this Joomla! site and I have set up a yoo theme template but my site is very slow because the template has 30 external CSS files and approximately 20 script files.
I have managed to combine all JavaScript files into one with component ScriptMerge, but for CSS, the component doesn't work as it should because it messes up my site when I combine all of the CSS files into one.
I have also tried other components like jch optimizer and jbetolo but without success!
Does anyone know a component or a plugin that can do this job for me? Or something else maybe, I also tried some script for combining in .htaccess, but also without success.
I know that this Q is posted way way back but since I once had this kind of problem, I thought I can share a link to these two task manager I frequently use when creating templates for Joomla, namely:
Grunt
Gulp
A simple grunt task can combine your CSS in an instant (see below example)
...
cssmin: {
target: {
files: {
'css/output.css': [
'style1.css',
'style2.css'
]
}
}
}
...
Cheers!
You can use #import url'file' to include each css file into one then just include the one file in your main page.
e.g. in my site
#import url("nav.css");
#import url("popup.css");
#import url("latestPosts.css");
#import url("home.css");
This code is placed at the top of common.css and then common.css is just included into index.php
Might want to take a look here:
http://www.w3.org/TR/CSS21/cascade.html#at-import
Maybe Factor CSS can help you out? Run your combined file through it and see if that makes a difference. But don't disregard the disclaimer, which states that it might not work well when the stylesheet depends on the order of the rules. Such is the nature of Cascading StyleSheets.
A quote on stylesheets from About.com
A stylesheet is intended to cascade through a series of styles, like a
river over a waterfall. The water in the river hits all the rocks in
the waterfall, but only the ones at the bottom affect exactly where
the water will flow.
When you say it messes up your site when you combine the stylesheets. Have a think about the order in which the files are added. An automated stylesheet combining script can never know how you want the end result to look, all it can do is take what you have and combine it based on a pre-defined set of instructions, not based on how good it will look in the end. So make sure the input is right and the files are combined in the right order.
Here's an interesting link on the cascading order and inheritance in stylesheets, which might be of help.
This is a common problem with template driven CMS's that allow for the loading of various extensions.
The Joomla! extensions directory has an entire section for enhancing "Site Performance" there are a range of popular extensions for combining CSS and Javascript files.
RokBooster is fairly popular.
If you like getting into coding ...here's a solution.
You can bundle your css files into one, dynamically, by creating a php file with something like that:
<?php
# File combcss.php
readfile("stylesheet1.css");
readfile("stylesheet2.css");
?>
Then you may call your stylesheet like that :
<link rel="stylesheet" type="text/css" href="/combcss.php" />
I currently have a web application which is using SCSS, symphony, and doctrine amongst other libraries. It's well setup and heavily structured.
We are currently attempting to use Bootstrap.css to style it visually, however it's become quite an issue as we began trying to use SASS/SCSS #import function so we could #extend bootstraps classes. However when attempting to do so, it became problematic.
#import url('/bundles/iccsrpit/sass/css/_bootstrap.scss');
The above somewhat works (the code is never actually included in the css file when looking at Firebug. I can click on the path, and it brings me to the file.
#import '/bundles/iccsrpit/sass/css/_bootstrap.scss';
Causes a complete break of the CSS file, and I'm not sure why I can't access the file in this manner.
If anyone can offer a solution to this problem, please help!
Thank you,
iRed
Is there a CSS minifier tool that can resolve #import statements?
I'd like to be able to load multiple CSS files on my local machine but have them all resolved into one file when the website gets pushed out into production.
I recently started using LESS, beyond imports allows you to use:
Variables
Mixins
Parametric Mixins
Nested rules
Operations
Color functions
Namespaces
Scope
Comments
Escaping
So far I'm glad with my experience using LESS.
It's easy to use and the page is documented with good examples.
You can use SASS, with the SCSS syntax. SASS is much more than a minifier: it is actually a CSS preprocessor which adds some goodies like variables or macros to the CSS syntax. But you can choose to simply ignore these features (although I advise you to have a look): any valid CSS file is actually valid SCSS.
SASS can then compile your SCSS in valid CSS, and it can manage multiple files and output a single minified .css file.
You can try it just as a minification tool for now, and start using the advanced features when you feel like experimenting.
css-compressor (based on yuicompressor) inlines #import statements - in fact that is its primary purpose:
https://github.com/samilyak/css-compressor
Granule library supports #import in CSS.
You can look it here http://code.google.com/p/granule/
Which method is best for importing multiple stylesheets? Is one method more efficient than the other?
I once read this article about performances and <link> vs #import : don’t use #import ; quoting a small portion of it :
use LINK instead of #import if you
want stylesheets to download in
parallel resulting in a faster page.
It's quite recent (April 2009), so should still be mostly true -- and written by Steve Souders, whose name is quite well-known when it comes to front-end performances.
On a more subjective point, I quite prefer using several <link> from my main HTML file : this way, I am able to see in only a quick glance what css files are called -- either looking at the template file on the server, or looking at the generated HTML source on the client side.
On some (all?) implementations #import is processed at the end of the loading of the page, so you'd have the undesired Flash of Unstyled Content using it.
link works usually better, but if what you wan't is to define a different media, you could use it without problem. Also, its a neat trick to hide CSS from older browsers (<IE5.5).