CSS Zen Garden Turns 10

mlingojones writes "The CSS Zen Garden — an attempt to showcase the power of CSS, from ye olden days when most sites used tables for layout, when CSS2 was bleeding edge, when IE5 was the most popular web browser — turns 10 today. In celebration, the maintainer Dave Shea is reopening the project for submissions, with a focus on CSS3 and responsive design."

Comments

Re:CSS is Awesome

[CastrTroy]

I tend to use a little bit of both. While I'm sure everything can done without tables, those of us with real time constraints on projects sometimes just need to get things done. A few simple tables can sometimes save you a significant amount of time in getting your design to look right.

CSS hype

[Animats]

CSS has its uses, but the approach to layout is awful. The "float/clear" model is fundamentally one-dimensional. Tables are 2D grids. Most layout systems, like Qt, have some kind of 2D grid formatting system. With float/clear, just getting a few columns to work right is tough.

In practice, many sites went back to tables for layout. Facebook uses tables. Google uses tables. Amazon uses tables. eBay uses tables. Even Slashdot uses tables. Pure float/clear layout is seen mostly in HTML generated by content-management systems, like Wordpress.

CSS certainly didn't make web pages shorter. The claimed "abstraction benefit" never materialized. Some content management systems generate a separate page of CSS for each HTML page. Others just keep generating the same verbose junk over and over again. There are rather routine web pages with 4000 lines of HTML/CSS.

Re:CSS hype

[Anonymous Coward]

Erm..

With float/clear, just getting a few columns to work right is tough.

Tada. Problem solved.

Pure float/clear layout is seen mostly in HTML generated by content-management systems.

I could almost believe you were trying to be funny or deliberately inciteful with this statement, if the rest of your comment wasn't so ridiculous.

The claimed "abstraction benefit" never materialized.

I think this is the biggest WTF in your entire post. Every time you 're-use' a CSS class in several places on your site you're seeing the benefit. Don't want to have the same styles applied to every widget DIV within the HTML? Put them in your CSS file and apply the class. How is that not a benefit? What is your suggested alternative? And this is just the simplest case - there are many others obvious ones.

Your post also talks a lot about CMSs and CSS generation. I don't buy that at all. The CMS we use doesn't generate any CSS - it's just an easy way to create content with templates that we've defined entirely statically.

One last thing: I'm a developer, not a 'web designer'. I've noticed that quite often 'web designers' don't take a particularly structured approach to writing CSS. They look at something in their mock-up, write the HTML for it and style it and then move on to the next thing. Wash, rinse, repeat. This leads to large CSS files and many repeated styles within. I find that I approach it entirely differently (as it's the way I approach writing code I suspect) and will look at the mockup, break it down into chunks and composable/re-usable styles etc. and end up with short style sheets.

Don't get me wrong, I'm sure that there are many 'web-designers' out there who do use CSS 'properly' and who understand it better, but more often than not the ones I hear complaining about it are the ones who do not understand how to write it properly and end up with 7500 line CSS files. (This number is not plucked out of thin air either - it's the length of a file we were left with after we outsourced some work to a design agency recently for a site with only about 5 different HTML templates for the entire site... each page had its own set of styles and hardly anything was reused.)

For a change, I _hate_ Zen Garden

[Cyberax]

Yes, I absolutely hate and detest CSS and Zen Garden. Their so called 'designs' are filled with absolute pixel sizes and assume a lot about fonts used - set fonts to 250% and lots of these 'designs' become unintelligible. That crap has set us back at least 10 years in UI design.

It has only recently became possible to use CSS to create table-like sites, and it's still NOT possible to create non-trivial sites that resize themselves based on content.