How to sort properties in CSS file by groups?

Question

How to automaticly sort properties in existing CSS file? Is there any way to do it by Excel or something? I want to declare my own order of properties for any CSS file. And yes I know it can broke a code.

For example:

.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;
}

Answer 1

Try the following steps, assuming the CSS file is a simple one and doesn't have bigger things like nesting etc.

• Save the CSS file as a plain text file.
• Import the text file into Excel with each line becoming a row. While importing, use : as the column separator, so that the property and value come into different columns. Better to remove rows that do not have a colon, for example, 'Selector' etc and add it back later, after the sorting.
• As soon as you import, use Excel's number generator feature to give a S.No. or Row.Id for each row (so that, anything happens, you can always sort it back).
• Add one more column in Excel, to indicate 'category' as defined by you, like , Positioning, Display etc.
• Mark the category where each row fits according to you.
• Now sort by Two columns, first by category and then by Row Id.
• If you had removed any headers such as 'selector' etc, add them back to make a valid CSS file. Save the file as CSS.