CSS coding style: Inline or block?

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

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's picture

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's picture

She has: 840 posts

Joined: Apr 1999

Block, personally I find it easier to edit that way.

greg's picture

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's picture

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;
}

greg's picture

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's picture

He has: 3,956 posts

Joined: Jun 2002

The only possibly difference, although minute, would be indenting, as there is more white space for the browser to read through.

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's picture

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's picture

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.