Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations The Box Model Width, Height and Overflow Properties

Bob Sutherton
Bob Sutherton
20,160 Points
Posted by Bob Sutherton
Bob Sutherton
20,160 Points

property order

When doing CSS, does it matter what order you put the properties in? Is there a right and wrong way to do it or do you just start putting in properties as they occur to you?

For ex.

margin height font-style

or

font-style margin height

or does it not really matter at all?

3 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

The order of properties inside a rule doesn't matter for rendering, but it does matter for maintainability.

A good idea is to group your properties by function:

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

from: https://mdo.github.io/code-guide/#css-declaration-order

Andrew Youngwerth
Andrew Youngwerth
10,188 Points
Andrew Youngwerth
Andrew Youngwerth
10,188 Points

In that case it doesn't matter. However if you had for ex: margin, color, font-style color - The last color property would be the one applied to your html.

ninyo
ninyo
15,367 Points
ninyo
ninyo
15,367 Points

It doesn't seem to matter, but it helps to keep your property orders consistent with each selected elements. I generally like to keep my position and float properties at top, sizing towards the middle, and font adjustments on the bottom. Something like that will help keep organized.