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

Newer Comments »
  1. Posted by Ian on Friday, August 29th, 2008.

    I’m a mul­ti-line CSS coder myself but I total­ly under­stand why peo­ple like the sin­gle-line method. It does look clean­er and more organ­ised and at first glance is easy to scan through. I’ve con­sid­ered some­thing sim­i­lar in the past where it would be good to devel­op mul­ti-line but then have some­thing to con­vert to sin­gle line just before you put it live but keep the orig­i­nal mul­ti-line file intact.

    I main­ly use Coda as a text edi­tor so I may try and see if I can get your regex method to work in that. If not then I’ll see how it turns out in TextMate. 

    Def­i­nite­ly a good call though!

  2. Posted by Dan on Friday, August 29th, 2008.

    I can absolute­ly under­stand why peo­ple like the idea of scan­ning their style sheets faster, but from a time sav­ing stand­point, I’d rather shut down my e‑mail/IM pro­grams for an hour and write indent­ed style sheets.
    I feel that this obses­sion with sav­ing time that every one seems to have, is borne out of their refusal to stop refresh­ing twit­ter every 5 min­utes or get­ting dis­tract­ed with rss feeds or e‑mails.

    There are much bet­ter ways to save time work­ing, that con­dens­ing your style sheets.

    But like I said, if you like it, and if you pre­fer it to indent­ed sheets, thats fine, but I don’t think it stands on its own as a pure­ly time-sav­ing measure.

  3. Posted by Dan Rubin on Friday, August 29th, 2008.

    @Ian: I still pre­fer writ­ing style sheets in mul­ti-line, as I’m most­ly focus­ing on prop­er­ties while author­ing. It’s when refer­ring back 6 months lat­er to a style sheet that sin­gle-line often comes in handy, since I’m a visu­al per­son and it makes scan­ning the selec­tors much easier.

    Some­thing worth check­ing out is Shaun Inman’s CSS Cacheer, which pre-process­es stylesheets on the serv­er, leav­ing the orig­i­nal source untouched (though I’m not sure if that would help when *edit­ing* CSS, which is when sin­gle-line works best for me).

  4. Posted by Dan Rubin on Friday, August 29th, 2008.

    @Dan: I don’t think you actu­al­ly read my post, did you :)

    Aside from my rant about peo­ple argu­ing which for­mat­ting is bet­ter (which I think is sil­ly and def­i­nite­ly a waste of time), I men­tion that I pre­fer work­ing in mul­ti-line, and I make no men­tion of sin­gle-line sav­ing time dur­ing the devel­op­ment process—in fact, the entire point of the arti­cle is the regex that takes a split sec­ond to run, and only after writ­ing all your styles with mul­ti-line for­mat­ting to begin with.

    This isn’t meant to be a time-sav­ing tip, but rather to make long stylesheets a bit eas­i­er to scan when div­ing into them well after they’ve been completed.

  5. Posted by Marcos on Friday, August 29th, 2008.

    I under­stand why the mul­ti­line approach is eas­i­er to read, but I pre­fer sin­gle-line to code.

    And I read in fire­bug, much much eas­i­er to find that line in the code.

    Find the selec­tor visu­al­ly in Fire­fox, see wich line fire­bug talks about, and go to the editor!

    Sin­gle-line makes it much eas­i­er to see the whole selec­tor struc­ture, be aware of speci­fici­ty, visu­aly group sim­i­lar selec­tors, etc

  6. Posted by Ian on Friday, August 29th, 2008.

    @Dan Rubin: Thanks for the tip on Shaun’s CSS Cacheer. For me per­son­al­ly it sounds like quite a good solu­tion. I like writ­ing and edit­ing in mul­ti-line because I like to quick­ly see and edit which the var­i­ous prop­er­ties of the selec­tors. Sin­gle-line (prefer­ably indent­ed) is good for a quick overview of the whole doc­u­ment to see how it’s all put togeth­er and handy when return­ing to work you haven’t touched in a while or some­one else’s code. I’m sure it must have some load­ing time ben­e­fits too being much more com­pressed with less white­space and line breaks. To have the orig­i­nal mul­ti-line file to edit and a sin­gle-line file when live would be the best of both worlds.

    It looks a lit­tle con­fus­ing at first glance but I’ll give CSS Cacheer a try to see how it works out.

    Thanks.

  7. Posted by Dan Rubin on Friday, August 29th, 2008.

    Because this is a for­mat­ting post more than any­thing, it’s worth not­ing that there are prob­a­bly improve­ments that could be made to the series of reg­u­lar expres­sions I post­ed. I can imag­ine some­one out there could fig­ure out how to com­pare all the selec­tors and indent sim­i­lar ones, or mea­sure the longest selec­tor length and then cal­cu­late the num­ber of tabs need­ed for each line to have a uni­form left-align­ment for all the dec­la­ra­tion blocks (which is how many folks for­mat when they code sin­gle-line by default).

    It’s all about options people—what works best for one per­son might be awful for anoth­er, we can’t assume that one approach works best for all people.

  8. Posted by Riddle on Friday, August 29th, 2008.

    Dan, what about edit­ing prop­er­ties and com­bin­ing rule­sets? Do you pre­fer over­writ­ing prop­er­ties with more CSS or do you opti­mize it as tight as you can?

    I pre­fer the sec­ond approach and I tend to think it’s bet­ter. It saves fel­low devel­op­ers from look­ing at clut­ter and is decreas­es the time is takes to load such CSS file.

  9. Posted by Dan Rubin on Friday, August 29th, 2008.

    @Riddle: I tend to pre­fer opti­miz­ing when there are log­i­cal­ly inher­it­ed or shared prop­er­ties, but there are many cas­es when I’ll use sep­a­rate selec­tors and repeat the prop­er­ties if I think there’s a rea­son for includ­ing the hook to adjust it in the future.

    When clients will be edit­ing the CSS once a project is fin­ished, some­times overzeal­ous opti­miza­tion of rules can make it very dif­fi­cult for a non-expert to under­stand what they’re look­ing at. Being a bit more spe­cif­ic with the selec­tors, along with com­ment­ing style sheets, can go a long way toward mak­ing it eas­i­er for oth­er peo­ple to edit and main­tain those styles.

  10. Posted by Riddle on Friday, August 29th, 2008.

    Yes, I know it’s a mat­ter of pref­er­ence, but if some­one skips opti­miza­tion and leaves dupli­cates in his/her rules then it’s a dif­fer­ent thing, isn’t it?

  11. Posted by Dan Rubin on Friday, August 29th, 2008.

    @Riddle: I’d tend to agree with you on that point: if I have a dupli­cate prop­er­ty, it’s inten­tion­al and serves a pur­pose. If some­one leaves their style sheet in an unop­ti­mized state, and does­n’t even attempt to remove unnec­es­sary dupli­cate prop­er­ties, then that falls on the lazy side.

    Of course, in the real world when fac­ing tight pro­duc­tion sched­ules, things get over­looked and dupli­cates exist. And that’s okay.

  12. Posted by David VanDusen on Friday, August 29th, 2008.

    It’s in the works:

    CSS Com­press

    It removes com­ments (which I could add as an option, I guess) and strips white­space (also an option, maybe.) You end up with a neat lit­tle css file with no super­flu­ous space oth­er than a new­line at the end of each rule set.

  13. Posted by Louis on Friday, August 29th, 2008.

    You should have a look at the series of arti­cles at Per­ish­ablePress. Here’s the last one : http://perishablepress.com/press/2008/07/05/obsessive-css-code-formatting-organization-comments-and-signatures/

  14. Posted by Dan Rubin on Friday, August 29th, 2008.

    @David: That’s a good start—having options for com­ment removal and han­dling of white space would be very use­ful, again because a lot of these things come down to per­son­al preference.

    @Louis: That’s some obses­sive-com­pul­sive CSS com­ment­ing in that arti­cle! I’m a big fan of using com­ments to orga­nize stylesheets, but there are some great exam­ples there of how com­ments can be tak­en seri­ous­ly far :)

  15. Posted by David VanDusen on Friday, August 29th, 2008.

    I’m not sure I want this to become a pet project, but I added those options.

    It occurs to me that in order to pull this CSS for­mat­ting thing off cor­rect­ly, (with options et al,) a more com­plex pars­ing of the CSS needs to take place. Beyond using reg­u­lar expres­sions to search and replace for strings in CSS code, a pars­er would cre­ate an object from the code and regen­er­ate it with the appro­pri­ate formatting.

    How­ev­er, for sit­u­a­tions like prepar­ing your CSS for pub­li­ca­tion, com­press­ing it to sin­gle-line for­mat­ting or a blob will do fine.

  16. Posted by Dan Rubin on Friday, August 29th, 2008.

    @David: Slap a logo and a few styles on that pup­py and it’s ready for prime-time! :) As you said, for the basic needs a form like this needs to fill, it does­n’t have to be com­pli­cat­ed. Tools like Con­di­tion­al CSS and Shaun’s CSS Cacheer (linked above) pro­vide oth­er, more dynam­ic ways to mess with your CSS, so it’s nice to have a few sim­ple options too.

  17. Posted by Michael Sheets on Friday, August 29th, 2008.

    You can share this macro quite eas­i­ly, just open the bun­dle edi­tor and drag the macro to the desk­top. You’ll have a file you can post and peo­ple can dou­ble-click it to install.

  18. Posted by Dan Rubin on Friday, August 29th, 2008.

    @Michael: Is that new? I’d checked the doc­u­men­ta­tion a few months ago and it was­n’t pos­si­ble (it’s been a while since I cre­at­ed this macro). I’ll give it a shot and update the post with the file download…

  19. Posted by Ben on Saturday, August 30th, 2008.

    Shar­ing bun­dles has been a fea­ture since at least 2006, when I start­ed using TextMate.

    I don’t know if the behav­ior where you can drag an item to the desk­top is new, but you’ve always been able to go to:

    ~/Library/Application Support/TextMate/Bundles

    And grab any cus­tomized bun­dle from there.

  20. Posted by Dan Rubin on Saturday, August 30th, 2008.

    @Ben: I’ve used Text­mate since the begin­ning, and was aware of shar­ing bun­dles, but I could have sworn I read some­where in the doc­u­men­ta­tion that macros could­n’t be shared… as it turns out, after search­ing through the docs for that line, I think I was just remem­ber­ing incor­rect­ly the ref­er­ence to macros not being editable (still in the Help docs in the cur­rent version).

    I’m of course hap­py to be wrong, and will be upload­ing the file as soon as I have a spare moment (on vaca­tion atm, dif­fi­cult to steal even enough time to check for and reply to comments :)

  21. Posted by Dan Rubin on Saturday, August 30th, 2008.

    Any­one who’s read this far but missed my update to the post: The Text­mate macro is now avail­able to down­load »

  22. Posted by Dmitry Baranovskiy on Monday, September 1st, 2008.

    I am per­son­al­ly use mul­ti­line stylesheets, BUT if I want quick­ly rush through­out the file I sim­ply press ??0 in Text­Mate. Search by sym­bol (??T) also works pret­ty good.
    I was play­ing with macros before and even cre­at­ed one which also alpha­be­tise prop­er­ties, but then I just found that Text­Mate is smarter then me :D

  23. Posted by Nater Kane on Tuesday, September 2nd, 2008.

    in addi­tion to the link @David shared, there’s also this.

    css­drive’s ver­sion has a few oth­er options when it comes to strip­ping cer­tain types of com­ments (to leave in a few hacks folks still make use on occa­sion) as well as light, nor­mal and super-com­pact modes for white­space stripping.

    i usu­al­ly deliv­er two copies of any style docs with any project (sim­i­lar to dev and com­pressed ver­sions of .js files). on large projects, sim­ply remov­ing line breaks can some­times save 1–2k.

  24. Posted by magnao on Tuesday, September 9th, 2008.

    Read this post, got inspired, whipped this up:
    http://magnao.com/software/flat-css/
    All JS, all client-side.

    Note on com­bined rule­sets: they’re a pain to deal with while devel­op­ing, but are very use­ful in con­serv­ing space when in pro­duc­tion. I use http://www.cssoptimiser.com/ for my CSS optimization.

  25. Posted by Dan Rubin on Friday, September 12th, 2008.

    @Nater: Thanks for the addi­tion­al link! It’s nice to have options :)

    @Magnao: Now that’s pret­ty cool! Maybe put it on a domain by itself? Either way, I’ll add it to the list of links in my next pre­sen­ta­tion along with the oth­ers not­ed previously.

    CSS Opti­miser is very cool, not sure how I’ve nev­er seen that before… def­i­nite­ly an eas­i­er way than man­u­al­ly clean­ing up your stylesheets (though there are some cas­es when you may not want to com­bine rules, e.g. for ease of main­te­nance or cus­tomiza­tion, etc.).

  26. Posted by Chad on Monday, September 15th, 2008.

    Hi, great tip! just a ques­tion, how this is dif­fer­ent from the “For­mat CSS Com­pressed” option?

    Thanks!

  27. Posted by Dan Rubin on Monday, September 15th, 2008.

    @Chad: Text­mate (and oth­ers) offer a way to com­press stylesheets into a sin­gle line file, which is dif­fer­ent from sin­gle-line CSS as a style (com­pressed equals your entire stylesheet on one line, rather than this for­mat­ting option which puts each rule on its own line).

    I’ve added an image to the arti­cle that shows the dif­fer­ence, which should help avoid confusion :)

  28. Posted by Chad on Monday, September 15th, 2008.

    Hi Dan, thanks for the expla­na­tion. I’ve tried to com­pare both and still don’t see the dif­fer­ence that you’ve men­tioned. Here are the screenshots:

    Orig­i­nal:
    http://i34.tinypic.com/2vl5suc.png

    Using ‘For­mat CSS Compressed’:
    http://i36.tinypic.com/118g35u.png

    Using ‘For­mat CSS Single-line’:
    http://i38.tinypic.com/33yhpa8.png

    The ‘For­mat CSS Com­pressed’ is not one line for the entire stylesheet as you can see. I real­ly like your method, it would be much bet­ter if it can add an extra white­space after each ‘;’ and get rid of the extra line between each rule. Or maybe I’m doing some­thing wrong.

  29. Posted by Dan Rubin on Monday, September 15th, 2008.

    @Chad: Thanks for keep­ing me hon­est and accurate—somehow I must have been a bit con­fused when writ­ing and even proof­ing the orig­i­nal arti­cle, since I swear that Text­mate’s “For­mat CSS Com­pressed” bun­dle put every­thing on a sin­gle line in the file. *sigh*

    I’ve updat­ed the text to reflect the dif­fer­ences between my macro and the default bundle—the chief rea­son I rolled my own was to add white­space that makes it eas­i­er to scan the stylesheet quick­ly. The extra blank lines are only includ­ed if there are two or more blank lines in your orig­i­nal (when I group styles, I put two car­riage returns between blocks of relat­ed styles).

    Of course, you can cre­ate your own ver­sion of the macro by alter­ing the reg­u­lar expres­sions used, and I high­ly rec­om­mend tweak­ing it to suit your own style and needs.

  30. Posted by magnao on Sunday, September 21st, 2008.

    @Dan: Glad you think so! I’m not sure about ded­i­cat­ing a domain to the thing, but I did put up a Prism bun­dle so you can access it faster while devel­op­ing. Check it out at http://magnao.com/software/flat-css/

  31. Posted by NatalieMac on Wednesday, September 24th, 2008.

    I know of a cou­ple online tools that I’ve briefly played with:

    http://www.cleancss.com/

    http://www.codebeautifier.com/

    Both give you lots of options for orga­niz­ing your code, though I have no idea why any­one would choose to alpha­bet­ize it!

  32. Posted by Antonio Wells on Thursday, October 9th, 2008.

    My two cents… I’m a mul­ti­line ident­ed CSS coder, for me it’s eas­i­er to find stuff in hier­ar­chal code. I’m on two dif­fer­ent plat­forms, PHP and ASP.NET. All of my new­er major web appli­ca­tions are in .NET, but I real­ly dont like to use Visu­al Stu­dios CSS edi­tor… I actu­al­ly use Dreamweaver’s CSS edi­tor. I just got used to it. It’s defi­nate­ly a pref­er­ence thing.

  33. Posted by Joel on Friday, October 10th, 2008.

    I just wrote an online con­vert­er to trans­late between the two styles. You can use it here:

    http://www.newmediacampaigns.com/page/single-line-vs-multi-line-css-a-tool-to-end-the-debate

  34. Posted by Ischa Gast on Friday, October 31st, 2008.

    Hi Dan,

    I just dis­cov­ered this regex pat­tern for text­mate and it’s real­ly great. But just one thing about it.

    Is it pos­si­ble to add a num­ber of tab space before the “{“ that you get some­thing like this:
    h1,h2,h3,h4,h5,h6 { font-size:100%;font-weight:bold; }

  35. Posted by Sebastian on Thursday, December 11th, 2008.

    Thx for your work. I have cus­tomized it to have a space behind every semi­colon, because it’s a lit­tle bit bet­ter for read­ing the code.

  36. Posted by Cave on Tuesday, December 16th, 2008.

    I love CSS in sin­gle line fla­vor, but if you are using SVN type ver­sion con­trol then it can cause prob­lems with it merg­ing and con­fil­ict­ing based on line numbers.

    If you are work­ing in a team on a CSS build, you are forced to work mul­ti line to tow the line, and TBH its not a prob­lem. Just a lit­tle less scan­able to me.

  37. Posted by brent on Sunday, December 28th, 2008.

    This is great, thanks for mak­ing it pub­lic, one thing that seems to make it fall short (for me any­way) is the for­mat­ting with­in the lines. Since it removes all white space you’re left with some­thing like this:

    .entry ul { margin-left:0px;padding:0 0 0 30px;padding-left:10px; }

    where I this would be more read­able and pre­ferred by any­one (like myself) who codes in sin­gle line CSS:

    .entry ul { mar­gin-left: 0px; padding: 0 0 0 30px; padding-left: 10px; } 

    [sin­gle space after the colons and semi colons]

    would this mod­i­fi­ca­tion be easy to make?

    brent
    @
    mimoymima.com

  38. Posted by Dan Rubin on Sunday, December 28th, 2008.

    @Brent: That should­n’t be dif­fi­cult to adjust — since this is all just a series of grep pat­terns, any­thing you can write a pat­tern for can be added into the series.

    Speak­ing of which, if any­one makes their own cus­tomized ver­sions, I’d love to hear about them — come back and share them here in the comments!

  39. Posted by Chad on Tuesday, March 3rd, 2009.

    I use a mix of both sin­gle line and mul­ti­line CSS, for my own projects, I indent and com­ment sin­gle line. My first sin­gle line in a com­mon group of CSS would be the out­ter­most indent so that it just looks more organized.

    I don’t think there is actu­al­ly any (read ‑min­i­mal) space sav­ings by com­press­ing a mul­ti­line into a sin­gle line format.

  40. Posted by Trip Alexander on Monday, March 23rd, 2009.

    Looks like I am a lit­tle late to this debate, but I thought I would I would throw my way of doing it into the mix. I code CSS mult-line, but as I am cer­tain that no more adjust­ments are to be made, I con­vert it to sin­gle line. Maybe that’s odd, but it works for me.

    Thanks Dan for the macro. Look­ing for­ward to meet­ing you in a week. Head­ing to hear you speak in Atlanta.

Newer Comments »