Solved

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

Posted on 2006-07-10
6
275 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
6 Comments
 
LVL 7

Accepted Solution

by:
maUru earned 300 total points
ID: 17071672
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
ID: 17071677
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
ID: 17071689
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 18

Expert Comment

by:Eternal_Student
ID: 17071715
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
ID: 17098887
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
ID: 17103958
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Checkout Page Input Field not aligned 1 29
I want a tab to always be underlined when I open div then change 1 43
Change how page is organized 3 37
CSS for <center> 14 35
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…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

733 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