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?
-
3No sir! + height: auto; doesn't matter– VXpCommented May 25, 2018 at 9:06
-
2Nop, I mean the output will be the same unless it is being overridden by some other styles or it is overriding some other styles.– Abin ThahaCommented May 25, 2018 at 9:08
Add a comment
|
5 Answers
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!
answered May 25, 2018 at 9:14
-
also when you use a specific property followed by its shorthand e.g.
background-imageandbackgroundCommented 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)
As per your scenario properties order not matter.
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
-
1Even though these are good hints, it does not answer the question. Commented May 25, 2018 at 9:21
-
As I said, on SO a question is expected to answer the question. Otherwise it is not a valid answer - hence the downvote. Please don't take it personal. Instead, you could just comment on the post with the url you linked. Commented May 25, 2018 at 9:26
-
@BramVanroy sure. not at all personal :). There was a time i struggled to find answer to the same question. You can do as per stackoverflow standards. :)– melvinCommented May 25, 2018 at 9:29
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.
answered May 25, 2018 at 9:16
-
but as a note, you should never do this (specify multiple #id tags in a stylesheet to override, just set it once)– treyBakeCommented May 25, 2018 at 9:22