CSS coding style: Inline or block?
Today I came across a list of CSS recommendations that said you should put all your declarations on one line, like this:
a {color: blue; text-decoration: none; font-weight: bold;}
I usually write mine in blocks (multi-line), like this:
a {
color: blue;
text-decoration: none;
font-weight: bold;
}
Which do you prefer? Vote in the poll for this topic and add your rationale here.
decibel.places posted this at 00:16 — 18th September 2008.
He has: 1,494 posts
Joined: Jun 2008
Well, I use both. One line for a quickie.
Depends mostly on complexity, if it's more than a coupla statements, I think block is clearer.
I suppose the one line code loads a bit faster - but not enough to sacrifice clarity.
Now, how about block styles...
do you
element {
style1;
style2;
}
or no indent like
element {
style1;
style2;
}
or separate the braces like
element
{
style1;
style2;
}
???
Roo posted this at 00:18 — 19th September 2008.
She has: 840 posts
Joined: Apr 1999
Block, personally I find it easier to edit that way.
greg posted this at 05:09 — 19th September 2008.
He has: 1,581 posts
Joined: Nov 2005
Block 95% of the time.
Although, if something has a huge amount of declarations I will work on it in block format, then put it in one line once it's done.
My Nav menus usually have a load of declarations.
But I don't indent, not in CSS
#div_id{
some declaration
another declaration
}
Megan posted this at 12:59 — 19th September 2008.
She has: 11,421 posts
Joined: Jun 1999
I use block as well. I don't understand the argument that it's easier to read. It might be easier to find a selector but often I'm using a "find" command or Firebug to tell me which line something's on. Good organization of CSS files helps with that too. Putting it all on one line would make it harder to find a property you need to change, especially when they're long enough to go over one line.
I do use one line occasionally, particularly if it's something like link pseudo-classes that only have a few changes from the default. I do indent as well, so mine would look like this:
element {
style1;
style2;
}
Megan
Connect with us on Facebook!
greg posted this at 03:02 — 20th September 2008.
He has: 1,581 posts
Joined: Nov 2005
The things I tend to leave as block are the ones I change now and then, or only have a few things in it.
The nav menu is usually left alone once complete so on one line takes up less space to scroll and find other things.
I use 'find' a lot too, in css and php files. I think I would be about 6 months behind without the find command. And the replace.
'Find and replace all' often tells me "100 items have been replaced", that saves me a heck of a lot of time.
On a technical level, I cannot see why there would be any differences between block and inline css code. It all takes up the same space. The only possibly difference, although minute, would be indenting, as there is more white space for the browser to read through.
But back in the real world, I see no difference and using what one feels is easiest is the best way.
JeevesBond posted this at 04:43 — 20th September 2008.
He has: 3,956 posts
Joined: Jun 2002
Not disagreeing with this. Just wanted to point out that if Apache gzip compression is switched on, white space won't matter a jot.
Personally, I use block 95% of the time, unless a declaration only has one property, e.g.
p.w00t { color: #00f; }
a Padded Cell our articles site!
demonhale posted this at 04:57 — 26th September 2008.
He has: 3,278 posts
Joined: May 2005
Same as Liam, block for multiple properties, and option 1 for decibel places selection. Generally this is because of convenience...
decibel.places posted this at 17:46 — 26th September 2008.
He has: 1,494 posts
Joined: Jun 2008
Have you ever looked at the admin styles for the Drupal framework theme? I use the theme as a blank canvas, to build custom themes from PSD, but the creator really didn't want anybody messing with the admin view (yeah, you can change the admin theme) - not talking about that, just the unfriendly style:
/*--------------ADMINISTRATION SECTION----------------
--------------edit at your own risk ----------------*/
#tabs-wrapper{margin:0;padding:0}h2.with-tabs{float:left;margin-right:1em}ul.tabs{margin:1.8em 0 0 !important;padding:0 !important}
img,a img{border:none;outline:none}input{color:#494949;font:12px/100% Verdana, sans-serif}textarea,select{color:#494949;font:12px/160% Verdana, sans-serif}em{padding:0 3px 0 0}hr{background:#5294c1;border:none;height:1px;margin:0;padding:0}ul,quote,code,fieldset{margin:.5em 0}ul{margin:0.5em 0 1em;padding:0}ul li{margin:0.4em 0 0.4em .5em}ul.menu,.item-list ul{margin:0.35em 0 0 -0.5em;padding:0}ul.menu ul,.item-list ul ul{margin-left:0}ul li,ul.menu li,.item-list ul li,li.leaf{background:transparent url(images/menu-leaf.gif) no-repeat 1px .35em;list-style-image:none;list-style-type:none;margin:0.15em 0 0.15em .5em;padding:0 0 .2em 1.5em}ul li.expanded{background:transparent url(images/menu-expanded.gif) no-repeat 1px .35em}ul li.collapsed{background:transparent url(images/menu-collapsed.gif) no-repeat 0 .35em}ul li.leaf a,ul li.expanded a,ul li.collapsed a{display:block}ul.inline li{background:none;margin:0;padding:0 1em 0 0}fieldset ul.clear-block li{background-image:none;margin:0;padding:0}dl{margin:0.5em 0 1em 1.5em}dl dd{margin:0 0 .5em 1.5em}table{margin:1em 0;width:100%}thead th{border-bottom:2px solid #d3e7f4;color:#494949;font-weight:700}th a:link,th a:visited{color:#6f9dbd}td,th{padding:.3em .5em}tr.even,tr.odd,tbody th{border:solid #d3e7f4;border-width:1px 0}tr.odd,tr.info{background-color:#edf5fa}tr.even{background-color:#fff}tr.odd td.active{background-color:#ddecf5}tr.even td.active{background-color:#e6f1f7}td.region,td.module,td.container{background-color:#d4e7f3;border-bottom:1px solid #b4d7f0;border-top:1.5em solid #fff;color:#455067;font-weight:700}tr:first-child td.region,tr:first-child td.module,tr:first-child td.container{border-top-width:0}span.form-required{color:#ffae00}.description{color:#898989;font-size:0.92em;line-height:150%;margin-bottom:0.75em}.messages,.preview{margin:.75em 0;padding:.5em 1em}.messages ul{margin:0}.form-checkboxes,.form-radios,.form-checkboxes .form-item,.form-radios .form-item{margin:0.25em 0}#center form{margin-bottom:2em}.form-button,.form-submit{margin:2em 0.5em 1em 0}#watchdog-form-overview .form-submit,.confirmation .form-submit,.search-form .form-submit,.poll .form-submit,fieldset .form-button,fieldset .form-submit,.sidebar .form-button,.sidebar .form-submit,table .form-button,table .form-submit{margin:0}.box{margin-bottom:2.5em}.profile dd{margin-bottom:1.6em}ul.primary,ul.primary li,ul.secondary,ul.secondary li{background:none;border:0;margin:0;padding:0}ul.primary{float:left;padding:0.5em 0 10px}ul.secondary{border-bottom:1px solid #e9eff3;clear:both;margin:0 0 1em;padding:0 0 1em;text-align:left}ul.primary li a,ul.primary li.active a,ul.primary li a:hover,ul.primary li a:visited,ul.secondary li a,ul.secondary li.active a,ul.secondary li a:hover,ul.secondary li a:visited{background:none;border:0;height:auto;margin:0;padding:0 1em 0 0;position:relative;text-decoration:none;top:-1px}ul.primary li.active a,ul.primary li.active a:link,ul.primary li.active a:visited,ul.primary li a:hover,ul.secondary li.active a,ul.secondary li.active a:link,ul.secondary li.active a:visited,ul.secondary li a:hover{background:none}ul.primary li.active a,ul.secondary li.active a{font-weight:700}tr.odd td.menu-disabled{background-color:#edf5fa}tr.even td.menu-disabled{background-color:#fff}#autocomplete li{cursor:default;margin:0;padding:2px}#autocomplete li.selected,tr.selected td,tr.selected td.active{background:#027ac6;color:#fff}fieldset{background:#fff;border:1px solid #d9eaf5;margin:1em 0;padding:1em}fieldset legend{display:block}html.js fieldset.collapsed{background:transparent;padding-bottom:.6em;padding-top:0}html.js fieldset.collapsible legend a{background:url(images/menu-expanded.gif) no-repeat 0 50%;padding-left:2em}html.js fieldset.collapsed legend a{background:url(images/menu-collapsed.gif) no-repeat 0 50%}div.admin-panel,div.admin-panel .description,div.admin-panel .body,div.admin,div.admin .left,div.admin .right,div.admin .expert-link,div.item-list,.menu{margin:0;padding:0}div.admin h3{margin-bottom:0}div.admin .left{float:left;width:48%}div.admin .right{float:right;width:48%}div.admin-panel{background:none;padding:1em 1em 1.5em}div.admin-panel .description{margin-bottom:1.5em}div.admin-panel dl{margin:0}div.admin-panel dd{color:#898989;font-size:0.92em;line-height:1.3em;margin-bottom:.65em;margin-top:-0.2em}table.system-status-report th{border-color:#d3e7f4}tr.selected td a:link,tr.selected td a:visited,tr.selected td a:active{color:#d3e7f4}.messages{background-color:#fff;border:1px solid #b8d3e5}.preview{background-color:#fcfce8;border:1px solid #e5e58f}div.status{border-color:#c7f2c8;color:#33a333}div.error,tr.error{background-color:#FCC;color:#a30000}.form-item input.error,.form-item textarea.error{border:1px solid #c52020;color:#363636}table.system-status-report tr.error,table.system-status-report tr.error th{background-color:#fcc;border-color:#ebb;color:#200}table.system-status-report tr.warning,table.system-status-report tr.warning th{background-color:#ffd;border-color:#eeb}table.system-status-report tr.ok,table.system-status-report tr.ok th{background-color:#dfd;border-color:#beb}
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.