Re: [WSG] commonly used order of styles within a css class
On Thu, 2 Sep Cameron Adams wrote:
I normally use the box model in combination with
background to foreground layering to order my styles:
- display
- positioning
- margin
- border
- padding
- background
- foreground (text)
That's the same approach I use (except 'foreground' would go in a
typography stylesheet, padding would come before border).
As for organising CSS docs, I prefer something like this on medium to
large projects (not 5 page static jobs ;)
default.css -
Start with a global reset of padding and margins -- * {padding:0;margin:0;}
All body declarations
Main containers, their positioning, background images and decoration (ie:borders) ;
ordered in relation to source.
Global declarations - eg: styles whereby the selector is just the
html element name -- not typography; things like.. ul
{list-style:none;}
typography.css
Colours, fonts, padding and margins all go in here.
Grouped relating to how they affect each others inheritence, as well as their
parent. (content, sidebar, footer, etc)
form.css
Any global form styling - if the only form (besides contact) is a search form, these
rules would go in the /* GLOBALS */ section of default.css
index.css, contact.css, about.css
specific styles that will only ever be needed by one page are put in their own
stylesheet to be fed solely to that page.
ie.css
Hack sheet for all versions of IE/win - included via conditional comments.
ie55.css
Hacks specific to IE 5.5, fed using 'mid-pass filter'.
ie5.css
Hacks specific to IE 5, fed using 'low pass filter'.
The reason I go to so much effort to split up the IE hacks is so that
I can drop them quickly and painlessly when that blessed day finally
comes 'round.
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] commonly used order of styles within a css class
For ordering statements I usually start with broad statements and then get narrower. Then within this list I sort by html statements and then my IDs and classes as they fall in the page from top to bottom. As for selectors I go in this order positioning display margin padding background (minus color)(image, position, repeat) text (family, size, weight, then any extras like line height) text color background color I don't know why but I like to see any color information at the end, grouped together. Call me quirky! :) Chris On Fri, 3 Sep 2004 15:19:12 +1200, Sean [EMAIL PROTECTED] wrote: Does anyone know if there is a common way of listing styles in CSS? I don't mean the order of a:hover a: visited, or the order of specification. I am thinking more of some logical order that would be helpful to anyone else working on stylesheets I have created. For example, perhaps the font and inline information is first, the block, padding and margin information next, and then the positioning. In the same way that naming conventions of CSS classes and IDs is helpful, is anyone aware of any logical or consistent order in which the styles are displayed in CSS? ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] commonly used order of styles within a css class
If you think about it, ordering IDs in the order that they appear in the HTML goes against the grain of XHTML/CSS separation of content and style. If you change the position of an object in the HTML, then you have to change it in the CSS, otherwise your order becomes meaningless. The best way is to have an order independent of the HTML content, such as alphabetical. -- Cameron Adams W: www.themaninblue.com --- Brian Duchek [EMAIL PROTECTED] wrote: I'm 100% with Andy on this one. My coding style (pun intended) usually falls into the source ordered approach (i.e. the ID selectors will be found in the CSS in the same order that they appear in the HTML document). I'll do grouping of helper classes as well, as I use them as sort of utilities. Within each class or selector statement, I'll let my editor (DW or Topstyle) place them for me. At most it ends up being 10 short lines of text, and easy enough to scan quickly and identify what's what. I do tend to put any hacks or unusual approaches at the bottom of the definition. Cheers! Brian Duchek www.inquiline.com On Fri, 3 Sep 2004 10:33:23 +0100, Andy Budd [EMAIL PROTECTED] wrote: Sean wrote: Does anyone know if there is a common way of listing styles in CSS? I don't mean the order of a:hover a: visited, or the order of specification. I am thinking more of some logical order that would be helpful to anyone else working on stylesheets I have created. Are you meaning in a micro or macro sense. i.e. how to structure sets of statement within a stylesheet or how to structure a set of declarations within a statement? If it's the former there tend to be a couple of main ways. One is to group statements into logical types, such as all layout goes in one place, all text stuff in another. However I personally break this info into separate stylesheets as I find it easier to manage. Another popular way is to structure stylesheets based on selector type, so you may have all element selectors first, then all id's and lastly all classes. I can see the logic behind this but it's not something I favour. The way I tend to arrange statements is by position in the flow of the document. So I'll have all universal statements at the top, then statements relating to the header, nav, content and finally footer statements at the bottom. This works well for me, but I do often find that I'll need to add a new statement later that's the same of similar to one I already have. Rather than taking the original statement out and putting it up top with the universal statements, I tend just to tack a new selector on. This means that sometimes statements aren't always exactly matching the flow of the document. This is fine if you've only got one person working on the CSS, but would get confusing if you've got multiple people using the same file. As for arranging declarations within a statement, because statements don't tend to be so long, I generally don't have a format. I simply put them in the order I write them in. Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Brian Duchek =-=-=-=-=-=-=-= e: [EMAIL PROTECTED] c: 847.809.2140 w: www.inquiline.com =-=-=-=-=-=-=-= ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** __ Do you Yahoo!? New and Improved Yahoo! Mail - 100MB free storage! http://promotions.yahoo.com/new_mail ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] commonly used order of styles within a css class
Sorry Cameron, but I think that you're taking it a step too far here. At the end of the day, those who work with the CSS can order it any way they please and that works for them. This is all about personal preference and working styles, and separation of content and style has nothing to do with it. IMHO, anyway. Patrick Cameron Adams wrote: If you think about it, ordering IDs in the order that they appear in the HTML goes against the grain of XHTML/CSS separation of content and style. If you change the position of an object in the HTML, then you have to change it in the CSS, otherwise your order becomes meaningless. The best way is to have an order independent of the HTML content, such as alphabetical. -- Cameron Adams W: www.themaninblue.com --- Brian Duchek [EMAIL PROTECTED] wrote: I'm 100% with Andy on this one. My coding style (pun intended) usually falls into the source ordered approach (i.e. the ID selectors will be found in the CSS in the same order that they appear in the HTML document). I'll do grouping of helper classes as well, as I use them as sort of utilities. Within each class or selector statement, I'll let my editor (DW or Topstyle) place them for me. At most it ends up being 10 short lines of text, and easy enough to scan quickly and identify what's what. I do tend to put any hacks or unusual approaches at the bottom of the definition. Cheers! Brian Duchek www.inquiline.com On Fri, 3 Sep 2004 10:33:23 +0100, Andy Budd [EMAIL PROTECTED] wrote: Sean wrote: Does anyone know if there is a common way of listing styles in CSS? I don't mean the order of a:hover a: visited, or the order of specification. I am thinking more of some logical order that would be helpful to anyone else working on stylesheets I have created. Are you meaning in a micro or macro sense. i.e. how to structure sets of statement within a stylesheet or how to structure a set of declarations within a statement? If it's the former there tend to be a couple of main ways. One is to group statements into logical types, such as all layout goes in one place, all text stuff in another. However I personally break this info into separate stylesheets as I find it easier to manage. Another popular way is to structure stylesheets based on selector type, so you may have all element selectors first, then all id's and lastly all classes. I can see the logic behind this but it's not something I favour. The way I tend to arrange statements is by position in the flow of the document. So I'll have all universal statements at the top, then statements relating to the header, nav, content and finally footer statements at the bottom. This works well for me, but I do often find that I'll need to add a new statement later that's the same of similar to one I already have. Rather than taking the original statement out and putting it up top with the universal statements, I tend just to tack a new selector on. This means that sometimes statements aren't always exactly matching the flow of the document. This is fine if you've only got one person working on the CSS, but would get confusing if you've got multiple people using the same file. As for arranging declarations within a statement, because statements don't tend to be so long, I generally don't have a format. I simply put them in the order I write them in. Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- Brian Duchek =-=-=-=-=-=-=-= e: [EMAIL PROTECTED] c: 847.809.2140 w: www.inquiline.com =-=-=-=-=-=-=-= ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** __ Do you Yahoo!? New and Improved Yahoo! Mail - 100MB free storage! http://promotions.yahoo.com/new_mail ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- _ re·dux
Re: [WSG] commonly used order of styles within a css class
To clarify my previous message: what I mean is Cameron Adams wrote: If you change the position of an object in the HTML, then you have to change it in the CSS, otherwise your order becomes meaningless. Yes, it becomes meaningless in that it makes it more convoluted to work with, *but* it does not mean that it won't work. There is no dependency here between the order in which it appears in the XHTML and the CSS (unless you have deep dark cascade dependencies going on where the order is indeed important). Patrick _ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] commonly used order of styles within a css class
On Fri, 3 Sep 2004 15:19:12 +1200, Sean [EMAIL PROTECTED] wrote: Does anyone know if there is a common way of listing styles in CSS? ... For example, perhaps the font and inline information is first, the block, padding and margin information next, and then the positioning. Sean, I've seen more styles of styling than there are stylers! My personal preference is to step from properties that are most likely to affect other elements on the page to properties that are least likely to do so: - first properties of position visibility (position, display, visibility, z-index...) - then properties that affect dimension (height, width, margins, borders, font-size...) - finally properties that don't affect dimension (text-align, background, color...) I hold to this convention loosely; I also find it convenient to group related properties together, for example z-index with position and all the font properties together whether or not they affect box dimension, and I put padding immediately below margins because I tend to work with them simultaneously when I'm tweaking a page. Whatever system you develop, being consistent over time will help you quickly locate properties you need to adjust, and will help other programmers (and your future self!) to modify your code more easily down the road. Your own style of styling should make natural sense to yourself so you can move around in your files intuitively. Personally, I'd never sequence properties alphabetically because I suspect I'd constantly interrupting my thought processes of semantic and graphic organization to recall how property names are spelled -- whereas alphabetization might come as second nature to someone else with a differently wired brain. Paul ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] commonly used order of styles within a css class
what about the mozilla way http://www.mozilla.org/contribute/writing/markup ? -- Neerav Bhatt http://www.bhatt.id.au Web Development IT consultancy Mobile: +61 (0)403 8000 27 http://www.bhatt.id.au/blog/ - Ramblings Thoughts http://www.bookcrossing.com/mybookshelf/neerav Sean wrote: Does anyone know if there is a common way of listing styles in CSS? I don't mean the order of a:hover a: visited, or the order of specification. I am thinking more of some logical order that would be helpful to anyone else working on stylesheets I have created. For example, perhaps the font and inline information is first, the block, padding and margin information next, and then the positioning. In the same way that naming conventions of CSS classes and IDs is helpful, is anyone aware of any logical or consistent order in which the styles are displayed in CSS? ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] commonly used order of styles within a css class
Morning Sean,
I tend to set mine out like below:
#element {
width : 768px ; height : auto ;
margin : 0px ; padding : 0px ;
background : #99cc00 ; color : #ccff00 ;
display : block ; float : left ;
}
anything else get bunged in at the bottom, but i always start
with the first 4 (width,height,margin,padding) dunno why tho,
guess its just habit!
Mark Harwood
---
phunky.co.uk / zinkmedia.co.uk / xhtmlandcss.co.uk
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] commonly used order of styles within a css class
Sean wrote: Does anyone know if there is a common way of listing styles in CSS? I don't mean the order of a:hover a: visited, or the order of specification. I am thinking more of some logical order that would be helpful to anyone else working on stylesheets I have created. Are you meaning in a micro or macro sense. i.e. how to structure sets of statement within a stylesheet or how to structure a set of declarations within a statement? If it's the former there tend to be a couple of main ways. One is to group statements into logical types, such as all layout goes in one place, all text stuff in another. However I personally break this info into separate stylesheets as I find it easier to manage. Another popular way is to structure stylesheets based on selector type, so you may have all element selectors first, then all id's and lastly all classes. I can see the logic behind this but it's not something I favour. The way I tend to arrange statements is by position in the flow of the document. So I'll have all universal statements at the top, then statements relating to the header, nav, content and finally footer statements at the bottom. This works well for me, but I do often find that I'll need to add a new statement later that's the same of similar to one I already have. Rather than taking the original statement out and putting it up top with the universal statements, I tend just to tack a new selector on. This means that sometimes statements aren't always exactly matching the flow of the document. This is fine if you've only got one person working on the CSS, but would get confusing if you've got multiple people using the same file. As for arranging declarations within a statement, because statements don't tend to be so long, I generally don't have a format. I simply put them in the order I write them in. Andy Budd http://www.message.uk.com/ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
