Conventional Order of CSS properties [closed]

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 3 years ago.

Improve this question

Is there a standard guideline of what order the CSS properties should be in? This would be to decide if I should use this code

p {font-size: 14px; color: purple}

or this code instead

p {color: purple; font-size: 14px}

Edit

I am now using The CSS Box M开发者_开发问答odel Convention

---

There is, indeed, no widely agreed-upon convention. I prefer writing Concentric CSS where I list the properties in order from the outside of the box to its inside, so that I can remember whether the padding goes inside or outside the borders, and so forth. After reading your excellent question here, I realized that I felt strong enough about it to write a blog post, so here you are in case you're curious:

http://rhodesmill.org/brandon/2011/concentric-css/

Note that the popular Box Model Convention gets the order wrong in several cases. The actual CSS rendering goes in this order, from outside to inside:

+-------------------+
|                   |
|      margin       |
|                   |
|  +---border----+  |
|  |             |  |
|  |(background  |  |
|  |    color)   |  |
|  |             |  |
|  |   padding   |  |
|  |             |  |
|  |  +-------+  |  |
|  |  | height|  |  |
|  |  |   ×   |  |  |
|  |  | width |  |  |
|  |  +-------+  |  |
|  +-------------+  |
+-------------------+

Which suggests a natural ordering for your CSS:

margin / border / background / padding / height × width

The "Box Model Convention" instead uses this rather bizarre order:

height × width / margin / padding / border / background

---

There is no widely adopted convention. There is no difference between either example, so you should choose the convention you prefer. If you must really satisfy the hobgoblins, choose alphabetical or the order it affects the box model.

---

I don't believe the order of the properties will have any impact on the end result, unless two of like properties are called like

border:1px solid #000;
border-top:none;

versus

border-top:none;
border:1px solid #000;

Other than that, whatever you find easiest to read would be the best bet. I list them alphabetically since that tends to group like properties together.

---

I've seen several guides that say they should be in alphabetic order. So, your second example.

There are tools like CleanCSS that can alphabetize them for you.

---

There isn't a set standard. Some people have a preference depending on their level of OCD. I like to do height/width first then positioning, colors, etc. I've seen people make jokes about corporate CSS being ordered based on character count. At least I think they were joking.

---

Not really.

But it would make sense to order alphabetically and/or group font rules and box/layout rules. Your code would be more clear.

Example:

/* font */
color: blue; font-size: 12px; word-wrap: break-word;
/* layout */
border: 1px solid red; border-bottom: none; margin-top: 6px; padding: 4px 6px;

---

I generally put the properties in alphabetical order, this way when you search a heavily populated CSS rule with many properties it a little easier to find what your looking for.

---

The main ordering issue with CSS is the order of the classes, not the properties. Since stylesheets cascade, the more specific stylesheet will win. I tend to group in somewhat alphabetical order, with possible exceptions for like properties that belong together, regardless of alphabetical order.

---

Here's how I do it, and I think this makes the most sense in terms of logical ordering. The secret sauce is the three properties at the top. In terms of 80/20 analysis, knowing those three can help me determine what's going on in the rest of the styles.

element {
  /* I. Microcosm of All Properties */
  content:           /* What it is. */
  display:           /* Where or whether it is. */
  position:              /* Relationships to others. */

  /* A. Content Properties † */
  background-image:   /* 1. Internal content styling ... */
  background- ...       
  border:               
  opacity:          

  font-family:       /* 2. Typographic styling ...*/
  font- ...         
  text- ...         
  color:                

  /* B. Display Properties */
  box-sizing:            /* Ordered by Box Model ...*/
  height:               
  width:                
  max- ...          
  padding:          
  margin:               

  /* C. Relational Properties */
  float:                
  order:                
  z-index:          

  /* D. State Properties */
  cursor:               
  animation:            
  transition:           
}

† You can see especially here with "background-image" and "font-family", I also tend to begin these sections with properties that have long strings for their values. I think it serves as a natural separator between these sections.