How to split a single line CSS file for readability?

Question

This is hardly a programming question but I am dealing with a 3rd party CSS file that I would like to examine but it is all one line. I tried both the Sublime 2 text editor and Eclipse CSS editor but neither would split the file contents into style blocks easily consumable by the naked eye.

What are some tools that can split a single line CSS file into multi line style blocks for readability?

Solution 1

Download and install the code editor Brackets. (It's free) http://brackets.io/

Once installed, open it and go to File->Extension Manger. Search for and install "Beautify".

Once the extension is installed, close and re-open Brackets.

Now open the minified css file in Brackets and go to Edit->Beautify or press Cmd-Shift-L(Mac) / Ctrl-Shift-L(Win) key.

The css file should now be beautified and easy to read.

Solution 2

I have found "HTML, CSS & JavaScript Minifier/Maxifier" as a very useful on-line tool to split minified CSS contents into style blocks. Here is the link to the site.

<http://codepen.io/depthdev/pen/HKuLs>

The same tool could be used to split minified JavaScript and HTML files. And it could be used to minify HTML, CSS and JavaScript as well.

Solution 3

There are many different code "beautifiers" This SO question (Sublime Text 2 Code Formatting) and subsequent answers should give you a good start.

Many people who saw that post found this answer to be helpful. Basically what Sergio Morlán said is that there is a built in option in Sublime Text that can be found in
Edit->Line->Reindent.

Other answers to the question include using HTML Prettify, and Sublime CodeFormatter.

Comments

[Sumner Evans]

Agreed, Brackets is a great text editor.

[Sumner Evans]

So is Atom

[stigzler]

Didn't work for me - just left the single line css as a block