Solved

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

Posted on 2006-07-10
6
270 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:firepol
  • 4
6 Comments
 
LVL 7

Accepted Solution

by:
maUru earned 300 total points
Comment Utility
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.
0
 
LVL 18

Assisted Solution

by:Eternal_Student
Eternal_Student earned 200 total points
Comment Utility
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" />
<![endif]-->

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" />
<![endif]-->

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

http://www.positioniseverything.net/articles/ie7-dehacker.html
0
 
LVL 18

Expert Comment

by:Eternal_Student
Comment Utility
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.
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 18

Expert Comment

by:Eternal_Student
Comment Utility
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.
0
 
LVL 2

Author Comment

by:firepol
Comment Utility
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?
0
 
LVL 18

Assisted Solution

by:Eternal_Student
Eternal_Student earned 200 total points
Comment Utility
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:

http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

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:

http://css.maxdesign.com.au/floatutorial/
http://www.w3schools.com/css/default.asp

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.

0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now