Different CSS Styles

Question

/* Style 1 */
.myclass {
 background:#ff0;
 border:1px solid #ff0
}
#myid {
 width:80px;
 height:80px;
}

/* Style 2 */
.myclass     { background:#ff0; border:1px solid #ff0 }
#myid        { width:80px; height:80px; }

I'm sure there must be more styles for writing CSS, I'd like to know what are they. Is there an article already written that lists all styles.

Thanks

Answer 1

Ok. I don't know if there is any article discuss about this. But for me style 1 is better in term of readability and debugging.

just my 2 cent

Answer 2

Here is a good list and discussion:

http://css-tricks.com/different-ways-to-format-css/

Answer 3

My answer will be more than you want, because I've seen a css files that was 60K long and consisted mostly of classes and ID's overwriting others - because no one knows how css works. They just keep adding things until they get the result they want.

.myClass { /* 0,0,1,0 */
  top-margin: 1px;
  padding: 3px;
}

#myid { /* 0,1,0,0 */
 width: 80px;
 height: 80px;
}

Repeat with space in between.

Now the important stuff.

1. The comments are the specificity of the selector.
2. Things should be ordered from least specific to most specific in the file.
3. Within matching specificities, it should be alphabetical.
4. There should be no more than one selector per definitiion - even if you could have put them all in the same selector. That way you can find them later. And your specificity doesn't get messed up. Hopefully you are using a compressor that can handle that correctly.
5. Classes and ID's should be specifically named to somewhat match where they are in your system. In other words, classes at www.example.com can be called
   .table. If you need a new table class at www.example.com/foo/... it should be named something like .foo-table and should apply and be used by things
   below it.
6. All css should be in separate files from your html document and all modifications to css should preferably be done by changing/adding classes and not by changing specific style attributes at the element level.

I'm the only one I know that does it this way, but everyone who has used it since has said, "Damn, that makes it easy to find my CSS errors!"