Getting more familiar with CSS

Today I realized that I absolutely suck at using CSS. It's not something that I ever really spent a lot of time working with, and I've always had a bit of a hateful relationship with web-development.

For a long time, doing any sort of serious web development work was nothing but a pain in the ass - there were so many shitty hacks around browser inconsistencies that you could probably live off of the print-up of them for a few months. Recently, things have gotten quite a bit better, and frankly the only browser that really plays "bad" when it comes to standards is IE - and even it has gotten lots, lots better.

So anyhow, doing CSS work is not nearly as painful as it used to be, although for someone who is not a designer type (like me), it can be a bit hard to make a site look pretty, not to mention that there are a bunch of "accepted" ways of doing things that may not be really obvious, like using lis for tabs.

Three things helped me out a great deal - one was this talk by Douglas Bowman. While he didn't spend too much time talking about actual CSS code (it was assumed that you were already familiar with the workings of CSS), some of the points made were very good, even if they seem a bit obvious, like "Design your site in something else - pen & paper, photoshop, the gimp, whatever. Don't design your site using CSS because then you'll be limited to how much CSS you know, instead of having to learn more to get your site looking how you want it."

The second thing that helped me out a whole lot was YAML builder , which is a tool for designing multi-column layouts using YAML (not to be confused with YAML). While I won't be using YAML for my extendable tetris game, the tool was really nice for getting a look at how to properly structure an XHTML skeleton for doing a layout, as well as some CSS techniques.

One last useful thing I found for getting more familiar with CSS and how it's used was Eric's CSS Reset Reloaded, which basically sets everything to nothing, as far as CSS goes. Not only does this get rid of a good bit of cross-browser pain, it also forces you to manually set up, well everything - which is really useful for learning.

You see, I'm fine on implementing the back-end stuff for this site. The technical functionality of the web-app I'm working on really isn't that hard for me, and I can test most of it (using, you know . . . tests), however on the front end the usability and functionality of the site is more or less inherently tied to the presentation of the site - and you either have to know your way around CSS, or resort to using some table-layout monstrosity shit out by Dreamweaver that will be hell to maintain and ugly as satans balls to anyone who's looking at your source (you included). I refuse to take that second option.

Anyhow, end result was that my design for the shape editor got much cleaner, and a bit more modular - which is never a bad thing.