CODEWITHSUNDEEP
htmlcss
Rafdro
Rafdro

Reputation: 790

Does properties order matter?

If I have an exemplary div:

#div {
max-height: 100px;
height: auto
}

vs.

#div {
height: auto;
max-height: 100px;
}

Does it make an difference in an output file?

Upvotes: 1

Views: 107

Answers (5)

Bram Vanroy
Bram Vanroy

Reputation: 28554

Order does matter in some cases. For instance, when using vendor-prefixed versions together with W3 compliant properties.

-webkit-transform: ;
transform ;

vs.

transform: ;
-webkit-transform: ;

The browser will use the last property. So always use the W3C compliant property last if it's available!

Upvotes: 5

Aniruddh Agarwal
Aniruddh Agarwal

Reputation: 917

No, Properties order does not matter until and unless you are not modifying the same property and you want to switch between the available two or many.

Example:

#div{
    color: red;
    height: auto;
    max-height: 20px;
}
#div{
    color: blue;
}

So, in this case, the colour properties are replaced by the last one and the colour will be blue but for the height and max-height the same properties which are assigned in the first place will be reflected and until and unless they are not overwritten.

Upvotes: 0

treyBake
treyBake

Reputation: 6568

in your scenario no. But others yes. For example:

.add-margin {
    margin: 0;
    margin-left: 5px /** element will have 5px on left margin **/
}

vs 

.add-margin {
    margin-left: 5px;
    margin: 0 /** element will have no margins **/
}

as a general rule of thumb, I place all my properties alphabetically unless a special case is needed - this ensures overrides get added correctly (as in case of my first example of code)

Upvotes: 3

melvin
melvin

Reputation: 2621

Most of the developers has no specific plan when it comes to ordering CSS. But I personally suggest a method based on how much impact they have on the selected elements or other elements around them.

  • Layout Properties (position, float, clear, display)
  • Box Model Properties (width, height, margin, padding)
  • Visual Properties (color,background,border,box-shadow)
  • Typography Properties (font-size,font-family,text-align,text-transform)
  • Misc Properties (cursor,overflow,z-index)

I came to read this during my research on some css coding standards. You could read more here

Upvotes: 1

Hiren Davda
Hiren Davda

Reputation: 124

As per your scenario properties order not matter.

Upvotes: 1

Related Questions