CODEWITHSUNDEEP
htmlcsscoding-style
Kivylius
Kivylius

Reputation: 6567

Position of CSS properties order matter or not?

This may seem like a simple question but I want to know how to position the property in the individual selectors, eg: display first or width first etc; Bellow is example, position is mixed with styling and really all over the place.

.box {
    display:block;
    width:100px;
    background-color:blue;
    margin:25px;
    position:absolute
}

Thanks,

Upvotes: 2

Views: 1220

Answers (2)

Quentin
Quentin

Reputation: 944442

The order of the properties does not matter (in a technical sense) unless they:

  • Are the same property (including vendor prefixed versions)
  • One property is a shorthand property that includes the other

For example:

background: url('foo');
background-color: red;

and

background-color: red;
background: url('foo');

… will give different results (since if you omit the background-color portion of the background property it is treated as transparent).

Upvotes: 10

crowjonah
crowjonah

Reputation: 2878

It really is a matter of taste and style, for the most part. There are a number of guidelines available if you seek them out, but one place to start is Nicolas Gallagher's Idiomatic CSS – specifically the Declaration Order section.

If declarations are to be consistently ordered, it should be in accordance with a single, simple principle.

...

Smaller teams may prefer to cluster related properties (e.g. positioning and box-model) together.

...

Larger teams may prefer the simplicity and ease-of-mainteance that comes with alphabetical ordering.

Upvotes: 1

Related Questions