How do you order your CSS properties?

[Luke]

I found a post on CSS-Tricks.com which I thought was quite interesting and it would be interesting to know how our developers in the community order their CSS properties when writing code.

For reference, grouped by type means the following:

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;

  /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

  /* Color */
  background: #000;
  color: #fff
  
  /* Text */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Other */
  cursor: pointer;
}

 

[pandaa]

I've always done it randomly. If I need to find anything, that's why CTRL+F is for. 😛

 

[Carson]

I will split CSS stylesheets into two parts: one for the common parts that could appear anywhere and others that have a predictable position in the DOM. The common selectors I will alphabetize and the others I put in their respective placement.

 

[death180]

I started doing it alphabetically a while back, partly because I want to, and partly if other people use the code.

Carson I see you're referring to selectors, Luke was referring to how you order properties in a code block. But it's interesting to see how you structure that, almost deserves a thread of it's own.

 

[Cosmic]

Randomly, usually. 😛 Just in the order that I add them.

 

[Saruman]

Alphabetical...i'm weird like that...my code has to be perfect or I can't sleep at night :lol:

 

[Reverse Flash]

I do it randomly. 🙂