Derek Slager: Screencast: Formatting a CSS File with Emacs

Saturday, February 24, 2007
Screencast: Formatting a CSS File with Emacs

When I wrote The Case for Emacs, the main point I was attempting to convey was that Emacs is an amazingly effective editor even without the customizations it's so famous for. Right out of the box, you can do some pretty incredible things with its broad set of built-in commands. And if a simple Emacs configuration is good enough for Donald Knuth, it's good enough for us, right?

The other day I came across a CSS file that was in need of some formatting tweaks, so I slapped together a quick macro and fixed it up. Nothing special, but it got me thinking -- why not take this example to an extreme, creating the ugliest CSS file of all time, and create a screencast of cleaning the file up using a bare bones Emacs configuration? Well, here we are.

The CSS file you see getting the Emacs treatment in the screencast is not real. I intentionally created about the ugliest file I could, butchering indentation, casing, structure, mixing tabs and spaces ... you name it (the CSS file is attached, if you're especially curious).

I'm not necessarily suggesting that Emacs is the best tool for the specific task we're performing here, but it's a pretty broadly understood file format, so I thought it would be interesting way to demonstrate some of Emacs core functionality. If your favorite CSS editor has a magical "auto-format" button, by all means use it -- it's better than this strategy to be sure, but it's a lot less flexible!

The Emacs instance you see in the screencast is extremely close to a stock distribution. I made the following modifications, in the interest of making it easier to see what's going on:
1. Disabled the tool bar and menu bar.
2. Loaded mwe-log-commands.el, for demonstrating the keys pressed.
3. Enabled the downcase-region command, normally disabled.
4. Loaded a simple CSS mode for font locking.
5. Changed the default font to a narrower version, Consolas.
On with the show.

Here's a breakdown of how we attacked the file.
1. Converted tabs to spaces with untabify. This is a good first step when encountering a file as hideous as this one.
2. Normalized all spacing by compressing multiple spaces and newlines to a single space, using a regular expression replacement.
3. Added newlines after all open braces ({) using a macro. Also used just-one-space before the brace to make the spacing consistent.
4. Added newlines after all semi-colons, again using a macro. Also compressed space in front of the semi-colons, and added a space after the colon delimiting the property from the value.
5. Used another macro for adding newlines before and after the close braces. I added the extra spaces before using delete-blank-lines because the spacing varied based on whether or not a trailing semi-colon was present.
6. Killed a few empty blocks, using backward-paragraph to quickly navigate blocks.
7. Executed another macro to make the property name case consistent (made them all lower-case).
8. Sorted properties by name within each block using a macro to regionize the block and call sort-lines.
9. Compressed expanded forms of margin and padding specification to a single line, using a multi-line regular expression replacement with a reference to a captured group in the replacement string.
10. Performed a few simple manual cleanups, and updated the messaging.
Attachments
- fugly.css
9 CommentsPosted at 11:14 PM to Categories: Emacs

Comments

Sunday, February 25, 2007 3:39:04 PM by pedro
you rock!
Sunday, February 25, 2007 6:18:53 PM by nirs
Can you attach the list of commands used (as seen in the smaller buffer in the screencast).

How about transforming this into a script that can format any CSS to standard format in one click?
Monday, February 26, 2007 6:10:51 PM by Edward O'Connor
Any interest in being added to Planet Emacsen?
Tuesday, February 27, 2007 9:54:11 PM by Derek
nirs: I don't happen to have it handy. I should have thought to save it. I'll re-create it when I get a chance and update the post.

Edward: Sure, thanks.
Saturday, March 03, 2007 3:32:13 PM by Lennart
Maybe this can be helpful too:

- There is a list of css modes at http://www.emacswiki.org/cgi-bin/wiki/CssMode. (I use Stefan Monnier's version.)

- There is a good page explaining the new query-replace-regex at http://steve-yegge.blogspot.com/2006/06/shiny-and-new-emacs-22.html
Monday, March 12, 2007 4:32:14 PM by Random Guy
Superb!
Wednesday, March 21, 2007 3:06:41 AM by ThumThing
You know what would be nice, for an outsider like me, a screencast with some sound and before you do each command, you explain what you're going to do, what key combo and what its going to do..

this shows us how great you are with emacs. that is nice to know, but hey, how'z'about throwing a bone to us beginners?

this thing flew by and I'm like.. okay .. what's happening here?

anyways.. thanks for the cast. No offence, its good to showcase to the initiated, and pretty much useless for us un-initiated.
Monday, March 26, 2007 8:49:06 AM by K
Wow, this is really neat. I was introduced to emacs about 2 years ago, never really got into it before this year; this screencast really helped me get a feel for why emacs is so popular.

How come the emacs tutorials don't start off with the keyboard-macros? I mean, that's what gave emacs its name, and I didn't even know how useful they were until now, so I've never used them before... (Already I'm wondering however I managed without them.)
Thursday, May 24, 2007 6:31:11 PM by Trevor Bernard
I'm sure Derek Slager is a pretty busy man. If there is enough interest I'll take the time to explain (to the best of my ability) what and why he is doing each command.

Cheers

Derek Slager

Screencast: Formatting a CSS File with Emacs

Attachments

Comments

About

Recent

Categories