Previous Message
Next Message

CSS Design Process?

Sent by Adam Kuehn on 29 September 2004 17:05


Jeff Chastain wrote:
>To clarify this question some ... What is the process you use when laying
>out the design of an application.  The application I am working on could end
>up being over 1000 pages.  How do you style and manage the styles for an
>application this large?  How do you plan for styling an application like
>this?

Just to add to this thread a bit:  If the application is that large, 
does it all look the same?  If not, try to break it down into 
sections that you plan to have look the same or very similar.  Then 
break out your styles so that the user downloads a single base style 
sheet for the stuff that is constant throughout the site and can be 
cached everywhere, and one more style sheet for each section.  For 
example, you may have a collection of pages devoted to error 
conditions that should all appear similar but would be different from 
input pages.  In that case, link the input pages to something like 
input.css and the error pages to error.css, while both pages get 
main.css (or whatever names you find useful).

As Zoe mentioned, don't be a classaholic.  Use contextual selectors 
and semantic groupings wherever you can.  It streamlines things a lot 
when you have useful page divisions with IDs on them so you can use 
constructs like

#content p a { /*rules*/}

rather than the more ambiguous

a.contentlink { /*rules*/ }

Even if you name your classes very descriptively, you will find that 
with several dozen of them it will get very hard to follow which 
classes are where in the markup.  Contextual selectors reduce search 
time tremendously.

In large multi-page application, you may also run across situations 
where you have a page or two that is similar to other pages in a 
section, but has some very noticeable differences; for example, 
error-on-input pages that must look very similar to the input pages 
but need some striking elements to alert the user to the errors.  In 
such cases, you can place an ID directly on the body tag, thus 
setting up a small series of selectors that will "win" in the cascade 
without changing the basic styles for the section.

Don't worry about having some redundancies in the development stage. 
This will help you navigate through and stay clear in your head about 
what goes where.  Once the thing is mostly complete, you can then 
start to optimize if bandwidth is a serious issue.  I think it is a 
big mistake to try to optimize your CSS too soon.  And when you do 
optimize, be sure to save a commented copy of everything!

>The comments I have heard thus far sounds like people put together the HTML
>structure and content, then go back and style it all?

In general, yes, although as Zoe has said, you need to be somewhat 
mindful of CSS as you plan the structure.  You'll find that gets 
quite a bit easier with experience.  Recognize that you are taking on 
a tough project, here, for your first attempt, and be a bit more 
methodical than you normally would be.  It will help in the end.

HTH,

-- 

-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Possibly related: