i got an email from a buddy this morning, and figured i'd go ahead and blog about it real quick, since i've gotten other emails with similiar questions of late.... and i also happen to be dealing with this kinda thing at work at the moment, since i'm try'n to impart how the new Job.com design works, how it's layed out, how the markup is and should be used and preserved, and how the stylesheets i created are to be used, etc...

anyfoo, here's part of the email:

I admire your markup language on forgetfoo.com. I have a...guess you can say newbie by quick question. I noticed that I rarely, if not all, see you putting actual styles in you're your div, imgs, p tags, etc.

1. Do you try to create a class for every style?
2. Is it necessarily a bad practice to put as an example: style="background-color: #FFF; float: left; padding: 12px 20px 12px 4px;" in a div tag or style="float: right;" or any type of CSS markup in a tag?

i usually dont blog about this kinda stuff, at least not often, simply because i figure there's better resourses on the web about this kinda stuff... i always feel kinda "preachy" in these types of blogs, and i'm learning myself.... so what the hell do i know, right?

...but if you want my unassuming thoughts on it, here they are... i approach my stylesheets with a couple general thoughts or guidelines in mind.... if i use a style more than once in a design, it belongs in an external stylesheet. i try to keep the content seperated from the style as much as possible, whenever i can, and only use inline styles when i want to do something out of the norm, or for a specific reason... and that only usually happens when it's Content based, and not a part of the webpage design or format.

when working on a design, i typically will have a big style block at the top of the webpage i'm working on, and i add and tweak with the CSS up there, as i workout how the page is looking and working.... then when i'm done, i'll simply copy/paste my CSS into a new file and save it, then calling it as an external stylesheet. you can also start to seperate different sections of your website out into it's own parts, and then include them in the main stylesheet being called or loaded...

for example, i might call and load myStyle.css in the top of my webpage or template.... and in that stylesheet, i define a few simple things like the body and anchor tags, but at the top of that stylesheet i'll call and include other stylesheets, using the @import method. for example:

@import "page-format.css";
@import "blog.css";
@import "articles.css";

body, html {
    background-color: #fff;
    margin: 0;
    padding: 0;
    font-family: verdana,lucida,helvetica,arial,sans-serif;
    font-size: 1em;
    color: #333;
}

in these other CSS files that i import into my main stylesheet, i define all the CSS classes and rules for those sections of the website... such as the style i create and use for my blog posts, or the main formatting/styles used in my main page layout. there's advantages to doing it this way, namely it keeps the filesize of your css files down, so they tend to load faster... they're also cached at the browser level, which is a good thing... another reason is that it makes it easier to update sections of your website, and if you do, then that one .css file is reloaded and cached instead of one huge ass stylesheet..... does that make sense?

as i said, i dont like getting all "preachy" and shit, but it seems like i've been asked alot of design/css questions of late.... kinda trips me out, since i dont know what the hell i'm really doing half the time... not to mention these types of posts never seem to be short, and i suck at writing long-winded posts *chuckles*