• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 284
  • Last Modified:

the clean and efficient way to use CSS in a big website

Hi there,

I use CSS but I never did a big project with it. I only used it to create small sites and I never went really in depth with it...

Now I'll be involved in a big project and I'd like to learn the "correct" way to use CSS.

I'll do some examples.

I've seen some websites that use a .css file for the colors, a .css for the rest (positioning, fonts etc.).
I've seen that many websites have hacks for internet explorer... should I create a seprarete css with all the hacks? Or include them in the main css files?
I've seen that many websites have a printer-friendly CSS...

I'd like some tutorials, guides or your personal suggestions to correctly create an ordered css structure to be used in a generic big website.

The project is a web application that will be customized for each client. Thus the main css design could be modified for each client. The idea is that each client will use the same design, and only the colors will change, or other minor details.

Please give me some useful (advanced) suggestions and I'll split the points accordingly.
  • 4
3 Solutions
the main point of CSS is that you can separate the content from the presentation

this gives you flexibility, you can change your main design just by editing one css file, you can offer different css files for different applications (pda, printing, small screens, big screens, bad eyesite, text browsers etc.)

the main things to look out for:

1) all your presentation, and i mean all, must be in an external css file, NO styling *whatsoever* should be in the html file, if you open your page in a browser that does not support css, it should come out as a readable, flowing layout (normal html). also this gives you the option of changing the stylesheet

2) make sure your html code is as semantically correct as possible, try to avoid 'hacks' that add redundant code to your html (such as container divs), its much better to find a hack that is in the actual css file, or even better, no hacks at all (unfortunately a bit hard because IE doesnt follow the standards correctly).

3) since you have the luxury of designing a page from scratch this shouldnt be a problem, but try NOT to replicate table layout in css, css doesnt support 100% height, (neither do tables technically but they work), there are hacks to get around this (using thick borders, faux columns etc), but the best thing is to just find a different layout alltogether.

4) dont think because you are now using css tables are useless, tables SHOULD be used, for tabular data, dont try making a completely tableless site just because the purists say tables are evil, if you have a list of records from a table, use a table. if you have a list of random objects, use a list.

5) a good idea for css based sites is to make one css file (eg. screen1.css) and import the rest of things as needed. for example, all the layout css should be in its own separate css file, all the colouring/bolding/text sizing etc should be in another, all the hacks should be in another one (imported last so that it overrides any previous css styles), this way you can separate different categories of the styling, and it will be much easier to navigate than one HUGE css file with everything inside it. want to change the colours, open 'style.css', want to make the sidebar float left instead of right, open the layout.css etc.

also this means you can import the layout once and just import a different style.css, so you can give you customers the power to change colours and styles without writing the layout code again, and without letting them change the layout.

6) be prepared to be pissed off, css layouting is much harder than tables because it requires a paradigm shift to a different way of thinking, no long is the page 'set', it is a free flowing document, if the screen is tiny, everything will shift around to work, its not static like a table design

thats all i got.
I often put my css hacks for ie into the same css file but you may want to load a style sheet if the browser is ie:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iehacks.css" />

That way you can keep things seperate and less confusing, like a stylesheet just for IE5:

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="iehacks-5.css" />

Here is some good information concerning this and the introduction to IE7:

The only reason I would put the colors in a sperate style sheet is if I had several color combinations of one site and they could be loaded in depending on what the user chooses for example. Other than that I wouldnt really consider that.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

BUT having said that ^ if the web site I was working on was mammoth [ie, a lot of sections and sub sections] I would probably break the css down into 2 files [or more] for layout and styles.
firepolAuthor Commented:
I've seen in some websites that it's possible to change the CSS template on the fly, by clicking an icon on the bottom left or right of firefox (firefox recognized the multi-templates or so...)... do you know how to implement something like that?

What about guidelines to use graphics amnd graphic effects with CSS 2?

In example now the graphic designer of my company is creating the new layout with photoshop. He will probably save it with slices. Photoshop, unluckily, exports the results using a table layout. Is there a converter to convert a table design in CSS, or some guides or any sort of help for doing that or should I convert it manually with all the problems that it will bring?

You know... when using a rich graphics layout in firefox it will look different than in IE... are there some guides to avoid this problem?
More questions !!

Really you should open seperate threads then people can help you specifically.

With regards to loading a different stylesheet .. you would simply build the stylesheets and save them seperately then load them in using javascript onclick, onfocus or onmouseover etc:


As for converting tables to divs .. well I think the only way to really get it right is to hand code it and understand how things behave in different browsers. So that would involve learning the ropes of html and css. Here are a few good places to start:


And if you can learn well enough the layout should look the same both in IE and Firefox. My only advice would be to use images where necessary and html/css where ever possible.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now