Does a "Best Practices" exist for the order of properties given for a CSS declaration? Do you use a personal rule?

3 answers

danwellman 5600
0
points

Personally I usually order like:

reset (standard meyer-based reset)
grid (960 gs normally)
utilities (clear-fix, etc)
Global styles for common elements/aspect of all pages (typography, header, footer, navigation)
Page-specific styles (home page, category pages, content pages, etc)

All in a single file, all declarations per-selector on a single line.

Sub-ordered by specificity, e.g.

/* header */
.header {}
.header h2 {}
.header ul {}
.header ul li {}
etc...

Within a single selector I normally begin with the inner box-model for the element and work outwards, then end with superficial styles such as text styles and colors, e.g:

element { display:block; width:100px; height:100px; padding:10px; border:1px solid #000; margin:10px; position:relative; color:#fff; background-color:#000; }
Answered almost 6 years ago by danwellman
0
points

This is all just personal preference really:


For structure I try to reflect where everything is on the page and sub-order by specificity alike Dan, if I have multiple say classes within a certain level of specificity I define all the elemental properties first, then the classes, both ordered alphabetically. My main stylesheet structure usually looks something like:

  1. html, body at the top
  2. header
  3. main content structural
  4. content classes/ids arranged loosely based on their usage
  5. footer

Within selectors I go for:

  1. Display/Position
  2. Background
  3. Border
  4. Width
  5. Height
  6. Margin
  7. Padding
  8. Font
  9. Colour

I have no idea why, it just makes sense to me and I know where to look quickly to get to the property I need; this could work with any arrangement though- there's no standard.

Answered almost 6 years ago by Steve Lacey
  • Also, 1 sometimes ends up in-between 3 and 4... I've never really made my mind up about that one. Steve Lacey almost 6 years ago
0
points

I use a summary at the top of the CSS file.

This is because certain themes/website require a certain modulation or lack some of the elements.

Users/Buyers love the summary.

The order is regularly: 1. RESET RULES 2. GENERAL TYPOGRAPHY 3. GENERAL LAYOUT 4. PAGE SPECIFIC STYLES 5. BLOG STYLES 6. WIDGETS 7. MENU 8. EXTRAS

Answered almost 6 years ago by campuscodi