the singularity of being and nothingness
On Becoming a Better Web Designer: Default CSS
When I got into web design, table-based design was already anathema. So for me, CSS was the most natural thing–it was the ONLY thing I knew. CSS made sense to me, and I really liked how I could granularly control the behavior of everything that I slapped on a web page.
One downside to this, however, is that I went a bit overboard. To get this control, I went with what I thought was the best route–uniquely class EVERYTHING. This, of course, led to bloated stylesheets and difficult to maintain code.
My problem? I failed to take advantage of default element CSS behavior. What do I mean? Well, consider the <h1> tag. By default, this tag is a block level element which means it will take its own "line" and force content which follows it to appear below. The same is true with the <p> tag. So what's the point? Well, let's say we use good semantics and have our page title be wrapped in <h1> tags. If we simply use the default behavior, the title of the page will be separated from any content that follows it–that makes sense, so why not use it?
And <p> tags? As most are aware, a good percentage of WYSIWYG editors automatically wrap chunks of text in <p> tags (wherever there is a line break). So if you leave this alone and don't strip those out at render, an automatic amount of space will be placed between "paragraphs" in the body text. No need for <br /> tags or clearing divs.
So what am I getting at? Just this: Generic, vanilla HTML tags come built in with default styles that can be used to your advantage. Instead of creating brand new classes for spans (or something else) to get at the same functionality (like block level display, bold font-face, etc.), the default renderings can be built upon which will ultimately equate to less code to manage and more semantic markup.
A word of warning must be said, however. While some default styles are universally understood by all browsers, some browsers DO render certain elements differently by default (usually differences in default margins and padding). So then, to get cross-browser default styles, I use a reset.css that takes care of the inconsistencies (margins, padding, etc.) and leaves the default styles that are recognized universally.
To wrap this up, I'll say it again: using default styles to your advantage is a great practice because it helps to keep your design semantic (headings are headings, paragraphs are paragraphs, etc.) and helps prevent CSS line-number creep.
More in this series:
On Becoming a Better Web Designer, in 4-D!
On Becoming a Better Web Designer, Part Third
On Becoming a Better Web Designer, Part Deux
On Becoming a Better Web Designer [First Part]
Print article | This entry was posted by existdissolve on July 5, 2008 at 5:54 am, and is filed under Web Design. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
about -1917 years ago
hey there! i stumbled across your page and you do have an awesome page here! nice work! 🙂 I’d love to have the skill (and the page?) Hahaha! mind wanting to work on mines? hahaha! anyway some total stranger trying her luck. Seriously, i’ll be reading here onwards (downwards)
about -1917 years ago
It is very important note. However, I’d like to show us how to get the reset.css .
By the way, your website is very beautiful.
Best Regards.
about -1917 years ago
Said–
Thanks so much for your kind words about my site– I appreciate it!
I usually use the reset.css from Yahoo — http://developer.yahoo.com/yui/reset/ — although a google of "reset.css" will bring up dozens of examples.
Thanks again for stopping by, and feel free to stop by anytime!