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.
Related
What I have is a large CSS file which was compiled from Sass. I have some of the original Sass files, but looking at the source map not all of them.
I'm able to compile the Sass that I do have into CSS, but of course some of the style rules are missing.
How can I reduce these two files into only the rules that are unique to the original? I would like to be able to do that so that I can include that CSS with the source Sass I have on hand to speed up future development.
I would do it like this:
take original CSS and convert it to Sass by changing extension to .scss
if original CSS is minifed use something like CSS Formatter to get readable code
name it something like legacy and import first in your master Sass file
use nanocss in your build process to dedupe duplicate styles (make sure discard-duplicates plugin is enabled)
optional: enable dedupe only for production build since it slows down CSS generation
drawbacks:
if changing properties on existing classes in Sass dedupe will not match against legacy and you end up with almost-duplicates - to prevent that, I would manually go into legacy to delete old classes when changing them in sass partials
Based on your input you should do following "backwards-engineering":
1) Compare you CSS files in a diff-program, e.g. diffchecker.com (let us call your files: file1.css and file2.css).
2) The diff-program will mark duplicate areas with color.
3) Decide which file to update and remove the duplicates, in that file.
Note!. This method will only solve if you have duplicated text blocks in your CSS files. It will not solve to "clean & improve" e.g. if you have spreadout "duplicate" information.
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" />
Im just trying to confirm if I understood #import correctly,
Basically what It can do for you probably at least one of the things is to give your css some structure by separating the different layouts in separate categories.
Right now each of my css files look insane, I have about 10 of them for one site and alot of them are using up space for the same code and only some new stuff have been added.
I am guessing that I can use #import to only add style where it is needed?
Yes, it works pretty much like include or require functions in PHP.
You can separate your style in multiple files and include some of them where it's needed.
Unlike PHP, CSS use HTTP requests to import files, which means your site will be slow if you separate your CSS to many files (try to keep it up to 3, but only 1 is ideal).
I suggest you to separate files only during the development period which would allow you to manage your files easier, but put everything into 1 file before launching your site.
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";