Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to split a single line CSS file for readability? [closed]

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?

like image 800
amphibient Avatar asked Feb 10 '15 23:02

amphibient


People also ask

How do I force text to stay on one line in CSS?

If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.

Is it okay to have multiple CSS stylesheets?

Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file.

Is it better to have one CSS file or multiple?

Having only one CSS file is better for the loading-time of your pages, as it means less HTTP requests. Having several little CSS files means development is easier (at least, I think so : having one CSS file per module of your application makes things easier). So, there are good reasons in both cases...


2 Answers

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.

like image 101
njtman Avatar answered Sep 18 '22 00:09

njtman


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.

like image 33
Palash Basak Avatar answered Sep 21 '22 00:09

Palash Basak