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.
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 —
- Copy-paste your compressed code in the CSS section.
- Select a pre-processor of your choice that allows you to write native CSS code.
- Switch to the compiled version and extract the output.
I’ve also got a GIF version of the above steps,
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 article? I'd love to hear your thoughts. Shoot me an email or send me a tweet if you've got any comments.
‹ Back to Home