How to: De-minimizing CSS to readable format

/ Uncategorized / By

Optimizing your CSS files is an important part in the quest for faster loading websites, but when you need to edit minimized code it can be difficult to read, if not impossible. I have a quick method using Sublime Text that can convert minified CSS code to readable format very quickly.

Good luck reading this code and forget making any changes!
Good luck reading this code and forget making any changes!

Readable CSS, ready to be tweaked
Readable CSS, ready to be tweaked

Reverse-engineering  this optimized and minimized code is very easy when you know how of course 🙂 In this example I am using the CSS code from?https://github.com/Surbma/surbma-divi-gravity-forms which makes Gravity Forms look better in the Divi WordPress theme (by elegantthemes.com).

Thank you?Peter Ambrus for making this CSS code I am using in this example.

In this particular case, I need to make some further tweaks to the CSS, but as you can see it will be difficult if not downright impossible to edit the CSS as it is now. This is easy to fix if you use Sublime Text, first copy-paste the text into a new file and set the syntax to CSS. You can open the Command Palette by pressing Command-Shift-P (on Mac) and then type “sesycss” – as you type the command “Set Syntax” is automatically chosen and then CSS will be highlighted as the format we want. This is a nice beginning, but it is still not readable. Minimized CSS has all line breaks and unneeded spaces removed, so what we are doing now is re-introduce them.

  • Mark with your cursor any curly ending bracket } and use Command-D (in Sublime Text) to select all similar instances. Use the left cursor to move to the left of the curly bracket and press ENTER to add a line space, then use the arrow keys to navigate to the right of the curly bracket and add another line break.
  • Find a comma and use Command-D to select all commas and use the arrow key to move just right of the comma. Press Enter to create a line break
  • Find all instances of the beginning curly bracket “{” and then use the arrow keys to create a line break after.
  • Find all instances of semi-colon “;” and use the arrow keys and ENTER to create a linebreak afterward.
  • Use the Command Palette again (Command-Shift-P on Mac) and type in “rei” to choose “Reindent Lines”.

Once you have done this a couple of times it will be very fast for you to de-minimize CSS.

De-minimizing CSS manually in less than a minute
De-minimizing CSS manually in less than a minute

 

The many shortcuts and in particular Command-D (to choose following occurrences of current selection in the editor) is just one of the many reasons I love Sublime Text.

Read more about the other tools I use as a freelance WordPress developer