for html, we have index.html, the file thats automatically loaded by the webserver if no filenames are specified. Is there an equivalent for css, either from the webserver point of view, or just by convention? surely it's not "index.css" right?
Thanks.
Update:
I guess I phrased my question a little poorly. I already knew that css files would not be loaded automatically. I was just wondering if there was a strong convention for default css files. Although there exists no strong convention, there are common names, as listed by the people who answered, some of which are:
default.css
main.css
web.css
style.css
site.css
Or you can name the css file with the same filename as the html file that uses it.
No.
There are common names for the main stylesheet for a site, e.g. site.css or main.css, but no strong (or useful) convention.
The name style.css starts to look odd as soon as you have more than one stylesheet. My 2 cents would be:
main.css or myappname.css (e.g. intranet.css) for the app
Something like global.css for a stylesheet shared between apps
For css for individual pages, create subdirectories named after the pages so that you can easily see which css are shared and which are only used on certain pages
If you can, I'd recommend keeping it short and all lowercase without underscores / hyphens as it is less prone to typos.
No there is no such thing. It probably is some "guidelines" to follow when designing templates for e.g. Joomla where you have "template.css" and so on. When I do not have such guidelines I normally name the default css "style.css", but this is a matter of taste.
Can't think of a better default than stylesheet.css to match the value of the rel attribute.
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Since stylesheets can be loaded based on media attribute my file naming convention just follows the available options:
theme-media-all.css - used for all media type devices
theme-media-print.css - used for printers
theme-media-screen.css - used for computers screens, tablets, phones, etc.
theme-media-speech.css - used for screenreaders
You could omit the media- prefix but I like to be explicit both for myself years down the line or new developers coming to the project - plus you get filename grouping when sorted alphabetically.
There is no standard, because it's your HTML that decides which CSS file to reference rather than web server configuration.
With that said, it is a good idea to have a convention, so that your files are better organized.
For example, if you tie a CSS file with each file you might re-use the HTML file's name, but with the CSS extension. (e.g. index.html has index.css or index.html.css.)
You could apply the same concept to directories or URL paths if your code is organized that way. (e.g. /MyApp/MyFeature/MyFeature.css).
It's really up to you to decide, but it is important to be consistent, so others can understand your code more easily.
Hope this helps.
Related
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 am building a tool to minify and compile CSS files on-demand. The files can be in different folders, and I need them to be called from their original folder if they are referring to an external file (image, other css, font maybe?).
I wonder which strings I should look for. I only see url( and #import, but am pretty sure I am missing some.
I can think of proprietary CSS: behavior which loads .htc (.js on some servers) for that browser. Also exists as -ms-behavior.
EDIT: oops, behavior will use url() too, not behavior() as I previously wrote... My mistake. Ex:
.ie67 * {
behavior: url('htc/boxsizing.htc');
}
I don't think that filter / -ms-filter can load an external resource; it'll rather apply to images and such (somebody correct me if I'm wrong).
In CSS2.1, external resources are URIs so except #import (that must appear before anything else), I think your list is complete.
There are different sites sharing almost identical layout but different styles. Nice example would be considering all sites within stackexchange network. They all have similar layout but different look and feel.
Consider 5 sites and for each site if we have to maintain 3 to 4 stylesheets for different browsers then there are almost 20 different stylesheets we have to manage. Which is difficult to handle especially if we are trying to replicate a similar site with different look and feel.
So Is there are way we can track stylesheets (e.g. storing in database?) and we can dynamically add them?
Or what is an efficient way to handle different stylesheets for growing number of websites?
I was looking at source of office.com and there was goofy url pulling up stylesheet and I believe it has some version number too. Are they storing stylesheets in a central repository? If you view source on stackoverflow you would see a similar url.
Your question addresses several aspects, I'll try to cover two of them here.
Re-usable CSS
If several sites share the same basic layout, it is a good idea to have them share one basic CSS file. You can then make site-specific adjustments on top of that, in smaller CSS files for every site.
In order to make up a good concept for these combined styles, you should read about the CSS cascade hierarchy and CSS specifity. These two things determine which style is applied to an element in the end.
Versioning
The use of version numbers in CSS URLs is mostly related to Cache Busting. It often looks like this: style.css?v=20110326 Normally, you will want your users' browser to cache (keep saved) the style sheet, so it does not have to be reloaded every time a new page is loaded. But if you make a change to the file, the new version must be delivered to all returning visitors. By adding a new, different version string, you make the browser "think" it is a different file and reload it.
The version string is in most cases added automatically by some server side script language, like PHP:
<link href="style.css?v=<?php echo $css_version; ?>" rel="stylesheet" type="text/css" />
The version number (or string) itself is sometimes simply derived from the file's mtime (modified timestamp) or taken from a revision control system like Git or Subversion.
I personally don't know how the trick for "obfuscating" file names and locations is done. I suppose it's some script disguised as a .css file that hands the content specified in the request (all.css?v=e1214b61bb44).. webservers can be set to parse files with extensions other than php or asp as common php or asp files, so I reckon this is what's being done in this case.
As for the stylesheets, you could set a third level domain in which you will store any files in common.
After this, you should design the basic layout in a main stylesheet that will be shared by all your sites. Then you can go on styling up each single site in its own specific stylesheet.
In the page head, you can link them like this:
<link rel="stylesheet" type="text/css" href="http://common.domain.com/style/basic.css" />
<link rel="stylesheet" type="text/css" href="http://common.domain.com/style/sitespecific.css" />
i want to create some css styles for my Django templates. Each view will have a css associated, but there will be zones that are not associated to any views in my template.
How can i load the css files? is there enough having them declared in the Media of my view, and loading them in the header of the html?
Also, is it a correct approach to have styles associated to the divs that are not associated to a certain view?
Thanks!
If you use a word view for a typical django view (a method) it is not good idea to create separate css file for each view (unless you have very specific application).
In general you need to create you css files in such way that:
general styles that can be applied in many templates are not repeated in multiple css files
it is easy for you to manage styles in couple of css files
There is no strict guideline to create css file per view or css file per template in Django as far as I know.
Basically pointing to some css file in head, which contains styles appropriate to a template is enough here. Of course you need to make sure that you provide correct path to this file.
You can make one general css with styles that are used by most of your templates and a series of specific css files that are valid only in some specialized templates.
I also advice to take a look at django-compress if you want to go with your site to broader audience - this app makes your static files (like css) smaller and also it helps to concatenate group of css and js files. This has some positive impact on performance without decreasing readability of your code.
I'd been reading up on themes in my ASP.NET book and thought that it could be a very handy solution, then I met some problems.
The theme picks up every single CSS file in the folder
If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
How do you specify print stylesheets without having all styles in a single stylesheet?
I'm wondering as to whether they're actually worth using at all. Is there any benefit? Are there any major sites using them?
EDIT
Just to clarify slolife's last point. If I had two stylesheets, one called print.css and one called main.css and I used ASP.NET themes, how would it know that print.css was a print stylesheet? In regular HTML you use the media type in the tag itself (i.e. <link rel= ...>) but the themes wouldn't know this, so it would just get included as a regular stylesheet.
I like using themes, but as Raj pointed out in his answer, URL rewriting can cause problems. My search for some solutions to that is what led me to your question. But I'll add my opinions in anyway.
I'll address some of your bullets from above as to why I think themes are good:
- The theme picks up every single CSS file in the folder
I guess you are looking to apply only certain stylesheet files to certain pages. Yes, themes takes the shotgun approach here, so that's a problem. But you don't have to put all stylesheets in the the theme folder. Put your specialized ones outside of it and they won't be included automatically. But I think it is nice feature to have the common/site wide ones included automagically.
- If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
I think you can guarantee the order by the way you name the files, so they are numerically and alphabetically ordered. Maybe not an elegant solution, but not horrible.
Personally, I have a build step that combines and compresses all of the *.css files in my theme folder into one single style.css file, and since I control that build step and the order that the files are combined, that doesn't affect me.
- Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
You can change the theme via code and in the <%#Page directive
- Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
I agree that applying style attributes to controls via the theme doesn't seem to be a best practice. But I love the fact that I can define image skins in the theme's skin files and don't have to cut and paste Width,Height,AlternativeText,Align attributes for common images that I use lots of places throughout the site. And if I ever change one of those images, I can fix the attributes in one place, rather than all over. I also can created skinned controls with a certain list of css classes applied, which seems handy to me.
- How do you specify print stylesheets without having all styles in a single stylesheet?
I have a Print.css file that starts with #media print and that defines print styles for my site. Why do you need to put them in one stylesheet?
IMHO, asp.net themes are absolutely USELESS
try implementing url rewriting with an app which uses themes and see them break straight away
basically, you can achieve the same thing writing few lines of code in asp.net and multiple css folders. i am yet to come across any developer / company who has been using themes
when asp.net 2.0 was launched, there was a big hype around themes but my personal opinion is its simply not worth it :-)
Use themes to change control attributes ONLY.
They were bad designed for working with css.