Hi,
In my project I have put all my css classes in the style sheets.
The structure I am following was
Have a global.css file, which will have all the global styles. And then for each .aspx page one style sheet which will be particular for that file.
Although I am talking about the asp.net this should not make any difference to any other web development environment, I guess.
Is this way of structuring the css files OK ? How do others arrange their css files, and why ?
Thanks.
Related Question
A css file for each .aspx page seems to defeat its purpose, namely reusability, etc. I suppose if each page is really that unique from a style perspective, maybe it's necessary, but I'd work on getting away from that format.
I usually have a master css file, then perhaps additional ones for other major portions of my site (such as a private administration section, etc.)
From a pure file structure I will create on CSS file for each master page, as each master page typically relates to a specific portion of a site. Some even only have one.
I ONLY add additional CSS files if there is a very specific need. If a single page has elements that are needed for JUST that page. I typically add them inside of a style block embedded in that page. To avoid the need for an additional HTTP Request.
For each layout i use a single css file.
If a sub page has some unique layout or a sub section that is on no other page, i check if the CSS declarations are large enough to affect the size of the main CSS file. If so i separate it to another file and include it only on that page.
Two things:
First you will want one CSS file for the project. The whole point of CSS is to permit you to create UI standardization across your site and to separate these UI specs from the pages themselves. That way you could, for example, change the font for your "warning" (or whatever) labels across the entire site. If you are thinking about tweaking a specific page, your first impulse should be to avoid that temptation and stick with an existing style (by ID or class). If you must create a new styling, I'd still put that in the generic CSS file - just give it a unique name. In all likelihood, you'll find use for it later anyway in another file. Note that this doesn't affect performance; in fact a single file improves performance as it will be downloaded just once and then cached. Separate CSS files for each page will result in more downloads and a bloated profile.
Second, take the time to investigate "Themes" if you are working in ASP.NET. This will permit you, for example, to create one CSS class for one overall site appearance (e.g. a "Blue" theme) and to then swap out the entire appearance for another (e.g. a "Green" theme). It also offers you the ability to organize both your CSS and the images to which they refer in ways that I think you'll like (you can provide multiple, alternate CSS files & image directories to customize the appearance of your site).
I would recommend one global style sheet for screen and one global style sheet for the print css - its always a good idea to keep these seperate. It also depends on whether you have a variety of designs being used on your site, i.e. if you have widely varying layouts across your site, then a style sheet for each design would be appropriate. An example would be a front end design and a design for say an administration area. I would also suggest looking at the use of Master Pages to simplify the build.
It really depends on the needs of the project, and what your plan for maintaining the CSS down the road are. I work on a large project where I don't always have the luxury of changing the HTML in the template, so I require a very fine-grained control of the CSS.
I use a single global stylesheet, and a template-level stylesheet that defines the basic layout area - columns, re-usable sections, etc. Finally, I'll apply a page-specific sheet that only applies to the the sections that are particular to that page.
The major benefit of this is that since everything cascades downwards, I can define the large majority of my styles in the global and template-level sheets, but still be able to override individual rules at the page-level. Essentially, I can sub-class my CSS, only altering the parts I need to change. This way, I also don't have to deal with tons and tons of unique names. Two pages might both have a #left-column area, but implement it differently. Think of it as CSS polymorphism.
The downside to this method it that it does force me to maintain a fair number of stylesheets. But with proper documentation and naming conventions, it has worked very well.
Typically, I find if all CSS is stored in a single file (on a large project), it balloons and quickly becomes overwhelming to manage.
Since you mentioned ASP.NET in your question, I would echo another user's recommendation to check out Themes. I have one "set" of .css files for each ASP.NET theme in my site. I functionally divide my CSS selectors into files; for example, I create separate .css files for:
I will also have a separate .css file for each third-party component or control used by the site.
This may not be an answer to your question - but it is a handy article that does touch on style sheet organisation. In particular, it mentions having a few stylesheets, targetted at different platforms.
In general, I'd have a global style sheet for layout and design, and then separate stylesheets if absolutely required. I can't think of a use case where you'd need a css file per page.
Progressive Enhancement With CSS - A List Apart
I encourage all web developers to read this article though.
I'd like to give a shout-out to the Yahoo Exceptional Performance web site, which contains a whole heap of good advice on front-end engineering issues which can have a dramatic effect on page load times. It discusses issues such as reducing HTTP requests per view, effective loading of CSS and JavaScript, maximising cacheability and so on.
Not, strictly speaking, an answer to your question, but it's well worth keeping in mind when you're deciding how to deal with CSS and the like in a new project.
We use a single style sheet that is applicable to the whole site and additional style sheets where applicable on certain pages. For instance, on some of our pages we have grids, so we have a grids.css. No sense in adding all of that css to a single stylesheet when sometimes it's not needed.