Pankaj
Parashar developer

twitter
email@pankajparashar.com

Beautify CSS code using Codepen

Few would argue that Codepen has been an indispensable tool for the Frontend developer community. Although, I have been using Codepen for a long time, only recently, I realised that it can also be used to beautify your compressed CSS code.

Jan 17, 2015 // 1 min read

Recently, I tweeted about using Codepen to beautify your CSS code. I got few reactions in response asking me to explain the process. The idea is simple,

  1. Copy-paste your compressed code in the CSS section.
  2. Select a pre-processor of your choice that allows you to write native CSS code.
  3. Switch to the compiled version and extract the output.

I’ve also got a GIF version of the above steps,

Currently, this approach would work with LESS, Stylus and Scss. It obviously wouldn’t work with the indented syntax version of Sass, simply because it doesn’t consider the CSS syntax as valid. Unfortunately, this approach doesn’t work for other languages like HTML and JavaScript.

Although, Markdown supports HTML tags, the compiled version does not beautify the HTML tags.

This hidden feature can take Codepen a notch higher and bring it very close to fully functional code editor.

Did you enjoy reading this artice? I'd love to hear your thoughts. Feel free to send me a tweet or open an issue on Github to add your comments.

Next
Scoping of index variables in Python

Previous
CSS Selectors Level 4

2012-2020
Light/Dark

Back to Top