4 ms·

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 long

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): /* dialog body */ .dtk-skin-dlg .yui-panel { outline:none; } .dtk-skin-dlg .yui-panel .hd { font:16px/1em Verdana, sans-serif; color:#ddd; padding:10px 10px 0; background:none; } .dtk-skin-dlg .yui-panel .bd { padding:10px 10px 10px; background:none; font-size:12px; line-height:19px; color:#000; } .dtk-skin-dlg .yui-panel .ft { padding:5px 10px 10px; background:none; font-size:12px; line-height:1.2em; color:#000; } /* dialog footers, right aligned */ .dtk-skin-dlg .ft-right { clear:both; width:100%; padding:5px 0 0; text-align:right; } /* left align buttons INSIDE ft-right */ .dtk-skin-dlg .ft-left { float:left; text-align:left; /*padding from ft-right*/ } /* dialog body wrapper for extra css styling */ .dtk-skin-dlg .body { background:#fff; padding:10px; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,0.2) inset; } .dtk-mobl-dlg .body { background:#fff; padding:10px; }

ebbv 10y ago
> 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): .dtk-skin-dlg .yui-panel .hd { font: 16px/1em Verdana, sans serif; color: #ddd; background: none; padding: 10px 10px 0; margin: auto; } 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.

ebbv 10y ago

> 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): .dtk-skin-dlg .yui-panel .hd { font: 16px/1em Verdana, sans serif; color: #ddd; background: none; padding: 10px 10px 0; margin: auto; } 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.