Wee CSS Tidy Textmate Bundle
I am getting used to pretty code. I have the ruby beautifier textmate bundle, the excellent jstools (a beautifier and jslint validation for javascript) and my home made wee php beautifier for my php code.
One thing that was missing was my css code, large css files can quickly get out of hand and especially when working with other developers it is nice to be able to make code look nice and clean with the minimal amount of effort.
This also fits in with the no broken window theory analogy coined by the pragmatic programmers
Andy Hunt said:
Researchers studying urban decay wanted to find out why some neighbourhoods escape the ravages of the inner city, and others right next door—with the same demographics and economic makeup—would become a hell hole where the cops were scared to go in. They wanted to figure out what made the difference.
The researchers did a test. They took a nice car, like a Jaguar, and parked it in the South Bronx in New York. They retreated back to a duck blind, and watched to see what would happen. They left the car parked there for something like four days, and nothing happened. It wasn’t touched. So they went up and broke a little window on the side, and went back to the blind. In something like four hours, the car was turned upside down, torched, and stripped—the whole works.
They did more studies and developed a “Broken Window Theory.” A window gets broken at an apartment building, but no one fixes it. It’s left broken. Then something else gets broken. Maybe it’s an accident, maybe not, but it isn’t fixed either. Graffiti starts to appear. More and more damage accumulates. Very quickly you get an exponential ramp. The whole building decays. Tenants move out. Crime moves in. And you’ve lost the game. It’s all over.
We use the broken window theory as a metaphor for managing technical debt on a project.
The bundle is hosted on github. It uses the excellent CSStidy project behind the scenes so make sure that you have php installed on your machine as CLI. > version 5.
Ctrl + alt + option + c will beautify your css file that you have open in the browser. It assumes that you are using 2 spaces for a tab instead of tab characters. So make sure you are using soft tabs in your code.
Install Instructions
- Download it
- Double click on the tmbundle to install it.
Contributing
The source is available on github. One of the big things which can be added is the addition of textmate options to control the behaviour of CSSTidy. At the moment it just makes the CSS look pretty in a way that I think is pretty. It might be ugly to the one line per definition kids.