Wee CSS Tidy Textmate Bundle
May 12th, 2010 by pyrat
Nobody likes clutter!
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.
November 23rd, 2011 at 12:31 am
When I search for a css tidy textmate bundle I was really excited to find this bundle.. I immediately downloaded the zip, read the readme file, verified I had > php5 installed and accessible via cl, installed the bundle, reloaded textmate and went to try to tidy a rather hefty css file. Instead of solving my broken window issue, I received this output:
Parse error: syntax error, unexpected ‘=’ in /private/tmp/temp_textmate.InLbpb on line 3
I poked around the bundle file for a bit, however was unable to solve the issue.
I was wondering if someone may be able to assist me here.
November 23rd, 2011 at 10:41 am
Hi John,
Can you add an issue to the github project page with the example CSS you are trying to beautify. I can then look into this further for you.
Cheers.
December 5th, 2011 at 5:00 am
I get the same problem while trying to beautify this CSS with your bundle:
.inputB,select,.inputS{background-color: #F1F1F1; color: #333333; border: 1px solid #CCCCCC;font-family:Arial;}
.captionL,.captionM,.captionR,.captionF,.captionD,label{color:#666666;font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:bold;}
label { display: block; margin: 0 0 5px 0; }
.inputB { font-size:12px; font-weight:normal; font-weight:normal; padding-left:5px; padding-top:2px; text-align: left; width: 145px; height:20px;}
.selectS{ font-size:12px; font-weight:normal; font-weight:normal; width: 50px;}
select{ font-size:12px; font-weight:normal; font-weight:normal; width: 150px;}
.inputS { font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal; font-weight:normal; padding-left:5px; padding-top:2px; text-align: left; width: 41px; height:20px;}
.captionL{padding:2px;text-align:left;width:200px;padding-left:30px;}
.captionR{padding:2px;text-align:left;width:200px;}
.captionM{padding:2px;text-align:left;width:200px;}
.captionD{padding:2px;text-align:left;width:400px;padding-left:5px;}
.captionF{padding:10px;text-align:center;width:520px;}
.border {font-family: Verdana;font-size: 11px;font-weight:normal;color: #000000;background: transparent; border: 0px double #CCCCCC;}
.captionE{padding:10px;text-align:left;width:600px;padding-left:30px;}
.style10 {
color: #FFFFCC
}
body {margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px;}
.style4 {
font-size: 12pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style9 {
line-height: 17px;
font-family: Tahoma;
font-size: 12px;
}
December 6th, 2011 at 2:57 pm
Thanks for reporting, this has been fixed in the most recent version.