Tidy Your CSS

April 28, 2011 3:58 PM

ProCSSor is a powerful (and wholly free) CSS prettifier that lets you format CSS in the exact way you want. Turn your CSS into something that is visually more compelling and readable with a minimum of effort.
posted by netbros (27 comments total)

?? I don't understand... I put in my css and it didn't do anything interesting

oh it's for jumbled CSS?
posted by the mad poster! at 4:04 PM on April 28, 2011 [6 favorites]

Nice.
posted by eyeballkid at 4:30 PM on April 28, 2011

Input: dog's breakfast generated by content provider
Output: readable CSS

*weeps with joy*
posted by maudlin at 4:39 PM on April 28, 2011 [2 favorites]

Oh, and that's a cool little logo, too. Looks both like gears and pretty, pretty roses.
posted by maudlin at 4:40 PM on April 28, 2011

Too bad you can't link. It sure makes the MeFi css purty.
posted by blue_beetle at 5:16 PM on April 28, 2011

blue_beetle: it looks like you can punch in the url of your speadsheet - is that what you're looking for?
posted by Old'n'Busted at 5:30 PM on April 28, 2011

Finally, a way to make sense of Google's stylesheets. Those things are worse than Hitler.
posted by ryanrs at 5:30 PM on April 28, 2011

Well, there's something you don't see every day: someone Godwinning a thread about formatting CSS files.
posted by Old'n'Busted at 5:51 PM on April 28, 2011 [17 favorites]

If you run the CSS for that same page through there... it is readable!
(OK, not original)
posted by twidget at 6:03 PM on April 28, 2011

This seems useful for reading minified CSS files you don't own, but other than that I don't get it. The CSS delivered to the browser needs to be succinct, not readable.
posted by sanko at 6:17 PM on April 28, 2011

You don't think this is Godwin-worthy? It doesn't even have linebreaks.

body{margin:0;width:100%;height:100%} body,td,input,textarea,select{font-family:arial,sans-serif} input,textarea,select{font-size:100%} #loading{position:absolute;width:100%;height:100%;z-index:1000;background-color:#fff} .cmsg{margin:1em} .msg{font-weight:bold} #inprev{margin:2%;font-size:80%;display:none} .ipr-title{color:#000;font-size:x-large;font-weight:bold;padding-bottom:5px;position:relative} .ipr-lg{position:absolute;right:0;bottom:0;font-size:small;padding:5px} #inprev-items{border:solid 1px #000;color:#000;border-collapse:collapse;padding:10px;width:100%} #inprev-empty{display:none} .ipr-nowrap{white-space:nowrap;padding:5px} .ipr-other{padding:1px} .ipr-cut{overflow:hidden;height:1.3em;padding-top:0.3em} .ipr-unread{font-weight:bold} .ipr-snippet{font-weight:normal;color:#444} .lpb{margin:2px 0;border:1px solid #949dad;width:300px;height:0.5em;overflow:hidden;padding:1px} #lpt{background:#d4e4ff;width:0;height:100%;font-size:0} .invfr{position:absolute;left:0;top:0;z-index:-1;width:0;height:0;border:0} .con-slow{border:1px solid #fad163;display:none;background:#fae5b0;font-size:80%;padding:4px} .msgb{position:absolute;right:0;font-size:12px;font-weight:normal;color:#000;background:#fff;padding:20px}

posted by ryanrs at 6:20 PM on April 28, 2011

Neat. I know just enough CSS to be scared of it, but not enough to be too dangerous.

I am happy to say though this did nothing to make mine look better!

I'd be happy if it would minify mine and perhaps combine the combinable things (like if left right top and bottom all have the same values).

I am throwing this into my webdev folder all the same.
posted by cjorgensen at 6:56 PM on April 28, 2011

Nice. I might use this for some barfy stylesheets...
posted by Catblack at 7:31 PM on April 28, 2011

This seems useful for reading minified CSS files you don't own, but other than that I don't get it.

I had to add several pages and some custom CSS to a huge site with massively compressed CSS code last year. I wasn't taking code I didn't own: I was augmenting it, and I had to be able to understand what the fuck was in there first.

The CSS delivered to the browser needs to be succinct, not readable.

The CSS delivered to the brain of the developer needs to be human-friendly so the sodding thing can actually be made to work. Once it works, then yeah, minify it if needed, and put it through this tool when the inevitable future revisions come up.
posted by maudlin at 7:33 PM on April 28, 2011 [1 favorite]

My CSS kinda looks like this already. But the sites I code for get a few hundred or maybe several thousand hits on a wildly popular day. I doubt not having compressed CSS is doing much to my server.
posted by maxwelton at 7:51 PM on April 28, 2011

<neckbeard>If you can't write your own regexes to do this maybe you shouldn't be in this business.</neckbeard>

Actually, this is really cool.

Only real issue I have with this is that I organize properties by type (in roughly the order of display, position, size/padding/border/margin, style/color, font/text...). So the properties of any DOM element that relevant to its position or visibility, or which can affect the position or visibility of other DOM elements are always at the top of the list of properties, while the purely cosmetic properties are at the end. It's somewhat arbitrary but can make severely gnarly stylesheets relatively easy to skim, since, say, everything relevant to what makes a block of text look like a particular kind of column are invariably grouped together.
posted by ardgedee at 8:20 PM on April 28, 2011

The CSS delivered to the brain of the developer needs to be human-friendly so the sodding thing can actually be made to work. Once it works, then yeah, minify it if needed, and put it through this tool when the inevitable future revisions come up.

No need to minify things permanently: the CSS (and JS) can be re-minified and cached whenever it is changed and the next version pushed live, automatically, as part of that process (and you're using a source-code-revisioning system well-integrated with your release protocol right? Right...). I've worked with UI coders/designers who insisted on formatting their CSS in that one long line format style and it was like pulling teeth getting them to understand that 1) reading poorly formatted syntax has a significant negative effect on productivity (and they aren't the only ones that have to read their crap CSS), and 2) compressing CSS and JS into a smaller format to improve user experience can be had by automating the process, because computer programs are remarkably good at parsing files that were meant to be parsed by computer programs.

Back to the topic at hand, for un-mangling inherited code or stuff you're trying to understand from some random web site, this seems great, especially with all those nice customization options. But as part of one's own development process, this shouldn't be necessary.
posted by dubitable at 6:19 AM on April 29, 2011 [1 favorite]

ryanrs, that's a minified stylesheet, a pretty standard way to distribute css and JavaScript.

maudlin, normally you would want to minify the css as part of the build/deploy process so you'd always have a readable copy in your development area, not keep going back and forth.

Another good tool for mentally managing stylesheets is Sass, which lets you use programming concepts like variables and nesting blocks in a sort of psuedo stylesheet that gets translated to real css on the fly.
posted by Who_Am_I at 6:26 AM on April 29, 2011

Yes, I know what it is. It's just about the dumbest form of data compression in the last 30 years, too.
posted by ryanrs at 6:39 AM on April 29, 2011

the CSS (and JS) can be re-minified and cached whenever it is changed and the next version pushed live, automatically, as part of that process (and you're using a source-code-revisioning system well-integrated with your release protocol right?

And what sort of system can be set up to do this? I'm genuinely curious.
posted by schmod at 7:45 AM on April 29, 2011

schmod, Drupal can do this. At least, it can take a bunch of CSS or JS files as specified in the theme settings, combine them into a single CSS & single JS file, and put the CSS all on one line. I don't think it does any combining of properties or anything like that. I find the caching part occasionally wonky, although that may just be me.
posted by epersonae at 8:14 AM on April 29, 2011

schmod, try Minify.
posted by anekona at 9:23 AM on April 29, 2011

Sorry, didn't see that Who_Am_I posted the same link. :)
posted by anekona at 9:25 AM on April 29, 2011

What sort of... oh man, I've been living entirely on the developer-not-web-developer end of things so long that not realizing things can be done at release time or at the time you build your deployment artifacts seems so very foreign.

I think we have build systems and scripts that actually write and organize 3/4 of the project before sticking it on the server.
posted by mikeh at 9:07 PM on April 29, 2011

<neckbeard>If you can't write your own regexes to do this maybe you shouldn't be in this business.</neckbeard>

Parsing CSS with a regex? Sir, I insist you surrender your neckbeard.
posted by atrazine at 9:09 PM on April 29, 2011

And what sort of system can be set up to do this? I'm genuinely curious.

schmod, most modern web development frameworks that are worth anything should be doing this sort of thing, or at least providing the capability to do it if it's not done out of the box. I work primarily in Rails these days, but I'm betting any MVC system in a commonly used language (say PHP's CakePHP; Python's Django; Java's Spring; Perl's Catalyst, etc.) provides ways to serve minified, compressed and cached files as a matter of course. This can be done as part of the build/release process (that is, the build/release scripts can minify stuff and the web app doesn't do any of that work at all, just deals with caching perhaps, and the web server serves the assets, compressed ideally), or part of the page-serving process (the web app has more intelligence and checks to see if the static assets have been minified and either minifies them or pulls a cached minified version from storage to serve).

And these are just two models, I'm sure I'm forgetting many other ways to do this. It could be in an Apache module (one google search later...), for example, if say you had separate assets servers as sites do once they have to scale; it makes no sense to hit a web app for serving static assets in the end (although Rails lets you do stuff like redirect requests to different rack applications depending on the route, which partially resolves this and is pretty nifty). Etc., etc. There are many ways to go about it.

</sorta offtopic and more than you wanted to know perhaps>
posted by dubitable at 1:48 AM on April 30, 2011

> Parsing CSS with a regex? Sir, I insist you surrender your neckbeard.

Not to parse it, to clean it up. I'll type anything I feel like while I'm working, but it's always made clean before being put away the end of the day.
posted by ardgedee at 6:10 PM on April 30, 2011