5 ms·

I hate one declaration per line. I wrap at 80ish columns. I can then see all of the CSS for a single page at once on my screen, without paging up and down throu

by njl 14y ago

I hate one declaration per line. I wrap at 80ish columns. I can then see all of the CSS for a single page at once on my screen, without paging up and down through some ridiculously long file. It bothers me that idiomatic CSS is so wasteful of vertical space.

felixandersen 14y ago
I agree. If a selector has enough rulesets to justify a wrap I usually let the first line be positioning rules, second box-model rules and third color rules and so on. I find that I am much more productive this way VS following the guidelines that idiomatic CSS proposes.
pygorex 14y ago
I have the exact opposite reaction. It's much easier to scan for and read CSS rules on their own - especially when utilizing "wordy" statements like CSS animations, font and background declarations. And for the various vendor-specific prefixes. And for comments. Here's a real-world example formatted nicely: #nav .group LI A { color: #fff; text-decoration: none; display: block; padding: 4px 0px 4px 4px; border-top: 1px dashed hsla(0, 0%, 100.0000%, 1.0000); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } And as one line: #nav .group LI A { color: #fff; text-decoration: none; display: block; padding: 4px 0px 4px 4px; border-top: 1px dashed hsla(0, 0%, 100.0000%, 1.0000); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } Let's say you need to change the border from dashed to solid. Which of these formats is easier to scan for border rules and to edit?

by njl 14y ago

felixandersen 14y ago

I agree. If a selector has enough rulesets to justify a wrap I usually let the first line be positioning rules, second box-model rules and third color rules and so on. I find that I am much more productive this way VS following the guidelines that idiomatic CSS proposes.

pygorex 14y ago

I have the exact opposite reaction. It's much easier to scan for and read CSS rules on their own - especially when utilizing "wordy" statements like CSS animations, font and background declarations. And for the various vendor-specific prefixes. And for comments. Here's a real-world example formatted nicely: #nav .group LI A { color: #fff; text-decoration: none; display: block; padding: 4px 0px 4px 4px; border-top: 1px dashed hsla(0, 0%, 100.0000%, 1.0000); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } And as one line: #nav .group LI A { color: #fff; text-decoration: none; display: block; padding: 4px 0px 4px 4px; border-top: 1px dashed hsla(0, 0%, 100.0000%, 1.0000); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } Let's say you need to change the border from dashed to solid. Which of these formats is easier to scan for border rules and to edit?