About this site's lack of design: Yes, it's supposed to look this way — I'm using a sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977

|

Regex Patterns for Single Line CSS

Update: You can now down­load the Text­mate macro file rather than record­ing your own (skip to the down­load »).

There has been plen­ty of dis­cus­sion about the pros and cons of sin­gle-line style sheets, and I’ve been includ­ing them as an option when teach­ing CSS man­age­ment and orga­ni­za­tion in my Web Design World pre­sen­ta­tions in Chica­go, Seat­tle, and lat­er this year in Las Vegas (at Web­Builder) and Boston.

It’s a matter of preference

As a fel­low Side­bar-ian (Side­bar­bar­ian?) Steve has been try­ing to con­vince me to use the sin­gle-line approach for a while of course, and Bryan and Jon have also become fans of this for­mat­ting style for their own work. Although they are enam­ored with it, I haven’t tak­en to it yet, still pre­fer­ring to write my style sheets using the “nor­mal” indent­ed for­mat­ting most of us are used to.

Now, before any­one gets their knick­ers in a twist about why they love, hate, “can’t live with­out” or “will die before they try” sin­gle-line for­mat­ting, let’s just take a step back and remem­ber one thing: it isn’t any­thing spe­cial, just an alter­nate for­mat­ting style that does­n’t affect the way the brows­er inter­prets the style sheet one iota. It’s a per­son­al preference—remember that before jump­ing on or off this par­tic­u­lar bandwagon.

Always keep your options open

Now that I’ve got that out of my sys­tem, let’s talk prac­ti­cal­i­ty: there are indeed ben­e­fits to be had when using sin­gle-line CSS formatting—for exam­ple, I find it can make a dif­fer­ence after a project has been com­plet­ed, at which point I’m usu­al­ly more inter­est­ed in visu­al­ly scan­ning a style sheet for the selec­tors first, and then for a par­tic­u­lar prop­er­ty I’m inter­est­ed in edit­ing. This is where I’ve found sin­gle-line for­mat­ting can come in handy.

But my editor already does that!

This is the point where some peo­ple will start going on about how you could just use Text­mate’s “fold­ings” fea­ture to get the same visu­al result (with­out alter­ing your file), or how CSS Edit has a handy list of all the selec­tors in a col­umn on the left side of its win­dow, or that you could always use your edi­tor’s “find” com­mand and search for the selec­tor you want to edit. Yet while those are all per­fect­ly log­i­cal, sane sug­ges­tions, they don’t account for flex­i­bil­i­ty and choice.

Just another way of doing things

Much like Jon Hicks with his harem of web browsers, I tend to be a bit of a “text edi­tor polyg­a­mist”, bounc­ing from Text­mate to CSS Edit to Coda to BBE­d­it to Trans­mit’s text edi­tor and a host of CLI edi­tors, most­ly depend­ing on my mood (though some­times con­tex­tu­al if I’m at a com­put­er that does­n’t have a par­tic­u­lar application—a Win­dowsXP box with noth­ing but Notepad, for instance). It’s the times when I’m using an edi­tor that does­n’t have “fold­ings” or pret­ty columns of selec­tors that I start to appre­ci­ate sin­gle-line CSS when mak­ing quick edits, so I’ve start­ed con­vert­ing style sheets to a “sim­ple” sin­gle-line for­mat (with­out the left-aligned tab blocks to start each rule’s prop­er­ties) once they are ready to go live.

Patterns fit for a kilt

Edi­tors like Text­mate and BBE­d­it have built-in com­mands for for­mat­ting (the stan­dard, mul­ti-line approach) or com­press­ing (the entire style sheet on one line, osten­si­bly to reduce file size by strip­ping white space) CSS, but no way to con­vert to sin­gle-line for­mat­ting and Text­mate’s “For­mat CSS Com­pressed” bun­dle can for­mat your stylesheet to a sin­gle line per-rule, though it’s all squished togeth­er, mak­ing it dif­fi­cult to scan due to a lack of white­space. Con­vert­ing a style sheet by hand every time would be much too time-con­sum­ing to both­er with, but that’s where reg­u­lar expres­sions come to the rescue.

In Text­mate, you can record a macro using each of these regex pat­terns as a sep­a­rate step (I’m sure oth­er edi­tors have a sim­i­lar fea­ture, so please feel free to post details in the com­ments below). This allowed me to cre­ate a “For­mat CSS Sin­gle-line” com­mand, com­plete with a key­board short­cut, which enables an easy switch between mul­ti- and sin­gle-line formatting.

Unfor­tu­nate­ly, as of this writ­ing Text­mate macros can­not be export­ed and shared For those using Text­mate, get­ting the macro is a sim­ple mat­ter of down­load­ing, expand­ing and dou­ble-click­ing this file:

While sim­i­lar to “For­mat CSS Com­pressed”, this macro retains a sin­gle blank line where your orig­i­nal con­tained two or more blank lines (help­ful if you group your rules), and adds white­space that match­es my stan­dard for­mat­ting pref­er­ences (which I find makes it eas­i­er to scan quick­ly). To switch between each for­mat­ting style, just run each com­mand in turn (via the Bun­dles menu or the key­board shortcuts).

How­ev­er, that would­n’t be much use to every­one who does­n’t use Text­mate, so here are the respec­tive groups of regex I used for the conversion:

\n{3,}
\n\n

[ \t]+
 
(?m)([;:])\s+
$1

\s*}
 }

\s*{\s*
 { 

[ \t]*,[ \t]*
,

@import(.*?);
@import$1;\n\n

What’s missing

In Text­mate and BBE­d­it I can return to mul­ti-line for­mat­ting with a sin­gle com­mand, but that might not be as sim­ple in oth­er edi­tors. What I’d love to see is a pair of shell scripts that con­vert from mul­ti- to sin­gle-line and back, and pos­si­bly a web-based proces­sor that does the same (paste your style sheet into a textarea, select your for­mat­ting, hit “process” and the script pro­duces the result). If any­one would like to take on those tasks, I’ll hap­pi­ly update this post to link to the prod­ucts of your labor.

And in the end…

If you’ve nev­er tried sin­gle-line for­mat­ting, this makes it easy to exper­i­ment with­out com­mit­ting your­self (and I do rec­om­mend giv­ing it a try—you may be sur­prised once you’ve worked with it a few times).

Ulti­mate­ly, because I can return to mul­ti-line with a sin­gle com­mand my pri­ma­ry text edi­tor should I ever feel like it, automat­ing the switch from mul­ti- to sin­gle-line is a con­ve­nient way to get the ben­e­fits of sin­gle-line for­mat­ting with­out back­ing myself or my clients into a for­mat­ting corner.

This item was posted by Dan Rubin on Friday, August 29th, 2008.

Categories:

You can follow comments on this item via the RSS 2.0 feed.

Comments are closed, but you can trackback from your own site.

67 comments on “Regex Patterns for Single Line CSS

« Older Comments
  1. Posted by Michael Kozakewich on Saturday, May 9th, 2009.

    I used to always code in straight lines, but that did have its own asso­ci­at­ed prob­lems. I tried mul­ti-line, but was hav­ing that same prob­lem of not see­ing the selectors.
    Even­tu­al­ly, I set­tled into my cur­rent markup: I write the selec­tor, new line, indent, cre­ate an open brace, new line, tab yet again (for two indents), and then start with my rules, each on a dif­fer­ent line with two indents. After­wards, I go back to one indent and close the brace.
    I’m left with an easy-to-work-with mul­ti-line envi­ron­ment with eas­i­ly-seen selec­tors in the un-indent­ed mar­gins. The open and close braces let me see very eas­i­ly where the block begins and where it ends (I’ve always been annoyed, since the first time I’d seen it done, at the prac­tice of putting the open brace on the same line as the selector/function/etc.).

« Older Comments