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?
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.
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.
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...
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With