Don't Blame CSS For Your Incompetence

http://www.jemjabella.co.uk/blog/dont-blame-css-for-your-incompetence

by Jem • 17 years ago

54 64 17 years ago

jemjabella.co.uk

Jem22• 17 years ago

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

gojomo• 17 years ago

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.

Jem22• 17 years ago

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.)

Jem22• 17 years ago

I threw in an override stylesheet with larger text and more contrast; append ?useoverride to any of my URLs if you need to use it.

pg2• 17 years ago

If you give me a new title that's closer to what's intended, I'll change the title of the link.

Jem22• 17 years ago

Given that the point of the entry is to show off the position independent examples rather than insult any one individual's abilities, something like "Order-Independent CSS Layout Examples" would probably be more appropriate.

I assume I could change it myself (the edit link is there)...

tlrobinson• 17 years ago

"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)

Jem22• 17 years ago

I'm working on an unfamiliar system, with unfamiliar tools, and doing several things at once - all whilst dribbling snot over my keyboard - but I'll be sure to narrow it down to 10 mins next time. :)

KrisJordan2• 17 years ago

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.

Jem22• 17 years ago

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-out-o...

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!

slig• 17 years ago

"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"

Not to mention the fact that he only tested in FF. The real nightmare starts when you have to make it look good on IE too.

Jem22• 17 years ago

Did you test it in IE before you made that comment?

I ask because I'm now at work, and have access to a windows box with IE6 installed. Lo and behold, my examples work EXACTLY the same as they did in FF3.

No nightmares involved. :)

henryl2• 17 years ago

Not to mention, the "in order" example he gave doesn't scale with the width of the browser and only works for fixed width.

There is only one way in CSS (without js) to do a layout where there are two fixed width side bars on either side and one center content area that grows/shrinks with the width of the browser window and that is the "out of order" way (two floats, one non-floating div with margin-left, margin-right equal to left,right sidebars' widths), which coincidentally, he also screws up via the use of relative positioning and 3 floats.

Jem22• 17 years ago

It's "she", if you don't mind; and nobody asked for a fluid layout. You're trying to point out flaws in an example designed to prove a totally different point.

brentb• 17 years ago

I also think it's funny that the simple 3-column example that took you 30 minutes to put together has exactly the same shortcomings that are discussed in the original article (for instance, try setting the background color of one of the sidebars or swapping their order in the markup without changing the CSS).

It's true that you can order the markup however you want and write the CSS to make it look right, but the key point is recognizing that (unless you position everything absolutely) there is still no true separation between the markup and the CSS (at least where layout is concerned). If they were truly independent, then it wouldn't matter what order the elements appeared in the markup... the CSS would lead them to render the same way on the screen every time.

It's worth pointing out that there is true independence between the markup and CSS where styling is concerned (and this is where CSS shines). If you style the background, font, opacity, whatever of a particular element and then move that element to a different location within the markup, the element will still look exactly the same (unless the new position in the DOM subjects it to other CSS rules that override the old ones).

I'm rambling a bit here, but all I'm really trying to say is that CSS has its place in the web development toolbox, but old-school tables often have the edge when looking for a layout that just works.

trapper• 17 years ago

Please everyone read the second paragraph of brents insightful comment.

Another place where tables have the edge: when a new browser version comes out, css layouts are often broken, especially if they rely on hacks.

arockwell• 17 years ago

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.

Jem22• 17 years ago

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• 17 years ago

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? ;)

KrisJordan2• 17 years ago

You're actually proving the point those articles are agreeing on. Your CSS changed to make that possible. The point is when you change the ordering of DIVs your CSS often also has to change. So they are not as loosely coupled as one would hope a Model-View relationship might be.

mixmax• 17 years ago

Apparently it's CSS day on HN.

eli2• 17 years ago

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.

ibsulon• 17 years ago

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.

Jem22• 17 years ago

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.

eli2• 17 years ago

The thing I think a lot of people are missing is that I don't care whose fault it is.

As a designer, I just need my sites to work in the real world (where 1/3 of my traffic is IE6). I'm not placing any blame, but if it doesn't work in IE6 then it doesn't work for me.

axod2• 17 years ago

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

sam_in_nyc2• 17 years ago

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• 17 years ago

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_nyc2• 17 years ago

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 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 and .

discojesus7• 17 years ago

> 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_in6• 17 years ago

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

Jem22• 17 years ago

Her.

discojesus7• 17 years ago

> 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.

sayrer• 17 years ago

CSS is missing features.

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

newt0311• 17 years ago

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.

fhars• 17 years ago

(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.

Jem22• 17 years ago

It works in IE6 too.

Don't Blame CSS For Your Incompetence

Related Stories