How to sort properties in CSS file by groups?


Tags: html,css

Problem :

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



Solution :

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.

    CSS Howto..

    How to set css to a specific selector using jQuery

    how to drag and drop css file in eclipse?

    How to morph multi-part css properties with Mootools Fx?

    How to add shadow 'wings' to a centered content div

    How do I put a border: 1px solid #ddd around a selectbox using jQuery?

    How to make a blur effect over a shape in CSS?

    How to remove href attributes from a tag and remove css associated to it in iframe using jquery

    How to do responsive text overflow with css?

    how to change css for a seletor when the selector doesn't exist javascript / jquery

    How to align text vertical CSS

    Show pseudo element between elements

    How to avoid setting CSS class to one table among two tables?

    How to make a dropdown menu with CSS

    How To Set CSS Classes On HTML Tags Which Are Included In The Page With PHP Include's

    How do I center this form-button block?

    How can i override this css behavior with jquery?

    How to slide down to show content of DIV using CSS/jQuery?

    How to make a pure css based dropdown menu?

    How to apply inverse text mask with CSS

    How to position these images in CSS?

    How to get position of div inside td

    How to get the effect not to add one more div?

    How do i use a simple string variable with jquery?

    How to assign CSS background image properties mixing classes and ids

    How to activate a CSS3 (webkit) animation using javascript?

    How to locate which css include is used for an element

    How do I get rid of this little green box on my HTML/CSS page [closed]

    How to avoid css and scripting effect when input on textbox

    Using CSS how best to display name value pairs?

    How to reduce http request using PHP when HTML Doc loads JS or CSS? [closed]