CSS is too hard
I used to think of myself as knowing a lot about CSS. For starters, I’d been responsible for the CSS implementation in Dreamweaver. I was also a member of the W3C CSS working group. I wasn’t a major contributor (I didn’t author any of the chapters of the spec, for example), but I thought I knew the spec pretty well.
It’s been a while since I’ve touched CSS, and in coming up with the design for this blog, I was reminded again how difficult it is to use CSS to get the layout you want. It was incredibly difficult. I couldn’t get it to work and I ended up having to google around to figure out how other people had done their page layouts.
Does it have to be this way? Shouldn’t a reasonably smart person who has read the spec be able to create a layout without referring to a guru?
~
Tables vs CSS
The general idea of using CSS for layout is absolutely right. CSS lets you separate presentation from content, which is a good thing. The general idea of using tables for layout is wrong for exactly the same reason. It intermixes content with presentation, and besides, tables were originally meant to represent tabular data. There is another, more subtle reason why CSS is better than tables for layout: accessibility. With CSS, you can order your content in the preferred order for screen readers, and then use CSS to dictate where everything should go. With tables, the layout dictates document order.
However, there are some things that are trivial to do with tables that are mind-bendingly difficult with CSS. A lot of it has to do with what I’ll call float abuse.
Float abuse
There are a number of ways that people have found to create two and three column layouts that are popular on the web. Most of them rely on display: float.
Floats were originally intended to be used for floating elements such as sidebars.This is an example of a traditional use of float.They were not specifically designed to handle the overall layout of a page. Using floats to handle the overall layout of a page is not quite as egregious as table abuse, but there are similarities.
One of the problems with using floats to do overall layout is that they have significantly different rules for how margins are handled when compared with inline or block elements. If you were designing a system from scratch to define web layouts, would you purposefully make it so that the left column had different rules for margin handling than the right column? Probably not. Yet that’s what you get with floats.
The reason that margins need to be treated differently for floats is clear when you consider the original use case. Here’s a diagram from the CSS2 spec:
However, when you use floats to do a multi column layout, look at what happens to the margins. Let’s assume that A, B and C each have a top and bottom margin of 10px. Let’s also assume that B is floated left. In this case, the margins of A and C collapse, but the margin of B does not.
Worse yet, some of the wrapping rules of floats can lead to situations like this:
As bad as tables are, you rarely get yourself into situations like this with tables. My belief is that all these problems occur because floats were never designed to serve this purpose in the first place.
How should it work?
Bert Bos once mentioned to me that the CSS group had discussed doing something within CSS to handle overall layout. I don’t know what the syntax was that was being thrown around at the time, but it looks like there has been some progress on that front in the CSS3 spec. The current proposal seems a bit bizarre to me, but I am incredibly happy that they are looking at this issue. FWIW, my personal preference would be to introduce @ rules to do a container based layout hierarchy:
@layout {
name: "threecol";
type: vertical;
width: 100%;
height: 100%;
children:
@layout {
name: "headerArea";
width: 100%;
height: 40px;
},
@layout {
type: horizontal;
width: 100%;
height: 100%;
children:
@layout {
name: "leftArea";
width: 150px;
height: 100%;
},
@layout {
name: "mainArea";
width: 100%;
height: 100%;
}
}
}
#header {
layout: "headerArea";
}
#sidebar {
layout: "leftArea";
}
#content {
layout: "mainArea";
}
I’m sure that the above psuedo-CSS has lots of problems, but the general gist is that I want to think about layout in terms of containment, not in terms of slots. But in any event, anything is better than thinking about floats!!
When to be practical, and when not to be
The main thing standing in the way of a new, better syntax for page layout is the real world. Can the W3C create a proposal that a whole consortium of companies agree to? Can we get this implemented in the browsers?
These are good questions, and for the foreseeable future, we may have to live with what CSS2 offers us. However, I want to make sure that pragmatism doesn’t lead to complacency. Is it great that I can now do a web page layout using standards-based CSS? Absolutely. Does CSS seem easy enough for the kinds of things that people want to do with it? Absolutely not! Laying out a web page in CSS is mind-bendingly hard. It shouldn’t be that way. People who create web pages should be jumping up and down asking for something better.
I agree with you Sho, whenever I got into Css at first it looks easy for the basic page desgin but after layout takes a bit of work which then i ussaly end up getting scripts of somewhere else.
Css is difficult for the initial layout, but you can get layouts from lots of places. I’ve mostly just edit and rework free wordress templates.
Should look at the way Styles and Templates are done in XAML for WPF
think that’s the way Flex 3/Flash 10 Authoring should go down :)
If display:table were supported across the browser world, abusing float wouldn’t be necessary.
Hmm… if display:table is there in the CSS2 specs, why not use it? IE7 is on its way, and I think one could write a display:table/table-row IE6 interpreter (or for any browser that only supports CSS1), creating CSS rules from JS…
Interesting points about display: table. Philosophically, I think the CSS community is opposed to using tables in this way. One reason is that people have it stuck in their heads that tables are supposed to be used for tabular data, regardless of whether HTML or CSS notation is used. I think this is something which we could reverse. Once the HTML markup has been moved to CSS, I think one could argue that the CSS notation is about presentation of the information, and anything that gets you the proper presentation is fair game.
The harder issue is that the structure of the HTML tags is still important in getting tables to look the way that you want. It is quite typical to have an HTML document which looks like this:
<div id=”header”/>
<div id=”main”/>
<div id=”nav”/>
<div id=”footer”/>
If you want the navigation to appear on the left, you can do this with float, but not with tables. And in fact, I am not 100% certain you can use display: table to make things work even if the navigation goes on the right, since you would need a tag to attach the table row to. (It would have to wrap the “main” and “nav” divs).
Of course, most float based layouts also dictate tag structure to some degree, which is another clue that float based layouts are “cheating”.
I’ve thought of myself as a skilled web developer using tables, my graphic design apps, and basic CSS technique, and basic php programming skills. But now I’m brought back to zero when trying to make layouts with CSS.
I seriously don’t like the way css layouts look. They all look like they’re missing something. The reason for this is that I think that CSS layouts are so difficult that art is hard to integrate in with them after you wind up spending needless hours trying to arrange things.
It’s most likely that my brain has been accustomed to the tables based web, but even at CSS Zen Garden, I’m not entirely impressed by the offerings of ‘artists’ on there. I’m not trying to speak as if I’m a snob, I’m not that much of an artist, but this crap is seriously getting in the way.
It makes me reconsider web development and maybe just publishing a damn magazine every month. The internet is a difficult medium to work with that hasn’t matured and I’m more than certain that it will never mature. I’m tired of web standards crap and constantly having to learn how to do things. It all takes away from the content itself.
People go on the internet for content. Whether it’s art, text, audio, or video. Myspace was ugly as hell when it first started and still is ugly today. People continiously go to it for it’s basic functionality. They have control, they don’t have to spend hours learning web programming and other crap to distribute comments, share photos, and more.
I love the idea of having customizability and power, but all of this is sucking away from my content generating abilities. I’m tired of the red tape.
hm. I’m a bit mixed on the article Sho, and some of these comments, but regardless of my opinions, all around a good read, espescially with how clear you explain your thoughts. I found this blog by google-ing “how IE6 interprets float” and saw “Float Abuse” and figured that would be what I was looking for, I’m having a minor problem with IE rendering entirely different from the rest of the big 4 browsers. Anyways, on with your article and some feedback.
I’m no programmer, strictly front end to be honest, but I’m pretty good at CSS. I don’t really have the pedigree that you have with the W3C CSS working group, but I’ve got a great deal of working knowledge. I cut my teeth on CSS layouts by learning how to do it trial and error (and a few good books I’ll mention at the end here) making UI’s and GUI’s for a call center software development team. From photoshop to the CSS, if you think three column layouts are hard or float abused, try a seven column layout with collapsing and expanding, all tabless. Three columns are a breeze now, but your right, float’s are abused. The issues you mention above are jsut the tip of them, try cross browser checking and watching your floated three column layout go to hell and back. I’m sure you have, haha, and your blog looks great, so I’m not talking about you specifically so we’re clear. Anyways!
(I ramble, I’m sorry, lol) I’m not entirely sure where your going up there with the psuedo code, but I don’t think I’m a fan, it looks more complicated than things need to be. You mention you like this because you like to think about CSS layout in terms of containers and not slots, and maybe I don’t follow, but I figured you could only think of CSS layout as containers with hooks for your styling needs. I am probably not thoroughly understanding your slot mentality, so if you could I’d love to know what you meant by this.
You bash pretty badly on floating, and I understand entirely, lol. I’ve been there, in the beginning, when floating becomes this monster that is out of control, and tables suddenly look like your best friend again. But that all being said I’d like to say that after some teeth cutting, its not nearly as hard as you think, and that floating is something everyone, -everyone- gets blasted on, its mind bendingly hard, because well, the concept of floats are a mind fuck when you come from table based layouts. None of the gurus blame you for blasting the floats so badly, haha. I do hope that from here you’ve pursued it more and see that it’s not so bad.
You spke above in your comments about display: table and how we all have it stuck in our heads that tables are for tabular data. Well, your right, they are for tabular data, but not all of us have it stuck in our heads. I’m a bit of a purist, so I agree with that statement, that tables should only be used for what they were intended for in the beginning, being containers for tabular data, not visual helping hands. You’ve got two spectrums here, and I’m thinknig your leaning more toward the second I’ll mention here, but one i see is the purists. Those of us who are all about the standards, the screen readers, the proper clean markup, and semantics. Thats where we all get our heads stuck on the whole table thing, semantics. Everything on that page means exactly what its there for and marked up as, and nothing else, and we use those elements to style the page. The other wing is going to be people who are tired of the failures of tables and the needless markup, but don’t care about all the tape surrounding the purist mentality. My two cents on the table though, which is I don’t agree that everything is fair game.
To Bonz, I started out as a graphic designer before I ever even cracked open an HTML book, so the look of a website is extremely important to me. To this day, I haven’t had any issues with CSS layouts inhibiting my creativity in any way. I design the same way I did when I was slicing everything up in photoshop and using the tables it pumped out, except now I slice things differently to fit, and thats my point, its really all thats needed, to see where the containers are, how they fit together, and slice your graphics accordingly. I see even less red tape now than I did when I was doing table design, and I see tons more flexibility and accessibility when I use CSS designs.
Just my two cents, go out and add a dollar to it for a coffe ;). By the way, a great great book that covers alot of issues from brand new css designer to guru css designer issues is CSS Mastery. Awesome stuff to help ya through alot of these issues. Good article Sho. Thanks for the read!
– Ken
Good thoughts, Ken.
FWIW, you’re probably more of a CSS expert than me. Being a guy on the Dreamweaver team who implements CSS and goes to W3C meetings doesn’t mean squat when it comes to using CSS. Being a designer in the real world counts much more.
I personally feel that float is the wrong thing for defining layout of this type. Unfortunately, there’s nothing else better.
The CSS pseudocode is pretty ugly, I agree. The basic concept underneath is pretty simple, but the @ syntax makes it hard. (Bert Bos sent me mail that Dave Raggett had apparently suggested something very similar many years ago).
Here’s the basic concept:
Layout should be defined in the CSS, not the the HTML. This includes things like separating the order in the HTML document from the order in the final layout, which can’t be done in CSS today.
I personally like boxes and glue for layout. Maybe that comes from being in grad school and using TeX. Anyway, in a containment model, you tend to create layouts like this (in XML pseudocode):
<vbox>
<topItem>
<hbox>
<leftItem width=”150px” />
<rightItem width=”auto” />
</hbox>
</vbox>
When you render that in @ rules, it gets messy.
Anyway, it might not be the right idea, but I think that it would be great for someone to come up with something other than the current regime of float, et. al. to define layout.
Again, thanks for the thoughtful comments!
My wife, bless her, thought it would be a GREAT idea if I start getting on the CSS bandwagon when it came to designing “tableless” websites.. I scoffed at her of course, being set in my ways, I said it’s a waste of time and only till recently have I given it a shot. I’ve cranked out 4 websites all tableless, but I have to say this, it is still a major waste of time because you have to FIDDLE WITH EVERY SINGLE THING! Yes im shouting because after going over my logs, I have wasted gobs of hours with CSS. Yes I realize there is a learning curve but please, with tables, it just worked (mostly). With CSS there is so much dicking around that has to be done to get the end result your after, it’s almost not worth the effort at all. The monkey’s who call themselves the w3c, or whoever creates this rubbish, needs to make it streamlined. If I want to move something over somewhere, why not create something called position, rather than have to hack about with float!?!?!?!?!??! Make it simple, and for heaven sake’s the w3c should stuff the 3 cent word’s on their website and make it more user friendly and easier to navigate and understand!!!! We’re not all harvard graduates here!!!! Im done ranting, imo right now CSS is not worth the time, especially if you have a business and need to meet deadlines!!!
CSS *does* extract its pound’s worth of flesh in order to gain its benefits. Moreoever, unlike the advocates of pure CSS, table-less designs would like us to think, it is NOT the best thing since sliced bread and there are some things that are much harder to do using CSS than without.
That said, while CSS has warts aplenty, it is still better than not having it, and I try to utilize it in as many scenarios as practical. However, I don’t for one moment deceive myself into thinking that there aren’t a handful of situations for which use of some old non-CSS techniques are still preferable. CSS gets a grade of C+.
[…] it all makes perfect sense; but it seems a long time coming. Worried that it was just me, I found this reassuring post from Sho Kuwamoto: I used to think of myself as knowing a lot about CSS. For starters, I’d been responsible for the […]
[…] I’ve heard no shortage of people complaining about how CSS is too hard. When it’s being pointed out by people like Sho Kuwamoto, though, it should be clear […]
I’d like to find out more? I’d like to find out more details.
My page – garcinia cambogia