Update: You can now download the Textmate macro file rather than recording your own (skip to the download »).
There has been plenty of discussion about the pros and cons of single-line style sheets, and I’ve been including them as an option when teaching CSS management and organization in my Web Design World presentations in Chicago, Seattle, and later this year in Las Vegas (at WebBuilder) and Boston.
It’s a matter of preference
As a fellow Sidebar-ian (Sidebarbarian?) Steve has been trying to convince me to use the single-line approach for a while of course, and Bryan and Jon have also become fans of this formatting style for their own work. Although they are enamored with it, I haven’t taken to it yet, still preferring to write my style sheets using the “normal” indented formatting most of us are used to.
Now, before anyone gets their knickers in a twist about why they love, hate, “can’t live without” or “will die before they try” single-line formatting, let’s just take a step back and remember one thing: it isn’t anything special, just an alternate formatting style that doesn’t affect the way the browser interprets the style sheet one iota. It’s a personal preference—remember that before jumping on or off this particular bandwagon.
Always keep your options open
Now that I’ve got that out of my system, let’s talk practicality: there are indeed benefits to be had when using single-line CSS formatting—for example, I find it can make a difference after a project has been completed, at which point I’m usually more interested in visually scanning a style sheet for the selectors first, and then for a particular property I’m interested in editing. This is where I’ve found single-line formatting can come in handy.
But my editor already does that!
This is the point where some people will start going on about how you could just use Textmate’s “foldings” feature to get the same visual result (without altering your file), or how CSS Edit has a handy list of all the selectors in a column on the left side of its window, or that you could always use your editor’s “find” command and search for the selector you want to edit. Yet while those are all perfectly logical, sane suggestions, they don’t account for flexibility 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 editor polygamist”, bouncing from Textmate to CSS Edit to Coda to BBEdit to Transmit’s text editor and a host of CLI editors, mostly depending on my mood (though sometimes contextual if I’m at a computer that doesn’t have a particular application—a WindowsXP box with nothing but Notepad, for instance). It’s the times when I’m using an editor that doesn’t have “foldings” or pretty columns of selectors that I start to appreciate single-line CSS when making quick edits, so I’ve started converting style sheets to a “simple” single-line format (without the left-aligned tab blocks to start each rule’s properties) once they are ready to go live.
Patterns fit for a kilt
Editors like Textmate and BBEdit have built-in commands for formatting (the standard, multi-line approach) or compressing (the entire style sheet on one line, ostensibly to reduce file size by stripping white space) CSS, but no way to convert to single-line formatting and Textmate’s “Format CSS Compressed” bundle can format your stylesheet to a single line per-rule, though it’s all squished together, making it difficult to scan due to a lack of whitespace. Converting a style sheet by hand every time would be much too time-consuming to bother with, but that’s where regular expressions come to the rescue.
In Textmate, you can record a macro using each of these regex patterns as a separate step (I’m sure other editors have a similar feature, so please feel free to post details in the comments below). This allowed me to create a “Format CSS Single-line” command, complete with a keyboard shortcut, which enables an easy switch between multi- and single-line formatting.
Unfortunately, as of this writing Textmate macros cannot be exported and shared For those using Textmate, getting the macro is a simple matter of downloading, expanding and double-clicking this file:
While similar to “Format CSS Compressed”, this macro retains a single blank line where your original contained two or more blank lines (helpful if you group your rules), and adds whitespace that matches my standard formatting preferences (which I find makes it easier to scan quickly). To switch between each formatting style, just run each command in turn (via the Bundles menu or the keyboard shortcuts).
However, that wouldn’t be much use to everyone who doesn’t use Textmate, so here are the respective 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 Textmate and BBEdit I can return to multi-line formatting with a single command, but that might not be as simple in other editors. What I’d love to see is a pair of shell scripts that convert from multi- to single-line and back, and possibly a web-based processor that does the same (paste your style sheet into a textarea, select your formatting, hit “process” and the script produces the result). If anyone would like to take on those tasks, I’ll happily update this post to link to the products of your labor.
And in the end…
If you’ve never tried single-line formatting, this makes it easy to experiment without committing yourself (and I do recommend giving it a try—you may be surprised once you’ve worked with it a few times).
Ultimately, because I can return to multi-line with a single command my primary text editor should I ever feel like it, automating the switch from multi- to single-line is a convenient way to get the benefits of single-line formatting without backing myself or my clients into a formatting corner.
Comments
67 responses to “Regex Patterns for Single Line CSS”
I used to always code in straight lines, but that did have its own associated problems. I tried multi-line, but was having that same problem of not seeing the selectors.
Eventually, I settled into my current markup: I write the selector, new line, indent, create an open brace, new line, tab yet again (for two indents), and then start with my rules, each on a different line with two indents. Afterwards, I go back to one indent and close the brace.
I’m left with an easy-to-work-with multi-line environment with easily-seen selectors in the un-indented margins. The open and close braces let me see very easily where the block begins and where it ends (I’ve always been annoyed, since the first time I’d seen it done, at the practice of putting the open brace on the same line as the selector/function/etc.).
[…] SuperflousBanter.org […]
[…] here’s Dan Rubin’s macro to convert multi-line CSS to single-line (or vice […]
[…] lets you create unique Cascading Style Sheets from scratch. You can also modify your existing CSS.Regex Patterns for Single Line CSSWhile formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful […]
[…] Regex Patterns for Single Line CSSWhile formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate. […]
[…] Regex Patterns for Single Line CSSWhile formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate. […]
[…] Regex Patterns for Single Line CSSWhile formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate. […]
[…] lets you create unique Cascading Style Sheets from scratch. You can also modify your existing CSS.Regex Patterns for Single Line CSS While formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful […]
[…] Regex Patterns for Single Line CSS While formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate. […]
[…] Regex Patterns for Single Line CSS While formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate. […]
[…] Regex Patterns for Single Line CSS While formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate. […]
[…] Regex Patterns for Single Line CSS When we format our CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces so that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate. […]
[…] Regex Patterns for Single Line CSS While formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate. […]
[…] Regex Patterns for Single Line CSS While formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate. […]
[…] Padrões para CSS Regex Linha Única Ao formatar a sua folha de estilo CSS com uma única linha, você pode encontrar macro Textmate Dan Rubin útil se você o seu grupo governante e adicionar espaços em branco que faz a varredura através da página web mais fácil. Você também pode usar uma expressão regular, se você não quiser usar Textmate. […]
[…] Regex Patterns for Single Line CSS While formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate. […]
[…] Regex Patterns for Single Line CSSWhile formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate. […]