8 ms·

Slightly related, but mainly a formatting issue, I format my css files as such: .foo { x: y; a: b } .bar { m: n } .baz { background: blah blah u

Slightly related, but mainly a formatting issue, I format my css files as such: .foo { x: y; a: b } .bar { m: n } .baz { background: blah blah url(xyz.png) top left; x: y; i: j; } instead of the more commonly seen: .foo { x: y; a: b; } .bar { m: n } .baz { background: blah blah url(xyz.png) top left; x: y; i: j; } My format takes up less vertical space in the editor. Sometimes, I can get my entire CSS file into a single page on the screen, reducing the amount of time I spend scrolling and searching. I do split lines when they go off the edge of the space, as seen in the .baz example.

eam 16y ago
I prefer the latter. It's more readable IMO. If file size is an issue, I just use a CSS compressor. Also, it's not too hard in finding selectors, most IDE's or text editors have a "Find" command to locate a selector. That's my 2 cents.
- tomfakes 16y ago
  This isn't about file size at all, it is about being able to see as much CSS as possible at one time. My screen is wide, my editor is wide, my code is fairly wide, but the standard format for CSS is really narrow. Every time I see the vertical format in my editor, easily 80% of the window space is completely empty, and otherwise useless, and 80% of the CSS is not on the screen and I have to page up and down, or search, to find stuff. This is a workflow optimization that works for me. It might work for others too.
  - prawn 16y ago
    I do it too and for the same reasons. Just easier to keep your head around if you can see and scan more of the file at once. I tend to list properties with the most crucial to layout first so it's easy to find major problems (e.g., float, etc).
carterdea 16y ago
why don't you let your IDE organize your selectors? As mentioned above, CSS Edit does a great job with this. With it, you get the readability of the latter formatting system and the scanability (not a word, I know) of the former system.
mryall 16y ago
If you're working on a project with multiple people, having the CSS properties one-per-line helps a lot with determining who changed what in your version control system. Most of the command-line diff tools don't highlight changes within a single line, and annotation tools usually work on a per-line basis as well.

eam 16y ago

I prefer the latter. It's more readable IMO. If file size is an issue, I just use a CSS compressor. Also, it's not too hard in finding selectors, most IDE's or text editors have a "Find" command to locate a selector. That's my 2 cents.

tomfakes 16y ago
This isn't about file size at all, it is about being able to see as much CSS as possible at one time. My screen is wide, my editor is wide, my code is fairly wide, but the standard format for CSS is really narrow. Every time I see the vertical format in my editor, easily 80% of the window space is completely empty, and otherwise useless, and 80% of the CSS is not on the screen and I have to page up and down, or search, to find stuff. This is a workflow optimization that works for me. It might work for others too.
- prawn 16y ago
  I do it too and for the same reasons. Just easier to keep your head around if you can see and scan more of the file at once. I tend to list properties with the most crucial to layout first so it's easy to find major problems (e.g., float, etc).

carterdea 16y ago

why don't you let your IDE organize your selectors? As mentioned above, CSS Edit does a great job with this. With it, you get the readability of the latter formatting system and the scanability (not a word, I know) of the former system.

mryall 16y ago

If you're working on a project with multiple people, having the CSS properties one-per-line helps a lot with determining who changed what in your version control system. Most of the command-line diff tools don't highlight changes within a single line, and annotation tools usually work on a per-line basis as well.