Conventional Order of CSS properties [closed]

Answer 1

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.

Answer 2

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.

Answer 3

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.