Practical Vim, 2nd Edition

Tip 101

Alphabetize the Properties of Each Rule in a CSS File

When combining an Ex command with :global, we can also specify a range for our chosen [cmd]. Vim allows us to set the range dynamically using the :g/{pattern} as a reference point. Here we’ll see how we can exploit this fact to alphabetize the properties within each block of a CSS file.

We’ll use this CSS file for demonstration purposes:

global/unsorted.css

html { 
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
body { 
  line-height: 1.5;
  color: black;
  background: white;
}

Suppose that we want to sort the properties of each rule into alphabetical order. We could do so using Vim’s built-in :sort ...