SitePoint Sponsor |
|
User Tag List
Results 1 to 18 of 18
-
Jun 15, 2006, 02:11 #1
- Join Date
- Jun 2006
- Location
- England
- Posts
- 40
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
best practice for stylesheet layout
How do you all lay out your stylesheets? Is there a 'best practice' way to do it?
personally, I would lay out each element as follows:
selector {
____property1: xxxx;
____property2: xxxx;
____}
(_ used to denote tab or 4 spaces)
but I notice that people also put everything on one line, and embed a great deal in the html, where I would put everything externally wherever possible.
Certainly my way means that stylesheets get very long, and you have to keep switching and saving while developing.
I also comment everything like mad.
Am I making a rod for my own back, or being prudent?
-
Jun 15, 2006, 02:19 #2
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I prefer to put one rule on one line, and I indent rules to indicate structural relations (makes it easier to find things later).
Code:selector {property1:xxx; property2:xxx} selector subselector {property1:xxx; property2:xxx}
Oh, and I also use a standard 'order' for my properties.Birnam wood is come to Dunsinane
-
Jun 15, 2006, 02:25 #3
- Join Date
- Jun 2006
- Location
- England
- Posts
- 40
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I like the idea of indenting. I think I'll do that in future.
-
Jun 15, 2006, 03:13 #4
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I find it rather difficult to read some CSS rules that are all on one line.
I prefer two or three space indentations. Like this:
Code:h1,h2 { color: #000; margin: 0; padding: .5em; }
We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Jun 15, 2006, 03:14 #5
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I do either/or depending on how many rules are applied to each element.
-
Jun 15, 2006, 03:32 #6
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Kravvitz
Birnam wood is come to Dunsinane
-
Jun 15, 2006, 03:40 #7
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Huh? What doesn't work very well? Am I correct in assuming that you mean that you find it difficult to read multi-line rules in a text editor without syntax highlighting?
My main text editor does have syntax highlighting, which is helpful, but I still find it easier to read multi-line rules even in a text editor that does not have syntax highlighting.We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Jun 15, 2006, 03:53 #8
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry for being unclear (for the second time today!)
I mean that my method doesn't work well without colour-coding. You also need a high-resolution monitor.
The main reason I'm not too fond of the multi-line version is that it takes up so much vertical space. Sometimes you want to keep an eye on one rule while editing another, and that's difficult if you can't keep both in sight at the same time.Birnam wood is come to Dunsinane
-
Jun 15, 2006, 07:02 #9
- Join Date
- Feb 2004
- Location
- Netherlands
- Posts
- 381
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I would go for this style:
Code:selector { property:value; property:value; property:value; property:value; }
-
Jun 15, 2006, 07:10 #10
- Join Date
- Feb 2006
- Location
- Bedford, UK
- Posts
- 1,687
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm odd - I like rules all on one line in general.
-
Jun 15, 2006, 21:09 #11
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ah! That makes so much more sense now. Thanks for clarifying, Tommy.
Sometimes when I want to refer to a rule or two while writing another, I will copy-and-paste them into another text editor window so that I can see them all at the same time.We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Jun 15, 2006, 22:04 #12
- Join Date
- Dec 2005
- Location
- New Zealand
- Posts
- 488
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
For me, the simpler and clearer it is, the better. I like to be able to scan down the left-hand side for the selectors, then have all the properties indented on their own lines (a la Kravvitz and sergeant).
The reason for this is that I can't read CSS quickly (my understanding just isn't that great) So my comprehension speed goes up along with the length of the sheet.
Simplicity rules!
-
Jun 15, 2006, 23:23 #13
- Join Date
- Jan 2004
- Location
- Melbourne, Australia
- Posts
- 7,305
- Mentioned
- 1 Post(s)
- Tagged
- 1 Thread(s)
Code:a { property: value; property: value; } a, b { property: value; property: value; } b c { property: value; }
-
Jun 15, 2006, 23:30 #14
- Join Date
- Dec 2005
- Location
- New Zealand
- Posts
- 488
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Egor
-
Jun 16, 2006, 00:03 #15
- Join Date
- Mar 2006
- Location
- Yorkshire, UK
- Posts
- 528
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Being a stickler for neat code I opt for
Code:body { color: #fff; }
Technology is dominated by two types of people:
those who understand what they do not manage,
and those who manage what they do not understand.
-
Jun 16, 2006, 23:00 #16
- Join Date
- Apr 2003
- Location
- New Zealand
- Posts
- 168
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
A related question.
How do you list/group your styles?
Alphabetically?
By type (html tags in one group, classes in another group, ids in another)?
By id (i.e. all styles within an id are grouped together)?
Other?
Do you separate positioning/layout from the rest?
What method do you find gives you the best control over where to find what you're looking for?
-
Jun 17, 2006, 01:06 #17
- Join Date
- Oct 2005
- Location
- Brisbane, QLD
- Posts
- 4,067
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I do html, body and container first. Then usually I have my structural elements together and text styles that apply to all pages. Then I group styles together by individual page.
-
Jun 17, 2006, 12:19 #18
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Element type selectors first (alphabetical order).
Classes next (alphabetical order).
IDs last (structural order with indention).Birnam wood is come to Dunsinane
Bookmarks