Is there a proper order I should write my CSS propperties?

Hi,

I was wondering if there should be a specific order when writing my CSS properties?

For example:

 
#nav {
   color: #ffffff;
   font-size: 25px;
   margin: 25px;
   background: url(nav/example.png);
}

or 

#nav {
   background: url(nav/example.png);
   margin: 25px;
   font-size: 25px;
   color: #ffffff;
}

Open in new window


Thank You.
techin4Asked:
Who is Participating?
 
Jesse MatlockConnect With a Mentor UX EngineerCommented:
The main thing to be careful, outside of setting values for a specific element,.. is your 'targeting' of elements. It's important to know that ID's have higher 'specificity' than CLASSES do.. etc.

so if you target:
     #nav {....}

and also:
     .menu {...}

and your element is:
     <div id="nav" class="menu">.....</div>
 
#nav styling will supersede that of .menu, even though .menu comes after it! (unless you apply !important to a specific property in .menu)

This is known as selector specificity and you can learn more about that at the links below (in no certain order):
http://css-tricks.com/855-specifics-on-css-specificity/
http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.w3.org/TR/CSS2/cascade.html#specificity

However, coding of properties within one selector is largely a preference thing. Some developers code in alphabetical order, others (like myself) group like attributes (font properties, color, text-shadow.. all together, box-shadow, borders, bg are all together, etc.)

Hope that helps!
0
 
jessc7Connect With a Mentor Commented:
No, the order doesn't matter unless you have conflicting rules. For example:

#nav {
   color: #ffffff;
   font-size: 25px;
   margin: 25px;
   background: url(nav/example.png);
   color: #000000;
}

In this case, there are two color assignments. The last one in the order will take affect (#000000).
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.