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?
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?
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!
background-image
and background
Commented
May 25, 2018 at 9:17
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)
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.
I came to read this during my research on some css coding standards. You could read more here
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.