SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Threaded 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


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
  •