The first example is fine, if you're only setting one property then doing it in a single line isn't a big deal.
Your second CSS example is no bueno. Don't put multiple properties on a single line. It might make sense to you to put display and margin and padding on a single line but it might not make sense to me. These should all be on separate lines, it's not worth "saving lines" to make your CSS harder to parse for someone who doesn't already know that you like to group X, Y and Z properties.
> it's not worth "saving lines" to make your CSS harder to parse for someone who doesn't already know that you like to group X, Y and Z properties.
Well somewhat in between you could also put properties in alphabetical order as suggested in this Google Style Guide. That tend to work for me since "text" properties will be towards the end of the rule, and for me the layout properties like border, display, margin and padding is something I'd want to see first.
But where I prefer some freedom vs hard rules is that I'll also align properties to make the differences more obvious. In this YUI2 example, the second class is applied to a mobile version of the dialog, the common properties come first, that way the difference is obvious:
Well that is the whole point, I wish I made the example better.
How is it harder to parse? Putting everything in separate lines make the CSS file 10 times longer, and it's more difficult to see groups of rules that fit together along with their common structure.
Nowadays unless you edit on a tablet your text editor probably handles 120 columns or more.
But I really can't see the argument for readability. When I navigate a stylesheet for a website I'm working on, I want to see the larger structure. I don't need to see clearly the properties within a single rule. I want to see from top down.
Still, this could be argued forever. Apples and bananas :) I guess it's the same discussion as space vs tabs, or 2 space vs 4 spaces.
Here's a better example from one project which used YUI2 (it's old, but I think it shows my point of view, that the dtk-skin-dlg structure is very obvious along with the hd/bd/ft structure YUI 2 uses and the styles applied to them, that's the structure I want to see readily when I work in a stylesheet without having to scroll to understand it's all connected together):
> Putting everything in separate lines make the CSS file 10 times longer, and it's more difficult to see groups of rules that fit together along with their common structure.
You block them together just like we do with code. Good code doesn't put multiple statements on a line, good CSS doesn't either. File length means nothing, if someone's looking for a specific class there are tools to do that, saving a few lines and making the CSS harder to read and edit isn't worth it.
The examples above are much more readable like this (margin added for illustration of grouping related properties):
Written that way, when someone finds that rule in the file they can easily parse the relevant property without having to scan a 200 character long line.
Your second CSS example is no bueno. Don't put multiple properties on a single line. It might make sense to you to put display and margin and padding on a single line but it might not make sense to me. These should all be on separate lines, it's not worth "saving lines" to make your CSS harder to parse for someone who doesn't already know that you like to group X, Y and Z properties.