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

Dan Rubin's SuperfluousBanter

Suffering from chronic idiocy 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 plenty of dis­cus­sion about the pros and cons of single-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 Chicago, Seat­tle, and later this year in Las Vegas (at Web­Builder) and Boston.

It’s a mat­ter 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 single-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 taken to it yet, still pre­fer­ring to write my style sheets using the “nor­mal” indented 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” single-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 doesn’t affect the way the browser inter­prets the style sheet one iota. It’s a per­sonal 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­ity: there are indeed ben­e­fits to be had when using single-line CSS formatting—for exam­ple, I find it can make a dif­fer­ence after a project has been com­pleted, at which point I’m usu­ally more inter­ested in visu­ally scan­ning a style sheet for the selec­tors first, and then for a par­tic­u­lar prop­erty I’m inter­ested in edit­ing. This is where I’ve found single-line for­mat­ting can come in handy.

But my edi­tor already does that!

This is the point where some peo­ple will start going on about how you could just use Textmate’s “fold­ings” fea­ture to get the same visual 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 editor’s “find” com­mand and search for the selec­tor you want to edit. Yet while those are all per­fectly log­i­cal, sane sug­ges­tions, they don’t account for flex­i­bil­ity 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­dit to Transmit’s text edi­tor and a host of CLI edi­tors, mostly depend­ing on my mood (though some­times con­tex­tual if I’m at a com­puter that doesn’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 doesn’t have “fold­ings” or pretty columns of selec­tors that I start to appre­ci­ate single-line CSS when mak­ing quick edits, so I’ve started con­vert­ing style sheets to a “sim­ple” single-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.

Pat­terns fit for a kilt

Edi­tors like Text­mate and BBE­dit have built-in com­mands for for­mat­ting (the stan­dard, multi-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 single-line for­mat­ting and Textmate’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 together, 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-consuming to bother 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 other 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 Single-line” com­mand, com­plete with a key­board short­cut, which enables an easy switch between multi– and single-line formatting.

Unfor­tu­nately, as of this writ­ing Text­mate macros can­not be exported and shared For those using Text­mate, get­ting the macro is a sim­ple mat­ter of down­load­ing, expand­ing and double-clicking 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 matches my stan­dard for­mat­ting pref­er­ences (which I find makes it eas­ier to scan quickly). 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­ever, that wouldn’t be much use to every­one who doesn’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 miss­ing

In Text­mate and BBE­dit I can return to multi-line for­mat­ting with a sin­gle com­mand, but that might not be as sim­ple in other edi­tors. What I’d love to see is a pair of shell scripts that con­vert from multi– to single-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­pily update this post to link to the prod­ucts of your labor.

And in the end…

If you’ve never tried single-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­mately, because I can return to multi-line with a sin­gle com­mand my pri­mary text edi­tor should I ever feel like it, automat­ing the switch from multi– to single-line is a con­ve­nient way to get the ben­e­fits of single-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 Ian on Friday, August 29th, 2008.

    I’m a multi-line CSS coder myself but I totally under­stand why peo­ple like the single-line method. It does look cleaner 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 develop multi-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 multi-line file intact.

    I mainly 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­nitely a good call though!

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

    I can absolutely 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 indented 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­tracted 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 indented sheets, thats fine, but I don’t think it stands on its own as a purely time-saving measure.

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

    @Ian: I still pre­fer writ­ing style sheets in multi-line, as I’m mostly focus­ing on prop­er­ties while author­ing. It’s when refer­ring back 6 months later to a style sheet that single-line often comes in handy, since I’m a visual 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-processes stylesheets on the server, leav­ing the orig­i­nal source untouched (though I’m not sure if that would help when *edit­ing* CSS, which is when single-line works best for me).

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

    @Dan: I don’t think you actu­ally 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 silly and def­i­nitely a waste of time), I men­tion that I pre­fer work­ing in multi-line, and I make no men­tion of single-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 multi-line for­mat­ting to begin with.

    This isn’t meant to be a time-saving tip, but rather to make long stylesheets a bit eas­ier 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­ier to read, but I pre­fer single-line to code.

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

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

    Single-line makes it much eas­ier to see the whole selec­tor struc­ture, be aware of speci­ficity, 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­ally it sounds like quite a good solu­tion. I like writ­ing and edit­ing in multi-line because I like to quickly see and edit which the var­i­ous prop­er­ties of the selec­tors. Single-line (prefer­ably indented) is good for a quick overview of the whole doc­u­ment to see how it’s all put together 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 multi-line file to edit and a single-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 posted. 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 needed for each line to have a uni­form left-alignment for all the dec­la­ra­tion blocks (which is how many folks for­mat when they code single-line by default).

    It’s all about options people—what works best for one per­son might be awful for another, 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 decreases 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­cally inher­ited or shared prop­er­ties, but there are many cases 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­cific with the selec­tors, along with com­ment­ing style sheets, can go a long way toward mak­ing it eas­ier for other 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­erty, it’s inten­tional and serves a pur­pose. If some­one leaves their style sheet in an unop­ti­mized state, and doesn’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 other 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­sonal preference.

    @Louis: That’s some obsessive-compulsive 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 taken seri­ously 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­rectly, (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 parser would cre­ate an object from the code and regen­er­ate it with the appro­pri­ate formatting.

    How­ever, for sit­u­a­tions like prepar­ing your CSS for pub­li­ca­tion, com­press­ing it to single-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 puppy and it’s ready for prime-time! :) As you said, for the basic needs a form like this needs to fill, it doesn’t have to be com­pli­cated. Tools like Con­di­tional CSS and Shaun’s CSS Cacheer (linked above) pro­vide other, more dynamic 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­ily, 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 double-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 wasn’t pos­si­ble (it’s been a while since I cre­ated 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 started 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 couldn’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­rectly the ref­er­ence to macros not being editable (still in the Help docs in the cur­rent version).

    I’m of course happy 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­ally use mul­ti­line stylesheets, BUT if I want quickly rush through­out the file I sim­ply press ??0 in Text­Mate. Search by sym­bol (??T) also works pretty good.
    I was play­ing with macros before and even cre­ated 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.

    cssdrive’s ver­sion has a few other 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-compact modes for white­space stripping.

    i usu­ally deliver 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­tional link! It’s nice to have options :)

    @Magnao: Now that’s pretty 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 noted previously.

    CSS Opti­miser is very cool, not sure how I’ve never seen that before… def­i­nitely an eas­ier way than man­u­ally clean­ing up your stylesheets (though there are some cases 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 single-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 Com­pressed’:
    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 really 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 Textmate’s “For­mat CSS Com­pressed” bun­dle put every­thing on a sin­gle line in the file. *sigh*

    I’ve updated 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­ier to scan the stylesheet quickly. The extra blank lines are only included 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 related 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 highly 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 idented CSS coder, for me it’s eas­ier to find stuff in hier­ar­chal code. I’m on two dif­fer­ent plat­forms, PHP and ASP.NET. All of my newer major web appli­ca­tions are in .NET, but I really dont like to use Visual Stu­dios CSS edi­tor… I actu­ally use Dreamweaver’s CSS edi­tor. I just got used to it. It’s defi­nately a pref­er­ence thing.

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

    I just wrote an online con­verter 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 really 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 multi 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 within 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 { margin-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 shouldn’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­ally 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.

  41. 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­ated prob­lems. I tried multi-line, but was hav­ing that same prob­lem of not see­ing the selec­tors.
    Even­tu­ally, 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 multi-line envi­ron­ment with easily-seen selec­tors in the un-indented mar­gins. The open and close braces let me see very eas­ily 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.).