How important is CSS property order? [duplicate] - css

Question

This question already has answers here:
Is there a specific order for CSS properties?
(6 answers)
Closed 2 years ago.
Does the order of properties in a CSS declaration have an effect on the rendering of the HTML?

Answer 1

This is really a trickier question than I first thought. My first reaction was:
Within a CSS rule (also called “rule set”), the order of declarations (of the form property: value) is immaterial. So foo { color: red; background: white; } is equivalent to foo { background: white; color: red; }. There is no separate statement about this in specifications (I suppose); it follows from the lack of any statement that would make the order significant.
On second thought, we could also have
* { font: 100% Calibri; font-weight: bold; }
What happens if you switch the order? In browsers, it does have an effect. I’m not sure how this should be interpreted in terms of CSS specification, but browsers apparently, and naturally, process the declarations sequentially. So the rule makes the text bold, but if you change the order,
* { font-weight: bold; font: 100% Calibri; }
then things change. The font shorthand sets font-weight to its initial value normal, so the text is not bold.
On third thought, there are many methods and tricks based on the order. So yes, the order of declarations is significant.
The impact of the order of rules is a completely different issue.

Answer 2

Apparently the order does not have any direct impact on the result.
The subject has been mentioned here: http://css-tricks.com/new-poll-how-order-css-properties/
It does have an impact according to here: http://css-tricks.com/ordering-css3-properties/
And here is another trend: http://perishablepress.com/obsessive-css-code-formatting-patterns-and-trends/
Final verdict: Arrange the way you judge best, it will work.

Answer 3

Mainly 5 Types Of CSS Property Orde:
Randomly
Grouped By
Alphabetical
By Line Length
CSS Properties by Importance
1. Randomly
.module {
border: 1px solid #ccc;
width: 25%;
padding: 20px;
position: relative;
min-height: 100px;
z-index: 1;
border-radius: 20px;
}
2. Grouped By
.module {
width: 25%;
min-height: 100px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 20px;
position: relative;
z-index: 1;
}
3. Alphabetical
.module {
border-radius: 20px;
border: 1px solid #ccc;
min-height: 100px;
padding: 20px;
position: relative;
width: 25%;
z-index: 1;
}
4. By Line Length
.module {
border: 1px solid #ccc;
border-radius: 20px;
position: relative;
min-height: 100px;
padding: 20px;
z-index: 1;
width: 25%;
}
Here is Refrence URL: https://css-tricks.com/new-poll-how-order-css-properties/
5. Ordering CSS Properties by Importance
But Best Way To Ordering CSS Properties by Importance
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)
Example:
.button {
display:inline-block;
margin:1em 0;
padding:1em 4em;
color:#fff;
background:#196e76;
border:0.25em solid #196e76;
box-shadow:inset 0.25em 0.25em 0.5em rgba(0,0,0,0.3),
0.5em 0.5em 0 #444;
font-size:3em;
font-family:Avenir, Helvetica, Arial, sans-serif;
text-align:center;
text-transform:uppercase;
text-decoration:none;
}

Answer 4

In normally no need or rule to order of properties in a CSS declaration. I wrote order like my requirements of design and browser response, but in firebug tool it arrange sin alphabet order.
The best method of order is
1. box model = width ->height->float
2. font related = font-size -> text-decoration, font-family
3. background images = width, height, border, image
Then only browser allocate space for each element faster in my experience.
Some persons order like below types:
Random
Alphabetical
Grouped by Type
By properties Length

Answer 5

There are some guidelines. But, at the end of the day it comes down to browser implementation. Try not to rely on a certain order always working, because it won't. Inside a declaration, a statement tends to override a previous statement.