Web Developer Chicago | Chicago, IL Ruby on rails Developer | Marcell Purham

Fork me on GitHub

How to tidy up your css(3) stylesheet without losing properties

My story

As as front end developer I tend to write an abundant amount of HTML and even more css. When I used to write code as a young developer I tend to put all of my styling properties anywhere and did not have a style for my css stylesheet. If you’re wondering what I mean by that I am referring to my sloppy code writing in css. Since my css code was not well organized I used css tidy software’s to tidy my css code and boom there it was, nice clean code. As time evolved I started getting into css3. After working with css3 for 1.5 years I loved it and it was amazing. As usual I would have sloppy css code just because I am lazy sometimes when writing it and do not feel like having everything neat. So what do I do? I return to my good old pal css tidy. I insert my code into the css tider and what do you know. It does not recognize some of my css3 syntax. I’m sure you have had prior experience with something like this. So there I was stuck, thinking to myself what can I do? I did not want to go through over 2000 lines of css code and re-arrange it all.

The Solution

If you’re reading this line first you probably could care less about what I have to say and would like to just get to the solution. Nothing wrong with that :( !

So if you’re a web developer you often used a tool called firebug. If you’re are not familiar with firebug it is a debugging tool that saves you a ton of time when developing websites since you can real time edit and it is just a cool plugin all around.

So once you have firebug installed right click>>Inspect element then select the css tabs. Now you will see your css in a neat and nicely formatted way.

So the next time you’re writing css and you have sloppy or messy code just open up firebug and re-copy your css. Also the benefit of doing it this way is if you’re using css3 it will not remove your web properties so that is awesome. The downfall is it adds things like scroll to your code but you could remove that with ease. If this method helps let me know by leaving a comment below.

  • Than

    I *almost* said, “What a great idea!” and tried this… but then I realized it would strip out all the -webkit- and -ms- etc prefixed properties, or all my IE hacks, etc.

    Nice thinking though…

  • http://www.imjan.com/ Imran Haider

    Useful Article

  • Gutergast

    @Than. Yep u got the point!

  • Alex

    I agree with Than, I wondered why i lost a cuple of hundred lines.. This is NOT a cross browser solution.

Close
Open