I'm creating a theme where i want it to have different widgets and plugins. Each plugin would ideally have it's own css file. However, this approach is not so good because i can end up having multiple files included in my header.
Is there an approach where i can sort of cache all different css files in a single one upon the first user request and then just use that ?
Just use only one css with all the different styles from each plugin in that single file. This way you'll end up having only one external css file and it will be cached, saving bandwitdh and decreasing loading times of the page.
Maybe look at things like yui compressor http://developer.yahoo.com/yui/compressor/
In case anyone is still interested, I created a PHP class that combines all the files .css or .js files of the specified folder into one and minimize it. It can be found in my public github. For using it, just do:
if (file_exists('minimize.php')) =
{
include 'minimize.php';
$Minimize = new Minimize();
$Minimize->folder('/path/to/the/folder/','.css','/path/to/the/resulting/file/style.css');
}
else
echo "The minimizer file was not found, please make sure it's in this folder";
Related
I have a website which uses 1 css file, it is called body.css and it consists of 841 lines. Should it be sorted in different files (header.css, footer.css page1.css, etc...), is it better in just 1 file or does it not matter?
The only thing I know for sure is sorting it in more files is a lot more readable.
Also if someone answers this I'd be most grateful for a little explanation.
My opinion would be one of two things.
1) If you know that your CSS will NEVER change once you've built it, I'd build multiple CSS files in the development stage (for readability), and then manually combine them before going live (to reduce http requests)
2) If you know that you're going to change your CSS once in a while, and need to keep it readable, I would build separate files and use code (providing you're using some sort of programming language) to combine them at runtime build time (runtime minification/combination is a resource pig).
With either option I would highly recommend caching on the client side in order to further reduce http requests.
So, there are good reasons in both cases...
A solution that would allow you to get the best of both ideas would be :
To develop using several small CSS files
i.e. easier to develop
To have a build process for your application, that "combines" those files into one
That build process could also minify that big file, btw
It obviously means that your application must have some
configuration stuff that allows it to swith from "multi-files mode" to "mono-file mode".
And to use, in production, only the big file i.e. Single CSS
Result : faster loading pages
maybe this will help you..
For optimal performance it is better to have only one css file.
But for readability it would be better to have different files for different parts.
Take a look at tools like SASS, which help do that without sacrifice performance. Additionally it has features to make your files even more readable by introducing variables, function and much more.
Using more files means more requests. It will take more time to load and make unnecessary requests to the server. I'd stay with one file.
The only good reason to have other css files would be if you have third-party components, to keep them separated and be able to update them easily.
The order matters: Rules loaded later will override rules with the same name loaded before (this is valid even for rules in the same file).
What do you mean that your website uses one CSS file? Normally you'd write your style definitions in multiple files, and they are concatenated (or not) into one file. My point is, what you are working on in your development environment should stay modular, readable, it shouldn't be influenced by what you have in production.
As for the order of the CSS files, yes, it matters, as you can overwrite your previous definitions.
For optimal caching I'd recommend you to build all the vendor CSS in one file, and your CSS in another file, versioned, so that if you change something in your code, only that file has to be updated by the browser.
But these things depend on the infrastructure. As the browsers are able now to send multiple requests simultaneously, having multiple files can lead to faster page load than only one. But I'm not sure about this.
you might want to take a look at gulp to automatically optimize, and minify your CSS code.
All css in one file is OK.
But it's free : you can make as many css file as you want.
However usually this is how it is:
1 global css file for the entire page. You put the common css in here that is useful for every page on your site. You can call it app.css or style.css or mywebsite.css or any name you want.
1 specific css file for a specific page when you want to specially separate this css from the global css file. Because it will contains css only useful for a few pages. For example you have a special component made by your own or a special functionnality. Example : you have made a spcial javascript code working with some html for uploading some file and you want to have your code js/css separate.
Usually, you can also have one css page for each page, but always one global css file for the entire site.
Note : Same question is also valid for javascript
Note 2 : You can also think about using a framework to minify your javascript and css into one single css / js file at the end. At work our technical boss use wro4j which works for java but it should exists many more other frameworks as you can search on google.
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" />
When I clear my theme registry Drupal runs off and builds out a nice consolidated css file, but it does this for different node/page types so that I get several instances of said file existing. I mentioned this in another question I asked (and answered), but my question is, how does Drupal deduce what css files it needs to add to the consolidated version? There must be numerous different places that control what modules appear on a particular node, so what constitutes a rule for another css file being built?
Well that wasn't an easy chain of functions to follow but I think I've got there...
Every time a page is 'refreshed' (i.e. built from scratch, not served from cache) all CSS files added with drupal_add_css() during that page build are aggregated and saved to a single file that is returned as the <link> tag for that page.
The following line in drupal_add_css() decides what the aggregated CSS file's name will be:
$filename = 'css_'. md5(serialize($types) . $query_string) .'.css';
$types in this context is an array of all of the CSS files added using drupal_add_css() during the current page build. The filename for the aggregated CSS contains a serialised string of $types, which essentially means that any other page that adds the same CSS files as that one will receive exactly the same file name and thus load the same CSS file.
So basically, the aggregation function is run for every single page build so all CSS added to that page will be aggregated every time. If certain pages happen to use the same modules then they will automatically be served the same CSS file as defined in the PHP snippet above. When you combine that with page caching you get the results you find in the HTML source on the different pages.
Hope that makes sense!
I am building up a website using MVC architecture. It takes a lot of css with it. I require atleast 20 css files to store within it each associated with some unique views. I want to know where can I store the css files? Either in a single root css directory or shall I store it with a particular view. Also linking these files within the common template file would be tedious enough. I mean it would show up 20 different tags. Is there any alternative way to do this? Please help. I am using codeigniter framework by the way.
What I do is store it all in a css folder inside the public folder (the one that houses your index.php file). I also have a helper method that generates the actual link tags, so in the template files, I just have something like:
<?= stylesheet('sheet1','sheet2','sheet3') ?>
The helper method that calls would then make the links (and assumes that they're in the public/css directory).
That cleans up the raw template files, though it does still make multiple tags in the files themselves. I use partial views, so there's a master view that has the main CSS file(s) that are used on every page (or almost every page), then add in on each template the ones that are unique to the view.
If you have 20 CSS files, you might want to go through and see what you can tidy up and make more generic. Any place where you have more than one of the same styles (even across files) is up for the chopping block. Any extra files should be relatively small and provide only overrides for the exception pages (and if you can genericize those more, so you use a file for more than one page, then that's even better).
I would recommend you to combine all the CSS files in a single file. Its easier to maintain and you will have only one request to the server. Having so many css files will only increase the loading time of your page. Also gzip the css files to increase the page speed.
Let's say I have css1.css and css2.css.
Just for the sake of keeping files organized and small on my file system / Source control I would like to split them up however in my content, I still want to use all the definitions in both files.
Rather than link reference both in my content page, can css1.css just make css2.css available.
Clearly you can include them all on your page with several nodes, but your best bet is probably a release process script/ant task/automated build process which can concatenate or merge the files based on some manifest or even simply the order of the file names.
You can do other things like compress the css at the same time - automatically optimising files for deployment!
Assuming both stylesheets are in the same directory, put this code at the top of css1.css.
#import url("css2.css");
You can use #import like this in css1.css:
#import url("css2.css");
p { color : #f00; }
I have seen that a lot; the import url("css2.css") feature so it is definitely a way to achieve your objective.