Styleless
When Eric Meyer first came out with his reset style sheet I jumped on it and put it in all the sites I was creating then. It caused some problems, it fixed others and it added about 800 bytes to the CSS. I was using it as a “silver bullet” to fix my layout problems. And I was wrong. I mis-read Eric’s post many times. What he was saying was that his reset CSS was a starting point for us to make our own or to customize his.
It makes me wonder: If I got that wrong, how many others did too? A colleague and friend of mine, Jon Zuck said that he didn’t like Eric’s method because it was like taking a shotgun to the styles. I’ve also had other conversations with people ranging to loving what Eric has done and to hating it.
After much thought I’ve created my own starting point. It covers most of the common elements I use in nearly every site I build. It is what I use as a base for a new site I create, though I end up changing it more often then not. I’ve uploaded a CSS and a XHTML file as examples of what I’ve done.
Now that the CSS file is correct, looks pretty good. I think I would collapse the border on the tables. I’m assuming it works on Windows browsers (I don’t have any of them here…) Nice work.
Comment by Zach Young — May 24, 2008 @ 1:16 pm
Nice baseline… Like Zach, I also like using border-collapse:collapse as a default. And I think I’d separate the decimal list-type into a declaration for just ordered lists…
I’d also probably declare a much-smaller line-height, possibly 1.25, for the headers, so bottom-spacing would sit headers nearer the content, and scale proportionately with the text size … (interesting discussion about this in the the chapter on typography in Cascading Style Sheets, Briggs et al. about how larger type doesn’t need the same line-heights as body type.) with a declared margin on the top alone.
Very nice job, Andrew
Comment by Jon Zuck — May 24, 2008 @ 2:33 pm
Oh, I almost forgot… a few other things I do on virtually every site:
1. declare a float + opposite side margin for both directions, example:
floatleft: {float: left: margin-right: .5em;}
2. a img {border:0;}
3. img {display:block;}
Comment by Jon Zuck — May 24, 2008 @ 3:06 pm
Looks good to me. Out of pure personal preference and going by what I actually find myself doing, I would probably throw a boder:0 on fieldsets as well. No real reason, I just find that I end up turning them off more often than not.
JZ, two questions…
1. Why the display:block on all images?
2. Do you find that having a class name that explictly declares what it does hinders things? I have seen many people use various float classes, but to me it seems like the equivalent of having a class named ‘red’ instead of ‘error’. It seems presentational instead of semantic.
Comment by Christopher Jones — May 29, 2008 @ 4:23 pm
Chris,
Since images are actually inline elements in xHTML, display:block makes them behave more as we’d expect… Most importantly, it gets rid of the 3px “gutter” at the bottom of images… inline space reserved for the descenders of letters q,y,j, etc.
I mostly use .floatleft / .floatright on IMGs my personal site. I like to have a variety of image positions, i.e., not all floating on one side; some articles might start with an image on the left, others on the right. I’d love to come up with a more semantic name for .floatleft / .floatright. What would be better? .sideItemL / .sideItemR? I suppose you could call them something like .image and .illustration for purely semantic class names, but that adds a needless memory burden in the service of a purely idealistic goal, IMHO. Your thoughts?
Comment by Jon — June 2, 2008 @ 3:23 pm