How important is CSS property order? [duplicate]

Question

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:

1. Randomly
2. Grouped By
3. Alphabetical
4. By Line Length
5. 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

1. Layout Properties (position, float, clear, display)
2. Box Model Properties (width, height, margin, padding)
3. Visual Properties (color, background, border, box-shadow)
4. Typography Properties (font-size, font-family, text-align, text-transform)
5. 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;
}