SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Enthusiast AnalogPanda's Avatar
    Join Date
    Jun 2006
    Location
    sacramento, ca, usa
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you order your properties within a declaration block?

    There's no real right or wrong answer. I'd just like to hear from fellow CSS developers how you like to order your properties and what is your reasoning behind your preference.

    It's not my intention to discuss formatting preferences such as tab indenting, all rules on one line, one rule per line, etc. That's a whole other conversation. I just want to have a discussion about the ordering of properties.

    My personal preference for ordering properties/declarations within a declaration block has evolved over time. The general idea is to declare box model related properties, typography, backgrounds, and miscellaneous in that order.

    Each of these groups is further broken down...
    Box Model:
    Flow, Positioning, Dimensions, Margin, Padding, Border
    Typography:
    Typeface (font-family), font-size, line-height, font-weight, etc

    Below is my preferred order (also found here). The double line breaks are there just to separate different concepts. I wouldn't use double line breaks in real world code

    Code CSS:
    el {
    	display: ;
    	visibility: ;
    	float: ;
    	clear: ;
     
    	position: ;
    	top: ;
    	right: ;
    	bottom: ;
    	left: ;
    	z-index: ;
     
    	width: ;
    	min-width: ;
    	max-height-width: ;
    	height: ;
    	min-height: ;
    	max-height: ;
    	overflow: ;
     
    	margin: ;
    	margin-top: ;
    	margin-right: ;
    	margin-bottom: ;
    	margin-left: ;
     
    	padding: ;
    	padding-top: ;
    	padding-right: ;
    	padding-bottom: ;
    	padding-left: ;
     
    	border: ;
    	border-top: ;
    	border-right: ;
    	border-bottom: ;
    	border-left: ;
     
    	border-width: ;
    	border-top-width: ;
    	border-right-width: ;
    	border-bottom-width: ;
    	border-left-width: ;
     
    	border-style: ;
    	border-top-style: ;
    	border-right-style: ;
    	border-bottom-style: ;
    	border-left-style: ;
     
    	border-color: ;
    	border-top-color: ;
    	border-right-color: ;
    	border-bottom-color: ;
    	border-left-color: ;
     
    	outline: ;
     
    	list-style: ;
     
    	table-layout: ;
    	caption-side: ;
    	border-collapse: ;
    	border-spacing: ;
    	empty-cells: ;
     
    	font: ;
    	font-family: ;
    	font-size: ;
    	line-height: ;
    	font-weight: ;
    	text-align: ;
    	text-indent: ;
    	text-transform: ;
    	text-decoration: ;
    	letter-spacing: ;
    	word-spacing: ;
    	white-space: ;
    	vertical-align: ;
    	color: ;
     
    	background: ;
    	background-color: ;
    	background-image: ;
    	background-repeat: ;
    	background-position: ;
     
    	opacity: ;
     
    	cursor: ;
     
    	content: ;
    	quotes: ;
    	}

    * EDITED Feb 6 2009 8:48am - Included some missing properties based on AutisticCukoo's feedback

    I sometimes flip-flop on the display/float related rules and the position related rules, but I generally stick to this self-imposed guideline. For CSS3 properties like text-shadow, box-shadow, and border-radius; I usually just add them at the end although they probably have a better place.

    Poking around on the web - I've noticed a few common approaches.
    no order at all
    alphabetization
    something roughly similar to my approach

    I've also been horrified by
    this strange approach.

    So what is your approach and what is the reasoning behind it?
    Last edited by AnalogPanda; Feb 6, 2009 at 10:48. Reason: updated code example

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mine are just in the order I think of them (so basically no order at all), but it is usually the property that has the largest effect on the element in question that I think of first, so there is probably some priority there...

  3. #3
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At first randomly, then eventually alphabetically as to me it's the easiest way to find property names. It takes too much time thinking about priority rules that you have made up in your head as opposed to alphabetization which you learn from childhood. Not to mention new properties could not be in your "zones" and you'd have to think further about where they go.
    Cross browser css bugs

    Dan Schulz you will be missed

  4. #4
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've thought a lot more about this than me. I group by typography and boxing as you do, width is next to height, margin next to padding. Now I'm thinking the guy at Perishable Press is just nuts. I had such great respect for him

  5. #5
    SitePoint Enthusiast AnalogPanda's Avatar
    Join Date
    Jun 2006
    Location
    sacramento, ca, usa
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Centauri
    It sounds like you might be leaning toward some kind of order...

    @SoulScratch
    I can't disagree with your reasoning for alphabetizing. But I don't necessarily agree with your reasons against the method I use.

    My recommendation to anyone would be to consider the approach I take and if it doesn't suit you, then go with alphabetization. I think that having some form of standardization is better than none at all.

    One thing I personally have against alphabetization is that (in my mind) certain properties group together logically such as position and top, right, bottom, left; float and clear; width, height, min-width, max-width, min-height, and max-height; etc. (reminds me that I omitted max-height and max-width from my list!)


    @vanishdesign
    Yes, I've thought about this quite a bit.

    For the record, I think Jeff Starr of PerishablePress.com seems like a pretty clever guy. I just happen to wholeheartedly disagree with the approach presented in his blog post.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use the following general order:
    1. Properties that have a major impact on the layout.
    2. Dimensions.
    3. Margins, borders, padding.
    4. Background and colour.
    5. Typographic properties.
    6. Element type specific properties.
    7. Generated content.


    More specifically,
    Code CSS:
    el {
      display: ;
      visibility: ;
      overflow: ;
      direction: ;
      unicode-bidi: ;
     
      float: ;
      clear: ;
     
      position: ;
      top: ;
      right: ;
      bottom: ;
      left: ;
      z-index: ;
      clip: ;
     
      width: ;
      min-width: ;
      max-width: ;
      height: ;
      min-height: ;
      max-height: ;
     
      margin: ;
      border: ;
      padding: ;
      outline: ;
     
      background: ;
      color: ;
     
      font: ;
      font-family: ;
      font-size: ;
      font-style: ;
      font-variant: ;
      font-weight: ;
      letter-spacing: ;
      line-height: ;
      text-align: ;
      text-decoration: ;
      text-indent: ;
      text-transform: ;
      vertical-align: ;
      white-space: ;
      word-spacing: ;
     
      list-style: ;
     
      table-layout: ;
      caption-side: ;
      border-collapse: ;
      border-spacing: ;
      empty-cells: ;
     
      quotes: ;
      counter-reset: ;
      counter-increment: ;
      content: ;
    }
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I order them in alphabetical order.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I don't have a hard-and-fast order, but lately I've done

    -clear is always first if the thing clears any immediate sibling
    -positioning like float or display
    -dimensions if any
    -position: relative is sometimes here if needed to stabilise IE
    -margins if any
    -padding if any
    -color/text/typography in no particular order
    -borders and backgrounds
    -overflow (can switch with pos: rel in the below case)
    -sometimes position:relative is here if the immediate following code is an absolutely positioned child

    I've even caught myself rearranging older codes like this.
    Code:
    #foo {
      float: left;
      width: whatever; (esp since floats care so much about widths, I'll list width before height)
      height: whatever;
      margin: 1em 0 0 5em;
      padding: 5px;
      color: blah;
      font: blah blah blah 1em/1.2em family family family family;
      text-align: center;
      border: 1px solid #000;
      position: relative;
    }
            #foo bar {
              position: absolute;
              width: 100%;
              height: 100%;
              background: url(foo.gif) 0 0 no-repeat;
            }
    So, slightly random with some general rules of thumb depending on what's in my coffee that day.
    Some elements get different orders, I don't know why. Like, the body usually gets
    body {
    color: #;
    background-color/image: # and blah;
    font: 100% family;
    }
    Here I think it's because if I set a color in the body, I immediately want to counter that with a background colour. In other elements this isn't so important because of transparency of backgrounds, but on the body it's important (you can never know what body background a user's browser will default to). Font is last because I used to never set it; then I started setting a size for IE (100%), and finally a family because I discovered I liked having a default stack and then can pick off the weirdos later if needed.

    I do find that grouping things in clumps can stop things like

    blah blah
    padding-bottom: 45px;
    blah
    blah blah
    blah blah blah
    blah
    padding: 5px;

  9. #9
    SitePoint Enthusiast AnalogPanda's Avatar
    Join Date
    Jun 2006
    Location
    sacramento, ca, usa
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone for chiming in. Keep it coming!

    @AutisticCuckoo
    Nice. Looks like you and I are thinking along very similar lines. You've also got some properties there which I haven't accounted for. I'll have to update mine!

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AnalogPanda View Post
    @AutisticCuckoo
    Nice. Looks like you and I are thinking along very similar lines. You've also got some properties there which I haven't accounted for. I'll have to update mine!
    Yes, your style felt familiar and comfortable.
    Most of those 'extra' properties are ones I rarely, if ever, use. But if I were to use them, that's where they'd go.
    Birnam wood is come to Dunsinane

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I don't have any specific order but would usually start with the properties needed to make the element appear where I want.

    Then I would follow with dimensions and probably followed by the main colours. After that anything goes.

    1) Positioning (e.g. floats - or absolute positioning immediately followed by co-ordinates )
    2) Dimensions/margins
    3) Colors/borders/background
    4) All the rest

    Regarding the order the styles are in the stylesheet then I use a top down approach and at the top of the stylesheet (after the reset of course) would be the header styles , then the main content styles followed by the footer styles.

    This allows me to more or less jump into the stylesheet at the right point. (e.g. footer styles would be near the end of the stylesheet).

    Usually I like my stylesheets and properties to be in organised in the order that the layout required me to code them in the first place.

  12. #12
    SitePoint Enthusiast AnalogPanda's Avatar
    Join Date
    Jun 2006
    Location
    sacramento, ca, usa
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul O'B
    So you do have a standard of sorts. Just not a super strict one.

    By the way, I don't want this discussion to go any further than just talking about the ordering of properties withing a single declaration block. This is a topic which I feel is not discussed much.

    The general topic of organizing entire stylesheets (which is what I don't intend to cover here) has been talked about at length already.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by AnalogPanda View Post
    @Paul O'B
    So you do have a standard of sorts. Just not a super strict one.
    Yes I guess so

    The first thing I would need to do would be to place the element therefore it makes sense to start with the positioning system followed by dimensions. I see no point in starting with anything else until the element is where it's supposed to be.

    Once its in position and at the right size then things like borders and colours can follow.

    However, as you mention above the best way is usually the way that suits the individual and makes life easier.

  14. #14
    SitePoint Enthusiast AnalogPanda's Avatar
    Join Date
    Jun 2006
    Location
    sacramento, ca, usa
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul O'B
    It sounds like you're leaning toward an approach similar to mine or AutisticCuckoo's =)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •