
Don't Blame CSS For Your Incompetence - Jem
http://www.jemjabella.co.uk/blog/dont-blame-css-for-your-incompetence
======
tlrobinson
"They're both wrong. You can order your content how your like. You are
_restricted only by your knowledge of CSS_ and not its ability as a styling
language to render your documents. _It took me about 30 minutes to knock up a
demonstration_ , which you can see for yourself: columns in order and columns
out of order."

I think the fact that it took you (a CSS pro) 30 minutes to come up with a
simple 3 column example that's hard for me to understand, reflects poorly on
CSS. Just because something is possible doesn't make it a good technology
automatically.

I might be able to make a Turing machine out of my blender, some rubber bands,
and chewing gum (note: haven't actually tried this). It might be Turing
complete, but I'm not going to be able to program anything useful with it (an
admittedly extreme example)

~~~
KrisJordan
This article, while well intentioned, misses the point it was trying to prove.
The article gives an example of a three column layout with two different
orderings of the <div>'s in HTML to prove "ordering doesn't matter". The
problem is the CSS in the examples changes along with the re-ordering of divs.
This is exactly the point it was trying to disprove.

Though the coupling between CSS and HTML is loose it's not quite loose enough
to allow HTML to be arbitrarily reordered and maintain the same presentation
without also modifying the CSS.

~~~
Jem
You're right, I misread Joel's quote & I'm grateful he took the time to
clarify. This doesn't make it any less possible. For example:

[http://www.jemjabella.co.uk/junk/rearrange/abs-columns-in-
or...](http://www.jemjabella.co.uk/junk/rearrange/abs-columns-in-order.htm)

[http://www.jemjabella.co.uk/junk/rearrange/abs-columns-
out-o...](http://www.jemjabella.co.uk/junk/rearrange/abs-columns-out-of-
order.htm)

Same CSS, re-ordered columns.

Although for the record, I dislike the technique used to achieve the results.
As the person above you said - just because it's possible it doesn't mean it's
any good!

~~~
shiranaihito
Out of curiosity..

Is there a fun story behind your website's headline: "Jem Jabella - Ultimately
Better Than You" ?

~~~
Jem
jemjabella was nickname given to me about 10 years ago, and the tagline is
intended as humour.

I use it as a measure of whether or not people should read my site... i.e. if
you find it funny, or are able to ignore the blatant egotism, then you would
probably be OK reading my site. If it winds you up or gets to you, then you
won't like the content and you should read at your own risk. :)

~~~
shiranaihito
> the tagline is intended as humour.

I see.. :p

Could you explain the joke to me?

------
sam_in_nyc
I like tables because I know how to use them, and they work in all browsers.
Plus valign and align work. The lack of valign in CSS as well as the
documentation of it appearing to be: "this but that unless this or that and
then that, but you cant do that unless this, duh, know CSS," makes me want to
RAAAAAGE.

I always thought CSS worked well for decorating stuff, and not for layout.
But, anyway, I almost always use CSS. The exception being: I need some quick
layout where floats are screwed up and I don't feel like spending a whole day
figuring out why (see above statement about its documentation).

Regardless, one thing that bothers me is when people claim that it's entirely
your fault if you can't use something, because you didn't bother to learn
enough about it. This is always true, but surely we all can agree that things
have different levels of inherent difficulties. Adding, for example, is much
easier than differentiating, though they both require you to learn it before
you can use it. So when people complain about how CSS is not as simple as it
could be, or that all the little nuances and exceptions are ridiculous, this
is due to some _mixture_ of ignorance and inherent complexity in CSS, and is
not entirely the person not knowing CSS. This also applies to situations where
rather than taking a criticism in stride, the answer is: "Don't like it? GET
OUT."

I guess, in short, the attitude of "that's the way it works, deal with it" as
being a valid argument for "you shouldn't be complaining" really pisses me
off.

~~~
joe_the_user
Ah, the thing I just realized that I know _more_ about divs and CSS and _yet_
I can _still_ use tables better. Having only worked with table a dozen times,
I still know exactly what a table will look like when I create it. I know that
I won't know, exactly. what div/CSS is going to look like when I'm done.

And mod-up "Regardless, one thing that bothers me is when people claim that
it's entirely your fault if you can't use something, because you didn't bother
to learn enough about it." A good language, a good system, a good process
"makes easy things easy and difficult things possible". As far as I can see,
CSS fails with both. And, today was the tipping point for me personally. I
would have endorsed CSS yesterday.

Well, I know CSS is great if I want arbitrary rectangles place on the page.

~~~
sam_in_nyc
When I was like 13 and CSS was just getting started, I was so excited that I
could add decorative styles to things. I mean, I thought it was ridiculous
that instead of <b></b> I had to look up some arbitrary thing like "font-
weight:bold" and I still to this day have trouble remember how to do italics..
I just looked it up, it's "font-style:italic" and same goes for underline...
"text-decoration:underline". Who comes up with these names?

Anyway, I agree... today I no longer fear using tables... and, fuck it, I'm
bringing back <b> <u> and <i>.

------
ibsulon
The original example had a top and bottom spanning all three columns, making
the problem fundamentally different than you describe. I would be more
interested if you could take that original example in the original post and
show how CSS does not run into the problem that is described in the original
post.

Further, you test it in Firefox 3. The problem that I see is that in the Real
World (TM), I must make sure that the website works on Internet Explorer 6.
Most of the problems I encounter with CSS layout involves cross-browser
inconsistency.

I do not pretend to be a specialist in front end work; frankly, it is my least
favorite part of development. However, I've made an effort to learn CSS layout
systems only to go back to tables in projects that someone else isn't doing
the work.

~~~
Jem
The original example in the original post complained about not being able to
swap the center and side columns, I didn't feel that the header was relevant.
However, I could create additional examples if necessary.

Ref: real world - agree totally. However, as I said earlier today (
<http://news.ycombinator.com/item?id=463712> ) you can't blame CSS for the
flaws in IE.

~~~
axod
How about you create a _full_ solution...

    
    
      * valign works
      * cells are equal heights, dependent on contents
      * if width of contents is too big, cells adjust and display it best they can

~~~
Jem
I wish :)

~~~
axod
Then css is not useful for a lot of layout :/

~~~
Jem
Hence why this was not intended to be a justification of CSS, just a
disagreement with one specific point.

I'll let the likes of Eric Meyer etc defend the rest of it. I'm sure they know
more about it than I do anyway.

------
arockwell
This is not exactly a very convincing article. For one the two examples do not
display the same in FF3 (there's different amounts of white space between the
three columns in the different versions), and of course, the examples looks
completely different in IE 6 which is about 90% of the problem to begin with.

~~~
Jem
The articles I'm disagreeing with state that it's not possible, neither
restrict that statement as purely an IE6 problem. The demonstration is to
prove that it is possible, which it clearly is. I could tweak the positioning
of the columns by one or two pixels but it wouldn't make any difference to my
point, would it?

~~~
randallsquared
We Tablists __* only have to point out one hole at a time to continue being
right. Not restricting the statement just makes it harder to refute, since you
have to cover all the ways in which CSS-for-layout is deficient, rather than
just a single way.

 __* Table-for-layout-ists is just too long, don't you agree? ;)

------
discojesus
> It took me about 30 minutes to knock up a demonstration

Really?

>Both are visually identical in appearance, both use CSS to control the
positioning of the columns, but one is in "correct" logical order in the
document (left, center, right) and the other out of order (center, left,
right).

Really??

> (Only tested in Firefox3 on Linux.)

Ah, there it is. :)

~~~
braindead_in
We'll the author says intent was to prove it is possible. I believe him.

~~~
discojesus
> We'll the author says intent was to prove it is possible.

Which is a straw man - nobody's arguing that it's impossible. The argument
generally centers around valid, web-tested, academic-approved CSS layouts
being practical for use in the real world. I worked with someone who did
freelance web design on the side and who said "I program for Opera and only
test in Opera." Does anyone really need to wonder why he didn't have any
repeat business?

I also worked in a slicing sweatshop, and using CSS to do layouts instead of
tables _tripled_ the amount of time it took to slice a PSD mockup. Department-
wide adoption of the YUI CSS framework brought this down to maybe double,
although YUI still has some of the basic layout issues that CSS itself does
(eg the lead engineer on YUI CSS told me himself that the only way they know
of to solve the equal-height column issue with YUI is using Javascript, and
there is no equal-height column CSS hack that's anywhere near to understand or
cross-browser compatible as table-tr-td-td-td). The greatest time sinkhole by
FAR was CSS layout debugging. It was not infrequent to have someone's whole
day go down the drain struggling with some god-awful cross-browser issue that
would be relatively easy using tables for layout. So I've been there, to the
point where I know that the only CSS books that aren't nearly completely
worthless are _CSS Mastery_, _Bulletproof Web Design_, and maybe O'Reilly's
Definitive Guide.

Doing a layout in perfect, valid CSS separating presentation from content (as
much as possible, because I've never seen them successfully completely
separated in a non-trivial project) is sort of like writing a book and having
a sticker on the cover that says "This book has been validated 100%
grammatically correct." Swell, but it really doesn't have anything to do with
the price of spinach.

Just like how the fact that many people have a beef with using CSS for layouts
doesn't negate the fact that for everything else it eliminates redundancies
and is generally the cat's pajamas, the fact that tables look ugly doesn't
negate the fact that in many cases they Just Work faster and are easier to
understand than CSS for standard layouts like three equal-height columns.

~~~
braindead_in
Dude! I have spent ages in debugging IE shit as much as you have. And have
lost much of my hair! But I dont think what everybody's discussing here is
cross browser compatibility. When you start with CSS you know are very much
aware that some browsers dont support it. Each and every tutorial, all those
books, point it out. So why go back and complain CSS sucks.

~~~
discojesus
My condolences - I too know the pain of IE debugging. But it seems you're
making the same error that the linked article is. The relevant question is not
"is it theoretically possible to do layouts in CSS?", it is "CSS-based layouts
vs. table-based layouts: which is better for _Just Getting Shit Done_ in the
Real World?"

And in my experience, for _reasonable_ client-acceptable cross-browser
compatibility (ie IE6/IE7/FF/Safari), CSS based layouts often cause more
headaches than they're worth.

~~~
braindead_in
No. In my experience a mix of CSS and table based layouts work out fine. There
are cases when floats and clears are overkill. But so is a complete table
based layout.

~~~
discojesus
> No.

I appreciate your enthusiasm, but I'm sorry to say your assertive "No" doesn't
negate the fact that my experience is that CSS-based layouts are very often
not cost-effective compared to table-based.

We had 15 people doing slicing all day, every day, 50-60+ hours a week. We
weren't all morons. You better believe we figured out what works and what
doesn't, and as I said, the switch to CSS-based layouts tripled the time it
took to get a site to a client. If you want to believe that everyone in the
shop just happened to simultaneously become mentally retarded at the exact
time the switch was made, you're free to do so. Personally, I think Occam's
razor suggests otherwise.

~~~
braindead_in
I respect your experience. And I dont want to drag this. If CSS hasnt worked
out for you, and you are using tables, its fine. Nobody's saying that its
wrong.

The point is, choose whats best for you. For me CSS has worked!

~~~
discojesus
>The point is, choose whats best for you.

Agreed 100%.

------
mixmax
Apparently it's CSS day on HN.

~~~
eli
I think it's one downside to the only-vote-up story system; once a debate
spills outside the comments of one article, you end up with half a dozen
submissions reflecting various viewpoints.

------
Jem
I apologise in advance. On reflection, the title sounds much more offensive
than was intended. The point of the entry still stands, however.

~~~
gojomo
FYI, I found your blog's color scheme -- blue-on-blue with blue links -- and
small text hard to read. Design tips that are hard to read are somewhat self-
nullifying.

~~~
Jem
Design and coding are two totally separate arenas. I am useless at design.
Nonetheless, I'll bear your criticism in mind. (Although you can resize the
text yourself, it's %-driven.)

------
fhars
(Tested only in Firefox 3 ...)

Ay, there's the rub, / For what in that tests of compatibility for bugs may
come / When we have shuffled aroud this horrible mess of browser code / Must
give us pause.

~~~
Jem
It works in IE6 too.

------
sayrer
CSS is missing features.

<http://news.ycombinator.com/item?id=464428>

------
newt0311
Say... I decide to write a word processor in ASM (think... ultra fast etc...).
I manage to waste 3 months in the process and get _nothing_ useful. At the end
of this ordeal, should I

1) Blame ASM and use something more convenient like python, or

2) Blame my incompetence and soldier on?

Now replace ASM with CSS, python with tables, and word processor with complex
webpage.

