I was wondering how I can call multiple external css files at once instead of calling each individually. I want to do that to avoid the request number and minimize it to one per multiple external css files.
I tired the following, but didn't work!!
<link rel="stylesheet" href=" http://statics.mydomain.co/style.css,functionstyle.css,widgets.css,edges.css,options.css,tags.css" type="text/css">
I thought it is a lot easier than that!!
any idea what I'm missing here!!!
Two options.
1. Css #import
#import url(stylesheet.css);
See documentation.
NOTE!: The browser actually does make multiple calls here, it is just hidden from the HTML
2. PHP
Use minify to shrink, cache, and combine your CSS/JS files.
Here is a minify tutorial
Here is a list of more compression tools.
In order to do what you're doing, you are going to need some kind of server side script that combines.
Alternatively, just combine them all manually or use something like grunt to combine them all.
Once you have sorted out all the CSS rules and you are ready to go into production, you should combine all your CSS files into a single file and then minify it.
You can then link to a single file from your pages.
As a start, read the previous question, it has some useful references:
Any recommendations for a CSS minifier?
You can use the #import statement inside your 'master' css, to make it include multiple files at once. All you would have to do is link to your one master file in your HTML.
However, this will not limit your requests. As long as they are separate files, you will have to do separate requests.
For real performance improvement you would have to merge the files into one bigger file. There are some good tools out there. I prefer LESS, which is a precompiler that does lots more, but can also merge multiple files into one (minified) master css
Even if you can minimize your html code to only one line, the client has to load them all individually 'cause they still are in different files on the server.
If you want to combine the Styles into one file just do it manually or on server-side.
Furthermore you could minify your CSS with an online tool to make the file's size smaller.
Related
I was just trying to improve my site performance and for that i just run through google developer performance test, the results were pretty good but the google analyzer suggested me to compress the css files for better performance.
Until then compression and minifying was same for me, but now I Wanna know the difference between these two if there is any.
Also I want to know whether its a good idea to import all css in one main css file and then just link that particular css to the html pages
I am newbie I hope my questions make sense
Thanks
Minifying removes whitespace and other unnecessary characters from the file to create a different CSS file with exactly the same meaning.
Compressing uses a compression algorithm (such as gzip) and adds an HTTP response header to tell the client that the file is compressed CSS (instead of plain text CSS) so it can be decompressed before being passed to the CSS parser.
See Minifiying your css file will remove all comments, blankspaces/whitespaces from your css file. Also it removes any irrelevant data from your css file and after minifying your css file you will notice that your css code will appear only in a single file. Now when you will load your web page and hit F12 you will notice this change in your css file and it will improve the performance by reducing the loading time of your web page.
Also as you talked about putting all your css files in one main css file will just provide you a touch of bundling all your css i.e at the time of loading you will notice that a single bundle of css will be loaded instead of loading all .css files separately. It will again improves the performance by reducing the loading time. For more information you can read the concept of bundling and minification on web.
It also provides you the concept of versioning your .css and .js files. You need not to worry about cleaning browser cache each time you make changes to your css or js files. Hope this will help.
I am building a personal homepage. I have 4 HTML pages and only one CSS sheet linked for all of the pages. That is, inside a single CSS file I have set up layout for all different pages.
[In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.]
Is it a good practice? Or I should create separate CSS for each page?
An example of that what I have done:
page-1.html:
<link rel="stylesheet" type="text/css" href="design.css">
page-2.html:
<link rel="stylesheet" type="text/css" href="design.css">
design.css:
/*
.......
*/
Just have 1 css file for something so small. When you get into building larger sites you can split your style sheets up into modules.
Have a read through the Scalable and Modular
Architecture for CSS approach as it's a solid way of thinking before you get to a level where you can build out your own css architecture.
Your example shows you using one design.css file for your entire website.
Generally, it is better to have one single .css file containing data for all pages for 2 reasons:
You will allow browsers to cache .css files thus resulting in faster loading times;
It will ease the maintenance process.
I would advise you, if you really want to divide .css in separate blocks to use CSS' #import to divide blocks of code f.e form styles and so on.
It's a good practice. As you said that
In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.
So keep just one CSS file. Reasons:
It's easy for browsers to keep the cache
It's better for maintenance, as you have all your design rules in just one place.
As your project is small, the CSS file is not so big at all.
If you want to separate the files for organizational reasons, I will suggest you to read about CSS Preprocessors like Less or Sass. With them you can set your styles in separated files and join all of them before the releasing.
There's not universal best practice for doing it. Generally for large projects, it is recommended to separate css among multiple files for debugging and maintenance during development. As your personal website doesn't seem too complicated, it doesn't seem reasonable to separate them out. This type of question has already been answered.
Single huge .css file vs. multiple smaller specific .css files?
One Stylesheet Per Page!
you should keep only one css file. Let me tell you in simple one line, once your website loads in client web browser the static resource can be cached that helped your website to boost and number of web request can be reduce when user browse multiple pages of your website.
I would recommend you use SCSS or LESS.
These pre-compilers will allow you to use valid CSS if you do not want to use the fancy syntax.
They will allow you to modularise your code and then com
If I navigate the website I'm developing I can keep track of any CSS directive that is being used in that page.
For example I could associate the directive written at line 1 of main.css to the page Index.htm
I've got a CSS file which is 4000 lines and I would like to split it.
The best way would be to separate it for pages.
Every CSS instruction which is specific to only one page could be moved.
How could I accomplish this task?
You could use a tool like uncss for every page in the app and diff the outcome to see what has been removed/not used on that page.
Edit:
You could automate the process a bit more using Grunt with grunt-uncss or Gulp with gulp-uncss. However, I am unsure about the diffing part.
You would need to copy them to a new css file, I would suggest naming each CSS file with specific naming for what the code inside actually does, such as you could have a layout css file, if all pages have the same basic layout. If particular pages have a large amount of css that is only used by them you could consolidate that all into one file. You would need to do full testing once done to ensure all pages have the cs files they need (and none they actually don't need). with 4000 lines it will be a large task but will be far more manageable in future upgrades/revisions
I am confused with CSS Aggregation. Could anyone describe.
When I googled, its redirecting me to some drupal stuff.
Is the CSS Aggregation deals with the Sprites, compression of css stuffs?
Kindly guide me.
Thanks,
Easwar
It's just a process of combining multiple CSS files into a single file. This is often combined with minimizing the CSS file as well. As a result, your page only contains a single, quite small CSS file instead of many large ones, thus speeding up downloads.
This is often a separate process, because for development it is easier to have multiple CSS files, each for a specific purpose, and each richly commented. During deployment to a production server, this development CSS can be aggregated to a single file.
Of course your server side templating must be smart enough to understand this. If you have CSS references in your header template, it's hard to replace them. A better solution would be to have a collection of files to include and generate the HTML for that on the go. That way, your production website could include the aggregated CSS, while the development website could use the separate CSS's. Toggling between them is just a confguration setting.
A similar process can be used for Javascript.
What if i combine all the CSS of the complete site into a single file.
would it be cached by the browser or be reloaded every single time a new page is opened.
the single css file contains different values for different pages.
should i divide the css for different pages or keep it in a single file?
Yes the files are probably better of combined but will only be cached if the correct headers are set. I suggest downloading YSlow (or Page Speed) which is a plugin for firebug which analyses your page and shows how it is slow and gives advice on how to improve it.
http://developer.yahoo.com/yslow/
Also look at css minification tools like those in the YUI toolkit to compress the css code as well as combining the files.
http://developer.yahoo.com/yui/compressor/
Combining CSS files into one will give you better performance. You can compare this in FireBug( https://addons.mozilla.org/en-US/firefox/addon/1843 ) in FireFox.
If you use asp.net have a look at the ScriptReferenceProfiler, it shows the list of downloaded resources, these can be combined to improve performance: see blog: http://blogs.msdn.com/mikeormond/archive/2008/06/26/asp-net-ajax-scriptreferenceprofiler.aspx
Generally speaking, combining your CSS into a single file is a good practice for production servers. The single file reduces the number of http requests required and, in both cases (single or mutiple files) caching will be used.
The benefit of fewer http requests is greatest for first time visitors.
Also, you reduce the number of requests required on subsequent pages as the file will have been cached. (think of it as pre-loading the css if the portions unused on the current page seems wasteful to you)
Most sane browsers will cache CSS files, so compacting them down into a single file can help a little when it comes to request times. However, maintainability is also an issue - if you have difficulty maintaining the CSS code when it's all in a single file, you may still want to stick with separate files.
In the end it's up to you, whatever feels best.
It is is good to have one file. Please see for the file size also that might affect the page load time. All browser catch the css files. Next time it will not load new one.
Please use the yahoo info for that.