DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 12-21-2005, 04:52 AM   #1
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default CSS Style Sheets Arrangement

Right now, my style sheets are more or less in the order that a typical page would use for a particular class or style. Body first, big table, table head, column head, column subhead, copyright notice at the end of the page, as examples. There are thirteen styles right now, but there could be more.

I am thinking about changing to alphabetical order. What do others do about style sheet arrangements?

David
dthomsen8 is offline   Reply With Quote
Old 12-21-2005, 05:17 AM   #2
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by dthomsen8
I am thinking about changing to alphabetical order. What do others do about style sheet arrangements?
I attempt to use a logical order.

First the structure: body, then div IDs for navigation, logo banner, main content, any sidebars, footer, etc. Then the type specs beginning with a (including a:link, a:visited, a:focus, a:hover, a:active), p, hn, li, etc.

It can get messy if I want to have h2 (for example) a different size in side columns than in the main column. So I might have #left h2, for example. I go back and forth on whether to leave those near h2 or near #left.

The a set is the only CSS I can think of that does need to be in order (the LVFHA order I used above). In other cases a later set overrides an earlier one; if you set p to 95% on line 20 and then set it to 110% on line 35, then paragraph text will be 110% everywhere.

Not sure how alphabetic would work. I have a feeling that you will be looking for things by logic rather than alphabetically, but you could try it.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 12-21-2005, 05:23 AM   #3
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default

It would seem that I now have something like what you suggest, logical organization based on what a page uses. I do have a main style sheet, and two others used on only one or two pages, and not on the typical page.
dthomsen8 is offline   Reply With Quote
Old 12-21-2005, 12:24 PM   #4
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by ktinkel
It can get messy if I want to have h2 (for example) a different size in side columns than in the main column. So I might have #left h2, for example. I go back and forth on whether to leave those near h2 or near #left.
Just my two cents... I used to define IDs and classes with similar names (left, right, etc.) but learned last year it's bad practice. For example, if you define something as "left" and somewhere down the road after a redesign that element is on the right, then you either have to redefine the style sheet or use IDs/classes that don't make sense.

As to how to arrange the style sheet, I don't think alphabetical would be a problem and if you know your styles well it could make finding them easier to make edits. However, I try to group my styles as you do. And, it's also good practice to insert comments for each area. When we redesigned our intranet at work last year, one developer wrote 95% of the CSS then left the company. My manager and I were tasked to finish the project, with a 5 or 6 page CSS with little commenting and poorly named styles. We delayed the project for a couple weeks to redesign the CSS and associated templates.

Dennis

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 12-21-2005, 12:32 PM   #5
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by dacoyle
Just my two cents... I used to define IDs and classes with similar names (left, right, etc.) but learned last year it's bad practice. For example, if you define something as "left" and somewhere down the road after a redesign that element is on the right, then you either have to redefine the style sheet or use IDs/classes that don't make sense.
Interesting thought. Haven’t had that problem so far, but if I had very complex sites, think it would make better sense to use functional rather than directional IDs/classes to guard against that difficulty.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 12-21-2005, 04:29 PM   #6
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Comments in style sheets

Quote:
Originally Posted by dacoyle
However, I try to group my styles as you do. And, it's also good practice to insert comments for each area. Dennis
Perhaps I will continue with my present arrangement. Comments are a good thing. Even if I am the only one working on something, comments from a year or two ago remind me of what I was doing back then.

Right now I have just 13 styles on the main style sheet, and only a few in the other two style sheets, so it is quite easy to manage.
dthomsen8 is offline   Reply With Quote
Old 12-21-2005, 06:32 PM   #7
donmcc
Member
 
Join Date: Feb 2005
Location: Sarnia, Canada
Posts: 1,122
Default

I tend to group them a bit. If I add an H4, it will be after the h1, h2, etc. list related styles together, as well as all levels of the a tag.

I keep ID styles after the tag styles, and class tags at the end.

Don
donmcc is offline   Reply With Quote
Old 12-21-2005, 11:49 PM   #8
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by donmcc
I tend to group them a bit. If I add an H4, it will be after the h1, h2, etc. list related styles together, as well as all levels of the a tag.

I keep ID styles after the tag styles, and class tags at the end.
I tend to do something similar but the exact scheme always depends on the site structure as well. Generally: html and body first, then generic styles for main elements hn, p, maybe lists, links. Then the main div ids, followed by specific styling for elements within those ids. Finally specialized styles and classes. And lots and lots of comments: structural comments ("generic element styles" before a group) as well as rule styles ("this won't work in IE", "workaround for so-and-so bug", "size consist of this value plus that value"....).

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 12-22-2005, 10:55 AM   #9
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by iamback
I tend to do something similar but the exact scheme always depends on the site structure as well. Generally: html and body first, then generic styles for main elements hn, p, maybe lists, links. Then the main div ids, followed by specific styling for elements within those ids. Finally specialized styles and classes. And lots and lots of comments: structural comments ("generic element styles" before a group) as well as rule styles ("this won't work in IE", "workaround for so-and-so bug", "size consist of this value plus that value"....).
Oh, how I wish our intranet CSS had commenting like that last year! It does, now, but after many days of my boss and I renaming classes and IDs after figuring out their purpose. Especially when multiple developers are going to have access to a site, comments in the CSS are essential.

Dennis

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Style.org Daudio Web Design 10 06-19-2006 10:44 PM
InDesign Style Sheets? gmoore Print Design 3 06-09-2006 02:51 PM
PHP and CSS cheat sheets Kelvyn Web Site Building & Maintenance 4 01-28-2006 07:57 AM
InDesign style sheets helene silverman Print Design 59 08-30-2005 11:12 AM


All times are GMT -8. The time now is 04:35 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.