The difficulties of learning CSS

Today there was a post to the css-discuss mailing list from someone who needed to vent his frustration with CSS. I can definitely understand much of the frustration, but I don’t think it really has a lot to do with CSS. Learning anything can be difficult, confusing and frustrating. Whether you’re trying to learn how to ride a bike, swim, drive a car, code HTML or use CSS, most people will get frustrated, feel like giving up, and then give it another try.

One of the problems I see is that many people who complain about CSS being too difficult haven’t really learned how to code HTML properly. Jumping into CSS-based layouts without a solid understanding of HTML will not be easy. Going from table-based WYSIsortofWYG tag soup to structured, semantic HTML+CSS will take some time and effort. But it’s worth it. I know. Having worked with web design and development since -95 or -96 I’ve had to unlearn the table tag soup ways of coding and really learn HTML.

Another problem is that there are CSS evangelists who swear up and down that not only can CSS do everything that tables can, it does it cleaner, easier and better (quote from the post to css-discuss). Yes, there are. And no, as long as browsers like Internet Explorer don’t improve their CSS support there are a few layout tricks that are very hard to achieve with a pure CSS layout but are easy to do with tables. Don’t blame that on CSS though. Blame it on lazy browser vendors.

So, what is it that you can’t easily do with CSS that is easy with tables? Some things I can think of:

Anything else? I can’t think of anything else, but there’s probably one or two other cases where pure CSS layout won’t work well, especially in Internet Explorer.

Note that there are cases where tables should be used. A common misunderstanding is that tables can’t be used for anything, but if you’re marking up a table of data, a table is what you should use.

If you feel that you absolutely must have something in your design that calls for a table, then go ahead and use a table for that specific effect! Just avoid nesting tables, make sure your markup is semantic and valid, and then style the page with CSS. You’ll still be way better off than if you do the old-school thing with five levels of nested tables, font tags, presentational, invalid HTML and no semantic markup whatsoever.

Simon Willison has also written about this, apparently triggered by the same post to css-discuss. As he gets much more comments than I do, you may want to check out his post Teaching CSS: there’s a long way to go.

Posted on November 19, 2003 in CSS