The poll is in the sidebar, so jump down there to vote. You can see examples of the different ways to format CSS here. I think that covers most of the popular ways to format CSS, but if you have your own unique way, feel free to post some code or a link to an example CSS file in the comments!
I think it’s an interesting topic because us all the implications it may have on a site and the working life of the front end coder. We spend so much time in CSS that how we choose to format it affects how efficiently we can write it, how easily re-acquainted we are with old CSS, and even potentially page loading times assuming you don’t compress your CSS.
for more than 3 arguments I use this:
#id{
[tab]color: #333;
height: 20px
}
for 3 or less I use:
.class{ color: #220000; text-decoration: underline; }
Amen! All the other methods are completely a waste of visual space, especially on large amounts of css.
I find myself getting annoyed these days if it’s formatted any other way. Sad I know, but true.
like this:
document.write(“hello world);
oops it acually used the html
document.write(“hello world);
Yep, I’m doing something similiar – works nice. Only difference with my approach is that I try to indent the opening { of the declaration to the same place.
Also – for more arguments I tend to indent them a bit.
Something like:
div.menu {..}
div.menu ul {..}
div.menu li {..}
div.menu a {
...
...
...
...
}
It works, at least for me – I can easily orient in my CSS.
The CSS gets minified in the end so I can get crazy about how it looks in the editor :)
Ups, it got messed up, hope you get the point anyway.
I almost always format my CSS using multi-line formatting with indenting, as well as having it sectioned by pre-defined HTML tags, ID’s, or classes, and then having the styles within that listed alphabetically (As best I can anyways!).
For example:
Then lastly, I usually style any large aspects of a site (Image slider, light window, etc.) as separate elements alphabetically at the end!
Always like that, it is compact and better reading for me.
.style { font-size:100%; font-weight:900; … }
Amen brother!
Same way for me, it’s more compact in the file (don’t like to scroll too much) and Firebug organizes it well, so I can manipulate it easily.
Amen!
Same. I cannot stand scrolling up and down huge files.
Yeh! Single line is so much easier to read than most mulitline css coders think.
I agree completely. A couple years back I was a multiline CSS’er but now I mostly do single line. If there are a lot of selectors, I’ll separate them on multiple lines though.
Same for me, without the space before the { but it’s so much easier to read, and I put properties in alphabetical order (to avoid duplicates).
I can’t understand why single lines should be more readable…especially if you have like >10 properties. That’s so confusing….multiline keeps it easy to read.
I agree with lukas and Kieran. Theres no need to write multiline with 3 or less properties. But as soon as it gets more I have to search too long for everything.
But maybe one day I’ll change…don’t know yet :D
I apologize for my english, hope you could understand.
/* Name for this section */
selector
{properties}
/* Next section…
This is simple since the most time you spend looking for a certain property in the document is looking for the right selector. By minimizing the space between selectors it goes much faster maintaining CSS this way, at least for me.
I also try to keep properties alphabetically for the same cause.
I use multi line with indents. When the site goes live I compress it so it’s single line with no unnecessary spaces. I alphabetize too.
p {
font-size: 1.25em;
}
I indent for everything.
No whitespaces, long lines. I work on a large, widescreen monitor and like to have it all filled up with code.
Oh, how do I cope with the mess? CMD+F
I usually use multiline for everything except single rules.
I think what is more important is how the CSS document is structuredand if comments are used. As in my example above I will do a large comment block before a particular section, indicating what the elements there are for.
+1m
Me as well :)
same same
i use it on the sam way
/*** CONTENT STARTSEITE ***/
#header-pic {
margin-bottom: 20px;
height: 130px;
overflow: hidden;
}
#header-pic-start {
margin-bottom: 10px;
}
#main-area {
float: left;
width: 710px;
margin-bottom: 10px;
}
That goes for me as well. I much prefer this method
I prefer this!…
Absolutely do the same way, I don’t like to cuddle. = ) Things should be nice an airy.
I use both multi line with indenting and single line formatting. Depends on the situation. Like if a rule contains less than three selectors. I also use a lot of comments and if there’s something I’m totally anal about is avoiding to use padding. Urgh.
Even if I don’t need a particular styling for an ID or class I still list them in my stylesheet.
If I use float I usually also list the total width of the floats combined so that the math is easy to calculate.
Top of it all, I try to use shorthand css as much as possible.
I agree Danny. This is very similar to the way I format mine. By indenting children it makes the hierarchy much more clear and organized.
I use compass which does all the formatting for me :)
I read the headline and immediately thought “I don’t worry about it because I use Sass” :)
Single line formatting all the way. Multi-line CSS formatting makes your stylesheets way to long and you end up having to search forever to find stuff.
Walsh totally converted me to the single-line with indenting (not tabbing) method. ;)
Here’s some CSS from my actual site.
I’m sure there’s an awful lot wrong with it, but it works, so its all cool as far as im concerned.
I used to use multi-line, but for long css files the scrolling gets to be too much. Especially if you are editing the css in a tiny window built into a CMS.
Single-line with indent/tabbing all the way!
yeah, i started on multiline too. When I changed to coda, I swapped, and then moving back to dreamweaver the habbit kinda stuck.
I use single-line format.
I wrote this message in Notepad first so I have no idea if it’s going to look ok after posting it since there’s no way to preview.
—
After seeing Dan Rubin in a couple of Web Design World conferences, I tried to give it a shot at his method of writing CSS in a single line format, I’ve always wrote CSS the regular way, that is, multi-line format.
I liked it, but most importantly, made it A LOT easier to manage the CSS rules.
Something I tell everyone, and I told Dan as well, is that in today’s days monitors are wider and larger, so writing in a single line makes use of the width of your monitor, this means you can see more rules in one screen.
I went one small step ahead of Dan’s single line writing, and implemented my own method when writing the properties.
Here’s an example (this is from a real project):
I leave the long declarations for last, like ‘background:’ and ‘font:’.
I leave a space after the first ‘{‘ and before the last ‘}’.
‘float:’ comes first every single time if needed in the declaration.
‘widht:’ first, ‘height:’ comes second every time. That’s because coming from the printing world, when you refer to the dimensions of a document, the first dimension you say is the width.
I always start with the simplest selector, and as I need more rules related to same selector, I keep them grouped. When a new set of rules for a selector is needed, I start a new group.
Every group has a comment that describes it.
Give it a try writing in single line, I didn’t think I was going to change my habit after so many years writing CSS the regular way.
Later all.
The didn’t work, here it is again:
1. I leave the long declarations for last, like ‘background:’ and ‘font:’.
2. I leave a space after the first ‘{‘ and before the last ‘}’.
3. ‘float:’ comes first every single time if needed in the declaration.
4. ‘widht:’ first, ‘height:’ comes second every time. That’s because coming from the printing world, when you refer to the dimensions of a document, the first dimension you say is the width.
5. I always start with the simplest selector, and as I need more rules related to same selector, I keep them grouped. When a new set of rules for a selector is needed, I start a new group.
6.Every group has a comment that describes it.
That structure is how I roll.
Me too!
E {
....property:value;
....}
....E>E {
........property:value;
........}
I used to do “Multi-line Format”, but for almost 2 years now, since I saw Chris doing it that way I’m using “Mosltly single line”, I feel like it really improved my CSS skils somehow.
This single line format gives me a relatively short css-file which allows me to quickly scrub through and find what I’m looking for.
One down side of single line is that tabs may be differently interpreted accros browsers/editors. But so what :) – as long as it’s good in my editor.
#div
{
…..property:value;
}
curly braces that aren’t on there own line make me feel ill. Not sure why.
That’s funny I feel kinda ill when I see it that way. Totally just a weird personal preference thing.
I use multi-line format, but I compress it after I finish the project and keep 2 copies while I load only the compressed one. I also use mod_deflate, so I’m good *I think*
+1 For this, it is WAY faster to find declarations with multi-line format. Then, when you compress it for production, it takes care of everything else.
We do this too; basically use a multi-line format without tabbing / indenting, and utilize compression at build time. We also built a utility to alternatively use the uncompressed original files directly in the browser for easier debugging.
Single line works best for me.
When I’m working with CodeIgniter I’m using an asset library that combines all my CSS files into one file, and it also minifies the code with cssmin.
great idea for a poll. since i started web design i wondered how i should be formatting css. it’s changed a few times so i would like a well reasoned “best practice”. this poll is gonna be interesting and will probably shape how i do css in the future
Single line rocks. CSS is not a programming language…more of a properties file. You waste so much time doing all the formatting.
A bit of a snippet here from the recent redesign of my Blog.
Sorry about how long that is, was the only way to show how I really do it, except none of the formatting has some of. Thought I would try (Although it failed) to post it because most people say I have quite a unique way of doing it!
SASS (or LESS).
That was easy!
I struggled a bit at first, and I have to say that I lose the use of my favorite CSS editor (CSSEdit). But the gains by using SASS have been tremendous.
Now, I would find it painful and tedious to return to the old days of raw CSS.
Multi-line formatting, though I’ll use single-line formatting for very specific rules (such as sprites).
for inline elements:
elem{ color:blue; text-decoration:underline;}
for block elemens:
.class{
width:300px;
height:344px;
background:red;
}
Single Line For Life:
For people who use something other than TextMate, I understand why you might think one way is faster than another. But for TextMate users, CMD+Shift+T lets you just to a selector by typing part of its name.
Soo.. in my opinion, multi-line is the easiest to read since you are not trying to find declarations based on your eye picking them up as you scroll.
Multiline formatting with indents. Indents are mostly a habit from programming but they also feel cleaner.
Also to note, all styles within a selector are alphabetical.
Single line with indenting, and with comments to separate biggest areas of html page.
Furthermore, I always write css properties in a logical order for my mind… :-)
For example, I write first the properties like margin, position, float, padding and at end the font properties.
Beautiful contest! ;-)
If I’m not using SASS or Less: single-line, with indentation since a couple weeks ago. The indents let me see see better the element nesting and scan better.
As for sorting: basic elements, then classes, then basic layout and finally specific id’s.
My example would be too long to paste here so I’ll just post a link to a recent project that I lead the initial theming on.
http://gist.github.com/226212
Website that’s using it: http://kysdc.com/
As you should see I create:
Index
Style Index
Multi-line rules within groups.
Single lines with comments sectioning certain parts always, single lines allows you to scroll through long CSS stylesheets quickly and with the comments can find certain sections nice and easy. Also with this method i can usually have one style sheet and pretty much use it again for another site, i.e things like the footer styling and links usually stay the same maybe with a different color choice! At the end of the day its each to their own, and once you have learnt one way its hard to adapt to another.
Multi-line with indenting.
So my styles would appear as follows:
This way you can show a hierarchy. Also, I organize in a structure similar to:
I know a lot of people like to do the organizing of styles alphabetically, but I prefer to do them in a manner of dependence… for example
or
With the first one, height and width are dimensions that depend on display: block. And the second one, top and left depend on position: absolute. This makes more sense to me than doing it alphabetically.
I also do not leave off the last semi-colon. Some people do this to save a file size, but I figure if I have to go in and add more styles, I’m going to have to add in that last semi-colon before I can start, so I just leave it on in the first place.
I prefer multi-line because it looks more professional and makes it much easier to copy and paste single properties and refactor your CSS quickly.
However, if there is a sequence of rules with very similar attributes (usually seems to happen with background-position if you use sprites) it looks much neater to do single lines.
Multi-Line Format. Definitely.
#MOTHER
.CHILD
…
//from SASS + COMPASS
I personally don’t like the indenting.
Multiline with good comments always makes me smile :-)
recently i’ve started indenting, with a kind of single/multiline hybrid..
I was always a straight forward single liner, but I always found myself wanting to infuse more structure into it. When a css file gets big i struggle to find what im looking for.
I actually made a thread on this a while back, 68 views 0 replies, I guess you guys didn’t like my proposed style :P
https://css-tricks.com/forums/viewtopic.php?f=4&t=4756
I’m a multi-line with indenting guy, but I’m seriously considering moving to single-line with indenting as I’d love to save that amount of scrolling space.
I write it on two lines…
#selector
{ declarations in alphabetical order }
…it does take getting used to writing rules in alphabetical order but it’s much easier to deal with months down the line when you come back to the project to make changes.
My declarations match the core structure of my HTML file (the part of the page that never changes – such as my header > main content > footer).
Then any styles that fall outside of that structure (such as the content for the home page and sub pages) go underneath the core declarations.
Works for me, but I can appreciate that this is a very personal topic for CSS ninjas and what is good for one of us isn’t necessarily the best way for all of us.
Whats funny is I learned CSS purely from you Chris, so I started with multi-line because I saw it that way in one of your screen casts, and then changed over to ‘mostly single line format’ as you did in your screencasts !
Thanks for being a wicked teacher !
I’m Single-line Format with Tabbing – I’m surprised that its currently only at 4% in the poll because I believe it is the Chris Coyier preferred method. My old sites are in multi-line format, and when I go back to update them I’m amazed/annoyed by how spaced out it all is!
I use Multi-line Format with Indenting but some arguments at the same line – i.e.:
div#something {
[TAB]width:Xpx; height:Ypx;
[TAB]margin:0; padding:0;
[TAB]font:style weight size/height family;
[TAB]color:#xxxxxx; background-color:#yyyyyy;
[TAB]}
#menu {
display:block;
float:left;
}
.active {
color: #f1f2fa;
font-weight: bold;
}
In this situation, my ‘active’ class is within the menu div tags.
clean code is next to godliness my mother always said
so:
#id
{
indent: stuff;
}
for me
You know how I do it – I wrote an entire series on this topic over a year ago.
I have two different styles for different use cases.
My standard coding style:
#blargh { color:black; background:white; }
..#blargh a { color:#9c0; text-decoration:none; }
....#blargh a:hover { color:#900; }
Some projects I’ll have a separate file for hacks or browser specific stuff:
#blargh { border-radius: 1em;
..-moz-border-radius: 1em;
..-webkit-border-radius: 1em; }
multi-line, no intending, no spaces between property and value AND in alphabetical order ;)
body {
background:#222;
color:#444;
font-size:14px;
font-family:Georgia,"Times New Roman",sans;
text-align:center;
}
Multi-line Format with Indenting ftw!
I like to use the One True Brace Style, with properties grouped together by what they do.
I use multi-line with indention if the selector has more than 2 properties and single line if there is only 1.
example
I use a combo, multi-line but grouping related properties. I find that gives me a balance between not having to scroll so much, the classes etc being easy to scan, but each property being easy to pick out quickly. I also use comments to help me find my way around the style sheet.
Example
body {
color:#333;
margin:0 auto;
font-family:Verdana, Arial, Helvetica, sans-serif
font-size:12px;
}
I tend to make it readable for me, and once I have everything where I would like it, I process the css through a compressor and use that one for the website. As long as I have the original, I have a more human-readable version.
I style my css like:
you sir are a model css coder. I bow to your patience.
I don’t compress besides gzip, so it’s important that I use single line considering how much CSS I use.
Here’s my main CSS file, and yes I can read it all fine:
http://cdn.myunv.com/css/uecore.css
Instead of the “alphabetically ordered properties” I have my own order, like block properties and positioning first (margins, width) then colors, then stuff like font, text shadows, borders etc.
I generally block code into sections that are similar
/* Page Layout */
body {
…
}
#pagewrap {
…
}
/* Menu */
#ul.nav {
…
}
etc.
I do use the following method instead of on one line – I just hate how it looks when any editor wraps the text, and I hate scrolling to find it. So this method is much cleaner imo:
#pagewrap {
background;
color:#ccc;
padding: 5px 0;
border:1px solid #000;
}
single line with properties in alphabetical order.
also I try to use same ordering structure with my html order.
– reset
– page skeleton in the order (wrapper, header, navigation, content, sidebar, footer)
than block specific declaration according to same order in skeleton
– header elements declerations
– navigation elements declerations
– content
– sidebar
– footer
and at the end
form elements and errors
.class{
border:1px solid;
ass:big;
eyes:blue;
}
Easy to discern.
But, lots of scrolling.
I’m kinda used to it.
When developing I make mine as readable as possible, as I can always smush it down and remove line breaks when I output it at the end. Bracket goes with the object, and a tab before every style.
etc.
Single line, always has been, always will be. Apple does it too. Most of the big guys do :) Saves me time indenting and scrolling. Wouldn’t mind a tool that’d tidy up for me (put properties in alphabetical order), but with a bit of self-training I get to do the same.
Single-line Format with Indenting, no tabbing, often with variations:
The last selector shows how I deal with really long attribute sets.
Another variation I often use, typically when working on CSS created by someone else using the multi-line format:
I normally tab mine like the second example
#id{
color: red;
}
.class{
font-size: 1.4em;
}
.class2{
text-transform: lowercase;
}
Single line with indentation. Multiline css file takes around 1/5 of the width of the monitor, also, you have to v-scroll your a$$ off. But, at the end, it is a matter of personal preference.
When writing CSS, I tend to have the selectors and such on one line, then having the properties on their own lines indented unless there are about four or less properties declared. I also like to have the braces at the beginning of the first declaration and the last.
Wow, I’m surprised at the number of multi-liners out there, still.
I’m mostly single-line, using multi-line only when it makes the most sense (custom class with a large number of declarations).
I mostly use the multiline model.
/* Name the section
------------------------------*/
h1 {
color: black; /* put a note why I did this */
...
}
For just one or two values I use the single line.
.test {
color: red;
margin: 0 0 1em 1em; /* look section x */
...
}
/* next section
-------------------------------------*/
Some people get worked up about this and its ridiculous. Whatever helps you read your code, use it. But if you’re spending as much time formatting your code as you are writing it, you might want to re-think your life.
For the record, I usually single line unless i have a bunch of declarations. Then I’ll use multi-line. I also add some comment blocks to divide major sections.
I use a combination of multi and single line.
Mostly single line but I really dislike horizontal scrolling so if there are more than about 5 argument and break them onto the next line.
Also I often have numerous arguments for position and size and numerous arguments for background properties so I will break them up like that with position/size arguments on one line and background properties on another.
It is far more compact and requires much less scrolling than full multiline. It also doesn’t cause horizontal scrolling (which I think is even worse than vertical scrolling). If you went single line but turned on wordwrap to avoid horizontal scrolling then you would end up with something about the same as I use anyway but you just wouldn’t have as much control over where exactly the lines break.
I also section my css with big visible comment signs so I can scroll quickly and find what I’m looking for.
I don’t see what it matters as long as everyone’s on the same page. Working with multiple people and them all having different styles of writing CSS is the only time I can see it being a problem. Also, mini-fying should make it a moot point once it’s on a production environment anyway :-)
I prefer to use multi-line like most, but I group like objects on similar lines to save some space. For example:
.col1 {
float: left; margin: 2%; padding: 2%; width: 42%; /*This is my positioning line\*
font-size: 1em; color: #333; /*This is my font properties line\*
background: #ccc url() repeat-x; /*This is my decorative properties line\*
}
With certain elements you may have to use list-style-type, etc. in which case i normally include those on a separate line between positioning and font properties.
Hopefully I make sense :o)
Always multiline, and indented, so I know where I am, but when everything is ready, I usually compress it to the minimum possible with csstidy, you know why :)
Here here,
maintainability means I like the multiline format. I dont go in for indententing elements though.
Great thing about csstidy is you can create a step in your deployment where all css is compressed on the fly.
single-line; spaces squished out;
declarations for “pure” html elements first; classes/other descendents within “pure” elements (showing differences);
semantic divs at bottom;
properties in alpha order
I like short css sheets, so only hit the return key when I’m making a new selector.
Until I read this poll yesterday I’ve always used multi-line with indents, but after reading some of the responses here i decided to give the single-line a try (with indenting), and I have officially changed over to it. Not having to scroll up and down constantly is really nice.
Single line; no spaces and small comments. If the line becomes to long I sometimes use a single line break so I don’t have to scroll sideways.
eg.
/* = Ninja's protect my code. */
.ninja{color:black;visibility:none;}
Wow seems that a lot of people like doing things their own little way :-)
I’m in the “I do multiline indented but also single line” camp. So when there is only one or two properties, they can go on a single line – but any more that, it becomes multiline and indented.
I’ve heard a few people say that scrolling in small windows to edit CSS – (I’m looking at you WordPress!) – isn’t all that nice, but I personally prefer to scroll vertically than horizontally, it seems to me that if something is scrolled off the screen horizontally it’s easier to miss.
I recently blogged about my own CSS formatting issues, basically if you need to work on someone elses CSS, you can use http://www.cleancss.com/ To both clean up and re-format the CSS for you.
I don’t format my css myself. I write it using tools like compass and sass which do the formating for me.
I combine three approaches
1- Multi-line formatting
2- Indenting
3- Alphabetical order
I dont like the way you set up the poll, Chris :( the single line formats have 4 choices while the multi line have only two. Therefor the single line has a lot less chance of coming first :P I guess its not about winning though.
Comibination of everything. ;)
Backgrounds and colors first, followed by positions/floats, sizes, margins and paddings, then fonts… and the rest
#id {
background: #eee;
color: #333;
min-width: 960px;
width: 960px;
min-height: 480px;
overflow-y: scroll;
border: 0px;
margin: 0px;
padding: 5px;
font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
font-size: 1.4em;
letter-spacing: -0.02em;
line-height: 1.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
z-index: 20;
}
Straight line for everything, and I categories it with comments to start out, and three spaces after each section:
/**** This is a section ****/
h1 {}
h1 a {}
The main principles I follow while writing CSS code: readability and logical flow.
The classic example of my code:
.example
{
width: 400px;
height: 25px;
font: normal 15px/28px helvetica, tahoma, arial, sans-serif;
color: #666;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
padding: 10px 10px 0;
margin: 0 0 1px;
}
Putting { and } in new lines grants me a readability. Secondly, dimensional attributes are most important – priority number one. Secondly, typo and appearance. Finally – positioning and behavior among another HTML structures. Actually, I do not understand an alphabetic ordering, because it’s like having bananas, bread and dewberries, doughnuts in different shelves while it should be in this way: bread and doughnuts, dewberries and bananas.
Anyway, it’s all about how your imagination works, have logic or not.
I must say I’m very much messed up in this area, I multi-line all the time, if there more than 3 arguments.
Otherwise its tabs tabs and tabs :D