Using Single-line calls on Flickr

Matthew Pennell says:

I find that using CSSEdit, with its rule preview pane on the left, means that I can write "regular" (i.e. multi-line) CSS and still be able to easily find stuff and see how things are grouped. I hate editing CSS like yours. ;)
Posted 15 months ago. ( permalink )

kneath84 says:

Ugh, see... to me that's completely unreadable.

Finding styles is easy for me (command-f ftw). I want a visual representation of what the style means when I look at it (margin, padding, fonts, colors)
Posted 15 months ago. ( permalink )

jlbruno says:

oh my, that would drive me nuts.

no order to the attributes either.

looks nice here on Flickr, though!
Posted 15 months ago. ( permalink )

Oльга + Haфaн says:

@Matthew -- Agreed. I think we need to have an intervention, where we all sit down and reason with Jonathan, to help him get back on track. We're here for ya, man. It's not a confrontation, it's a care-frontation. :)
Posted 15 months ago. ( permalink )

serpicolugnut says:

Man, I feel sorry for the guy who has to come behind you and edit that.
Posted 15 months ago. ( permalink )

Luke Dorny (luxuryluke) says:

I just see red. If i used a 30 inch monitor that might be a great way for me to do it.
I love CSS Edit on the mac, though. Having 3 vertical panels for attributes, code, and live preview work well for me.
Posted 15 months ago. ( permalink )

twofivethreetwo says:

I'm a multi-line in CSSEdit person. I agree with the others that to me that is just unreadable. I hate when I have to go behind somebody and their css is like that.
Posted 15 months ago. ( permalink )

Dave McNally says:

That's how it should be. I much prefer working on and editing CSS set out like this as opposed to the multi-line mess that I was first introduced to.
Posted 15 months ago. ( permalink )

Anton Peck says:

So... where's the part where Ultraedit can let you single-click-navigate the declarations? ;) And, how's it look if you narrow your window to about 400px wide?

And... is that a HORIZONTAL SCROLLBAR I see?!? Oh, hell no.

Each to his own, huh?
Posted 15 months ago. ( permalink )

Voyagerfan5761 says:

Multi-line all the way. I used to not indent properties, though, which made it harder to read, but now I use two spaces on all lines within { and }. Single-line CSS rules make me crazy.
Posted 15 months ago. ( permalink )

M. Keefe says:

I have to go against all others here, that is very easy for me to read.. honestly.
Posted 15 months ago. ( permalink )

Jonathan Snook says:

@kneath84: But it's never about just finding a single rule. It's about how the rule interacts with everything around it, hence why this (for me) drives simpler code and I can more readily see how everything is getting applied around it.

When working with multi-line, I find I'm more likely to just define a new rule that overrides an old one, tack on some extra selectors for specificity and move on. Not as maintainable.

@serpicolugnut: my code is perfect. Nobody ever needs to maintain it. :)

@bruno1378: I have a pseudo-order but it's not very clear and I don't stick to it. ;-p
Posted 15 months ago. ( permalink )

easykill says:

Thank God for auto-formatting tools, which is the first thing I would use on this if I ever had to edit it.
Posted 15 months ago. ( permalink )

NICCAI says:

I'm all about single lines too, but the selector rule alignment is a maintenance nightmare. What do you do when your selector needs to be longer? Indent every line again? Also, do you shrink it when you deploy or not care?
Posted 15 months ago. ( permalink )

chris-powell says:

That may well be the most beautiful style sheet I have ever seen!
Posted 15 months ago. ( permalink )

lancefisher says:

I write my CSS on a single line like this, and I really like it. I was skeptical too, but you should try it before you knock it. I really like to be able to see all the rules I've set up for a class or element without scrolling.

I don't necessarily worry about lining up the column after the selectors though.
Posted 15 months ago. ( permalink )

riddle_ says:

I’m going to take a bullet here and ask – have you had anyone editing CSS written like this after you?

I’d cry if I had to.
Posted 15 months ago. ( permalink )

garrettmurray says:

Wow, this is completely unreadable. I would hate to have to modify a stylesheet you worked on!

I don't really see any benefits to writing it this way... when you look at the code it's complete visual disarray other than the left-side indentations. For instance, padding appears in many of those lines, but in a completely different place horizontally each time. That means, to make a change to a style you have to read the entire horizontal line to find something. And, adding to that, you don't put spaces between items so there's no visual identification of breaks.

Yikes!
Posted 15 months ago. ( permalink )

kneath84 says:

@snook: Exactly! With your rules I can't figure out if there's margins, paddings, or the hell if anything's floated. To me it's just like someone speedtalking a functional spec to me.

Oh, and for the record I was forced to use this style for a long time. The second I could stop doing it, I did.
Posted 15 months ago. ( permalink )

Jonathan Snook says:

@NICCAI: if a ruleset becomes too long, I'll increase the indent for that block of declarations. eg: everything that starts with #intro or whatever. And no, I don't shrink it any further when I deploy.

@riddle_: I imagine somebody must but I don't cry, bitch or complain about editing multi-line stylesheets even though I find them less readable. I just do my job and love it. :)
Posted 15 months ago. ( permalink )

Jonathan Snook says:

@garrettmurray: I never thought reading 10-20 words was really that difficult for people. To each their own.
Posted 15 months ago. ( permalink )

jonathandchr says:

I write my CSS in much the same way, except I don't even give myself whitespace between the selector and its properties. Segmenting styles into sections alone is a great help to me.

Screenshot in CSSEdit

In my personal experience, writing CSS that way helps me to be much more efficient, but as we can all see by this comment thread (as well as the countless articles on the issue), lots of people see things differently.

A great feature about CSSEdit is it lets you rapidly reformat CSS based on your preference (as well as change it back when you're done working if need be)
Posted 15 months ago. ( permalink )

Theanxy. says:

Hi, I'm an admin for a group gathering similar screenshots called Coding conventions, and we'd love to have this added to the group.
Posted 15 months ago. ( permalink )

AnalogPanda says:

Yikes!
Posted 15 months ago. ( permalink )

Jonathan Snook says:

One last point: to everybody who's looked at this code and doesn't like single-line declarations, who has actually tried this style? (ie: don't knock it till you try it.)

Anyways, this is getting to be like a religious debate. I'll continue on in my agnostic corner.
Posted 15 months ago. ( permalink )

jnthnlane says:

I'm with you Mr. Snook. This is the way to go. I haven't been doing the indenting, but I think I'll start!
Posted 15 months ago. ( permalink )

riddle_ says:

Jonathan, I understand that but I’m just curious – if you think I bitch & complain, I should probably study English better. ;-)

I just could never understand how people find things in streams of bytes like this. And, maybe more importantly, how people cut & paste properties from one selector to another, optimizing ruleset and making it lighter. I do it all the time, a rule is never finished before stylesheet is closed.

My wild guess is that some people, like you sir, replace selector listing function in specific applications with hardcoding selectors in the file.

I hope I didn’t offend anyone – I see many people doing it and there has to be something in this style. I respect your choices. I just can’t see it. To me it’s all Matrix. ;)
Posted 15 months ago. ( permalink )

KaiChanVong says:

Jeez. It looks horrible.

This is ftw:

.Blah {

color: red;
margin: 10px 0 0 0;
background: #fff
}

Obviously Flickr doesn't like my tab indentation of each declaration though :P
Posted 15 months ago. ( permalink )

Travis Isaacs says:

Single line +1. I'm with you Snook, let's rock this town.
Posted 15 months ago. ( permalink )

riddle_ says:

Travis, do you cut & paste properties in your CSS to optimize ruleset? If you do and would like to share a magic way to do it fast & clean, I’m with you guys too. ;)

I tried it after being evangelized in my early days of writing CSS and I couldn’t skip the painful task of optimization / editing.
Posted 15 months ago. ( permalink )

jrodgers says:

I like it.
Posted 15 months ago. ( permalink )

Jonathan Snook says:

@riddle_: the bitch and complain comment was mostly to everybody, not specific to you. Sorry if it felt like I was picking on you. :)

Regarding copying and pasting, I'm not sure I quite understand what you mean. I don't normally c&p large chunks of code at the CSS level so it hasn't been an issue.

People complain about readability but each line has on average 2-4 declarations. Half the time, two of them are margin and padding. How is that "unreadable"? Only one of the styles that I've declared goes beyond 7 declarations.
Posted 15 months ago. ( permalink )

riddle_ says:

All right, so let me explain it by an example:

Let’s say you want to style a header. You write all properties needed and then you realize (looking at another PSD mockup) sometimes there’s going to be a link inside. So now you write another rule but you need the same color (let’s say).

What I usually do is to write a single additional rule, combining those two (header & link) with color and remove superfluous properties from those 2 original selectors. I do it all the time, because there are many parts of CSS that can be combined. These are not big chunks of CSS, but the action is repeated over and over.

I just can’t imagine going through all those long single-lined rules picking up duplicates.
Posted 15 months ago. ( permalink )

jasongraphix says:

I'm with Snook...mostly. Here's a typical sample of my css. To answer those questioning the readability of long lines of declarations, I don't see the individual declarations, I see the line. Even if margin isn't in the same place each time, I can see if it's in there and jump right to it. To each their own though I suppose.
Posted 15 months ago. ( permalink )

Jonathan Snook says:

@riddle_: I see what you mean now. That's not something I do. If a style is being shared over multiple sections then I'll either declare them separately or declare a "master style" and override the style depending on what I run into.

You can see in the screenshot that a background color that I have on #nav a:hover is the same as #categories a:hover but I prefer to declare them separately.
Posted 15 months ago. ( permalink )

The Sollenberger's says:

@snook i love your sheet. that being said.... some kind of order to your attributes would be nice.
Posted 15 months ago. ( permalink )

Jonathan Snook says:

@The Sollenberger's: I tend to group. margin with padding, top with position. float with width. but yeah, it can be a little hodge-podge.
Posted 15 months ago. ( permalink )

riddle_ says:

Thanks.

I wonder if coders prefering one-liners also share your overriding/overpowering model. If so, I think we might achieve some consensus here. :)
Posted 15 months ago. ( permalink )

Chad Crowell says:

I have tried one line and multi line and always go back to multi line with lots of spacing.

I could handle this if you had extra spaces after each comma separator and inside the { and }'s. But as is, I am going with unreadable.

Here is my contribution to this jam.
Posted 15 months ago. ( permalink )

Ivanico says:

I was coding like this some time ago but the developers I work with, since they use Vim to edit their files, got me unanimously banned to keep writing styles this way which I personally preferred the most, so I had to start coding with blocks. Apparently some editors wrap text around (Like Vim or Vi) and if that's the case, it will certainly looked like pandemonium.
Posted 15 months ago. ( permalink )

Todd Prouty says:

I wouldn't say it's unreadable so much as difficult to scan. Multi-line CSS is easier to scan when looking for a specific property, for the same reason that scanning a bulleted list is easier than one in paragraph format. Multi-line for me!

Any opinions on multi-line vs. single-line groupings? Example:

#foo1,
#foo2 span.cakes,
#foo3 h4.breakfast {
[tab] /* declarations */
}

vs.

#foo1, #foo2 span.cakes, #foo3 h4.breakfast {
[tab] /* declarations */
}

Again, multi-line for me.
Posted 15 months ago. ( permalink )

Todd Prouty says:

Also, there is something to be said for following some sort of standard in order to make life easier for those who inherit our stylesheets. Of course, as these threads have proven, agreeing to a standard could be quite difficult. Prior to this I would have said multi-line was the accepted norm and easiest for most to use.
Posted 15 months ago. ( permalink )

cookiecrook says:

TextMate > View > Toggle Foldings at Level
Posted 15 months ago. ( permalink )

gleddy says:

another disadvantage of our 'loose typed language' :-) split right down the middle and everyone dead set in their ways on how we each code our CSS. Next would be HTML commenting preferences? That's always a good debate! hehe.

mulit-line for me as well, this is very well organised but out of my comfort zone.
Posted 15 months ago. ( permalink )

mezzoblue says:

Yeah, what Ivanico said. I did this for about a year, then I started working with other people. I'm back to multi-line. It's the only way to write CSS that's meant to be maintained by more than one person, IMO.
Posted 15 months ago. ( permalink )

sulcalibur says:

That too me looks quite neat actually. I completely agree with mezzoblue about the multi-line way though if anyone else if going to be using the code.
Posted 15 months ago. ( permalink )

Dean Burge says:

Single line definitely has merit for solo efforts, but last few days I've been trying to work through a mesh of stylesheets across an enterprise going though modular sub-site interface changes, where all CSS has been written by 5 developers across 2 companies. Commented and indented multi line definitely easier to decypher than uncommented single line for what I've been working with - which looks very much like your screenshot.
Posted 14 months ago. ( permalink )

Paul R. Redmond says:

Coda Foreva baby!!

The only thing I dont like about ultra-edit is the code completion. (ie. create the closing tag right after the opening tag and put my cursor between. Also when coding PHP I like the editor to close the parenthisis, curly brackets,and quotes. Does anyone know how to do it in UltraEdit?

Looks very organized. I have tended to get very messy with my CSS since I use firebug to find style declarations =).

I agree that one should not knock the all-on-one-line way of coding CSS until one tries it..extensively.
Posted 14 months ago. ( permalink )

scopeland says:

One of the merits of the single line format I appreciate is the fact that you can see a much greater total amount of styles in our typically high resolution displays all in one screen without having to scroll vertically to see them.

The multi-line style format tends to make the doc several orders of magnitude longer, which means you're scrolling all day when you're referring to different elements of your page as you edit.

It seems to me coders less familiar with CSS are the ones who don't like the single-line format, but then again, how often will they be editing it anyway?

Single-line FTW.
Posted 10 months ago. ( permalink )

jason stanbery says:

Most single-line CSSers were once multi-line CSSers, just like most Mac users were once PC users. They both work, and you can do the same stuff with either, but usually only one of the groups can say they've tried both ways, and they came to the realization that one is better.

As a past multi-liner, single line is the way to go. I don't tab over though. Line break at logical spots where you separate sections, but when you single line it, you really don't even need comments.

Like so many others, I was skeptical at first, now I cringe when dealing with my old multi-line CSS.

Single Line is way better. Try it for a site or 2, and you'll never go back.
Posted 10 months ago. ( permalink )

KaiChanVong says:

jason stanbery I've started doing a combination depending on how many lines there are and just trying to be intelligent about it rather than doing it one way or the other :)

I take back my prev. comment!
Posted 10 months ago. ( permalink )

You	Sign in \| Create Your Free Account
Explore	Places \| Last 7 Days \| This Month \| Popular Tags \| The Commons \| Creative Commons \| Search
Help	Community Guidelines \| The Help Forum \| FAQ \| Sitemap \| Get Help

Using Single-line calls

Comments

Matthew Pennell says:

kneath84 says:

jlbruno says:

Oльга + Haфaн says:

serpicolugnut says:

Luke Dorny (luxuryluke) says:

twofivethreetwo says:

Dave McNally says:

Anton Peck says:

Voyagerfan5761 says:

M. Keefe says:

Jonathan Snook says:

easykill says:

NICCAI says:

chris-powell says:

lancefisher says:

riddle_ says:

garrettmurray says:

kneath84 says:

Jonathan Snook says:

Jonathan Snook says:

jonathandchr says:

Theanxy. says:

AnalogPanda says:

Jonathan Snook says:

jnthnlane says:

riddle_ says:

KaiChanVong says:

Travis Isaacs says:

riddle_ says:

jrodgers says:

Jonathan Snook says:

riddle_ says:

jasongraphix says:

Jonathan Snook says:

The Sollenberger's says:

Jonathan Snook says:

riddle_ says:

Chad Crowell says:

Ivanico says:

Todd Prouty says:

Todd Prouty says:

cookiecrook says:

gleddy says:

mezzoblue says:

sulcalibur says:

Dean Burge says:

Paul R. Redmond says:

scopeland says:

jason stanbery says:

KaiChanVong says:

Would you like to comment?

Jonathan Snook's photostream

Coding conventions (Pool)

Tags

Additional Information