Miguel Ventura's blog : Why is it still Hard to Learn CSS?

Lately I've been doing presentations on CSS to colleagues. CSS is continuously evolving, especially with CSS3, but this was a crash-course that only covers the very basics of CSS with some exercises in between, and the whole thing had to fit half a day. The audience was made of people that have been working with CSS for years now, some of them on a daily basis. Making real web sites. With a lot of style! Why would a course of CSS be useful for people that have been using it so much? Why did almost every attendee give positive feedback on the session?

The simple answer is because you can use something for quite some time without really knowing what you're doing. And why didn't they learn the basics in the first place? Because the way CSS is thaught on the internet is fundamentally broken.

CSS Learning with Online Content

I've never read a book on CSS, nor attended to a workshop or course or whatnot. All I've learned about it was by searching and researching within what's available in the internet. So all the information contained in the presentation was actually available in the internet.

CSS information in the internet can mostly be put into one of three categories:

And these categories are accessed by different kinds of audiences

With so much content available for different audiences, it would be natural to expect that learning CSS was an easy task. The reason why this isn't true is because there's virtually no content dedicated to how to solve the problem you need solving. This may seem like a ridiculous idea because there's no way the authors will guess exactly what you need, but it's not that stupid either because there are quite a few problems generic enough for almost everyone to struggle with them, that could have a little lighter answering.

Everyone ends up needing to layout things on a page, which means how to place and position things on a page. But if you look for positioining you end up finding static, absolute, relative and fixed, coordinate systems, and nothing of relevant for what you're trying to accomplish. Could you have guessed that floats were the right section to look for? And even if you could, how would you then make sense of all the information? Would you, just by reading MDN page on floats be ready to abuse this property and start splitting your layout into multiple columns within a centered page?

So what happens to everyone when they attempt at making their header-columns-footer layout? They resort to Google or to tables. If they get into Google, then they'll reach the clever hacks of people who've been fighting with the column problem for years, walking paths of such difficulty that upon reaching the solution they've even called it the Holy Grail. By then it is already too late: even it they're lucky enough to find a well written articule (such as A List Apart's), chances are they're already too tired to understand it and just want to copy paste the code. If it works, then the learned lesson will be that CSS is a kind of a dark magic which can be tamed by copying and pasting random code from the internet.

Keeping the Ultimate Goals in mind

People don't usually wake up thinking hey, today I really feel like learning a lot more about floats! They have other things in their mind and that's what we should aim for when doing presentations or writing content on the web, be it for CSS or for anything else. People want to solve some problem they have on the back of their heads. You don't want to know how the chemicals mix themselves to produce the flavor. You just want to have that cake.

As with everything in life, keeping the ultimate goal in mind will help you getting into what really matters. That's why the approach followed to create our little CSS presentation was:

At the end of each topic, people would relate with the goal and with the pains, and so they'd all be very happy to know about the tools and the techniques that could make their life a lot easier. They didn't learn what's the normal flow or the box formatting context, but they did learn how to solve their biggest problems and how CSS wasn't all that magic. Perhaps if we had more time we could, only after, explain all those technical details which combined make up the magic.

To be fair, our task was eased by the fact that we knew a lot about our audience. We knew what they'd been struggling with, what they felt that they lacked. We knew what their problems were, and what goals did they have in mind. But again, I'm pretty sure that laying out things on a page is a goal generic enough for everyone starting to learn CSS to be interested in that problem, so there's no excuse for lack of better learning content on the internet.

New Hopes

Better and better content on web technologies is appearing every day on the internet. Initiatives into improving that content and the discoverability of good content have been sprouting all around. I'm expecting that content quality on all HTML, CSS and JavaScript will still mature a lot making it a lot easier to learn these technologies.

CSS3 has some features that may help tackle some of the problems that where extremely difficult to solve with the primitives CSS2.1 offered, and that ended up being the root cause of why solving layouts with CSS wasn't an easy job. For example, if the CSS Grid Layout module matures enough to become the standard of making layouts in HTML, then learning the floating quirks could be left as an exercise to support the legacy browsers of the future.

EDIT (2012-07-28): I've stumbled upon some very good classes on CSS in Google Code University's course HTML, CSS, and Javascript from the Ground Up which despite still not following a problem-solution methodology, is probably the best introductory material to this subject I've seen online so far.