Hacker News Reader

> CSS is a complete utter crap that failed to solve the problems for which it exists.

Huh? Do you not remember/know what it was like to style webpages with FONT elements before CSS? CSS was a godsend. That was the separating content from presentation breakthrough.

The problem for which it existed wasn't layout. CSS1 (1996) didn't even have anything in it for layout.

>- About Tables: 15 years ago everybody switche to tabless layouts for the purpose of separating markup from presentation.

Using tables for layout was the original hack. Likewise using floats to avoid it was also a hack. Neither of those features were designed for those purposes. You can possibly blame the CSS standard for being incomplete, but you can't blame it for designers creating elaborate hacks out of it.

> A few years later we got access to the table display mode in CSS because, well, not a single one from the other solution worked well to build layout. Qo we got offered the option to emulate html tables in CSS.

You make it sound like table display was added after the failure of other layout methods. Not so - table display was there right from the beginning when CSS first added layout (CSS2 in 1998). It was IEs failure to implement it for nearly a decade that meant nobody was aware of or could use it for many years.

> Huh? Do you not remember/know what it was like to style webpages with FONT elements before CSS? CSS was a godsend. That was the separating content from presentation breakthrough.

Have you tried using FONT recently? (Or indeed, any time this decade?) When you're generating your pages programmatically it's really easy to separate content and presentation concerns in code but then combine them when finally rendering the page. You can use a normal programming language which is much clearer than CSS selectors. CSS was necessary in the days of hand-written HTML, but once you have a CMS you might as well use FONT and inline styles (possibly using CSS just with single classes, as a kind of "cache" to avoid repeating the same inline styling block everywhere).

What if you don't want to use a CMS?

Then just hand-code your layout logic

No thanks.

FONT is listed as "obsolete, non conforming, not to be used" in the HTML5 spec.

It couldn't do very much in terms of styling anyway.

I would rather keep styles in a reusable cachable resource than bloat out the HTML.

I would rather styling changes NOT turn into coding exercises, especially ones that cause a massive 'WTF?' for some future maintainer.

Seriously, you think programatically transforming a document into presentational html is simpler than using a css selector?

I already build up my HTML programmatically from reusable components, following DRY (Don't you?). That means the markup for what it means to be e.g. a paragraph heading is already in one place. It's no trouble to style it there, with a font tag, and if I want to change it then I can change it there. And if I want to abstract out a particular piece of styling and reuse it across several components, it's just code, I factor it out the same way I would anything else.

So yes, seriously, it's simpler than using a CSS selector.

>You make it sound like table display was added after the failure of other layout methods. Not so - table display was there right from the beginning when CSS first added layout (CSS2 in 1998).

Yes I mis-formuled it.

>It was IEs failure to implement it for nearly a decade that meant nobody was aware of or could use it for many years.

No it wasn't only IE, display table was also broken in Firefox and Opera. There were plenty of layout that you couldn't obtain in CSS but worked well with HTML tables.

> Using tables for layout was the original hack.

A simple and practical hack that worked (and continues to work) identically across all browsers without the need for elaborate edge case code.

I'm curious, with the new libraries, can CSS yet do:

<table width="90%" align="center"><tr valign="middle"><td width="20" valign="top">menu</td><td width="100">leftcol</td><td width="*">content</td></tr></table>

Ehm, yes?

Yeah, nah. Prove me wrong. I double dog dare you. Your answer must be cross and backwards compatible to count.

The display:table css properties are exactly equivalent to the display model of html tables. They were specified in CSS2 which became a recommendation in 1998, which is 17 years ago (!).

But due to the IE6 dominance and abandonment it took many years before this part of css was broadly supported by browsers, so developers had to either use html tables (even when not semantically appropriate) or use hacks like floats (which was not designed for this) to achieve a table-like layout. So the age of hack was due to browsers not supporting css, not to to deficiencies in css as such.

That said, html tables never displayed identically across browsers before css. There were lots of corner cases e.g. with the interaction of fixed and flexible columns. Which is not really surprising since the display model for tables were never specified in the first place before css.

> display:table

The delicious irony is that CSS had to emulate the old table model to overcome its default layout deficiencies. And IIRC it still can't natively handle mixing relative and fixed widths, and consistent vertical centering.

> html tables never displayed identically

My bread and butter used to be slicing photoshop comps into websites. My table layouts were pixel perfect on every browser without hacks. I do agree there were a few things that had to be accomodated using   and spacer gifs - but it was painless compared to elaborate and fragile CSS hacks.

I shouldn't still care about this stuff - I moved to IOS dev thank goodness - but I still nuture a burning hatred of CSS years later :)

There is no irony. CSS replicate the table layout model in order allow you to separate markup from presentation but still be able to show tables. Otherwise, how should the default style sheet for table-elements look? CSS obviously needed to to have at least the same presentational power as presentational HTML to be backwards compatible.

I think CSS is wonderful, but the real tragicomedy is Bootstrap and Foundation grids which have CSS classes and Divs that are just as much management and just as much code as tables yet are very arguably less functional. Reliable vertical centering anyone? Now can you do it without wierd hacks?

CSS is a complete utter crap that failed to solve the problems for which it exists

really? to me it seems to work very well. When I compare it to doing layouts in desktop apps such as winforms or WPF, CSS is amazing. I am no expert in it, but 99% of the time it more than meets my needs and I love how I can easily override other websites styles with something like stylebot. Seems like your experience is 100% opposite. What would be a good solution in place of CSS ?

Really?! I am yet to find anything like Grid and Relative layouts in CSS.

CSS is a complete utter crap that failed to solve the problems for which it exists. Today CSS is a broken tool that still can't easily be used to design even the most basic layout without requiring a ton of hacks.

I don't agree with this. CSS is a warty tool with a mixed background, but modern CSS is pretty effective and pleasant to use, especially when combined with a preprocessor.

A broken box model

The W3C box is counter-intuitive, but bear in mind that nobody really expected CSS to be used for layout at the point it was initially selected, so I doubt it was considered that important. And in any case, it's fixed now, with box-sizing supported by like 98% of browsers globally.

Centering things? You have to use hacks even for this simple purpose.

No you don't. There are well-documented, consistent ways to centre in CSS. Vertical entering used to be difficult (for obvious reasons), but now we've got flexbox which solves that problem entirely.

Building grids? Let's have fun and pick the one you prefer

These all do different things and have different characteristics – so you can pick the one that most suited.

Qo we got offered the option to emulate html tables in CSS.

Not quite – we got the ability to build visually-table-like things that use table layout rules, but separated them from the semantic implication of tables. That's a good thing.

They added CSS animations. What animations have to do with styling and layout?

Animations are just the time axis of layout. It makes much more sense to define them and the transitions between them declaratively using CSS.

Etc, etc, etc. CSS is just a complete mess.

In contrast, I find that CSS is mostly a bit of a scapegoat. Sure, it's taken a while to become a comprehensive layout and styling tool – but combined with something like SASS, I absolutely love writing CSS.

> No you don't. There are well-documented, consistent ways to centre in CSS. Vertical entering used to be difficult (for obvious reasons), but now we've got flexbox which solves that problem entirely.

So, what's the way to put something in the center?

and then you center things

Pick the one that you find the more "sane":

  /* method1: flexbox hack */
  .container {
    display: flex; /* opt into the new box model */ 
    justify-content: center; /* "align" */
    align-items: center; /* "valign" */
  }

  /* method2: table hack */
  .container {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }

  /* method3: translate hack */
  /* hack to fix bad rendering */
  .container {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  /* center me */
  .element {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

etc...

Just to add to your post, the reason that there are multiple ways to "center something" is because tables and flexboxes have different behaviors, especially for multiple children, and the third case of arbitrary translation, but all can be made to give the same visual effect here -- the specific case of aligning and valigning a single child to the center of the parent.

In my experience though, the flexbox model is the only example of DWIM in the majority of cases (the only surprise I've had was some situation with an overflowed child inside of a flexbox and requiring an explicit min-height: 0 [1]... something that seemed unintuitive, but modern browsers are beginning to support uniformly).

[1] https://code.google.com/p/chromium/issues/detail?id=506893

“Animations are just the time axis of layout.”

That was very well put.

You shouldn't need 3rd party server side code to manage and compile your front end style sheets though. I do like SASS as well, but the very fact that it needs to exist is testament to just how poorly designed CSS is for the modern web.

I'm sorry, you're just completely incorrect. I'm a <insert HTML/CSS/JS worker title here> and literally do this every day. The Box model issue is being fixed with flexbox; centering is getting there too, gridding is improving; CSS animations are ENTIRELY about style and not to do with JS, it's to state hey, anything style related should be CSSable, not required another language. CSS is evolving just like any other language. I'd suggest if you really think this about CSS, you're doing it wrong. CSS was painful for a long time, but still light years ahead of HTML styling. This is how tools evolve.

>I'm sorry, you're just completely incorrect. I'm a <insert HTML/CSS/JS worker title here> and literally do this every day.

That's cool. I'm too HTML/JS/CSS dev (among other) and I'm not "just completly wrong".

>The Box model issue is being fixed with flexbox;

It could have been fixed 15 years ago. And when it appeared it broke a ton of librairies developped during those years, like CSS grids and stuffs like jQueryUI which still has some incompatibilites.

It's no fun at all if you have to maintains some older projets are if you are building services for regions were IE 8/9/10 are still used. Even in Europs for some markets you still get about 8% of those 3 versions of IE.

> centering is getting there too, gridding is improving;

Getting there? After 15+ years? We are talking about "centering" and "grids"! And still not there yet. This is just crazy.

>CSS animations are ENTIRELY about style and not to do with JS, it's to state hey, anything style related should be CSSable, not required another language.

Just try something basic : animate an element along a sinusoidal path in CSS. Look at the code you get .

Then try the same in JS.

> CSS is evolving just like any other language. I'd suggest if you really think this about CSS, you're doing it wrong. CSS was painful for a long time, but still light years ahead of HTML styling. This is how tools evolve.

CSS was less painful a few years ago when they were less devices and web applications were simpler. Now with all the differents devices screen size, the need of advanced applications CSS just doesn't make it. Responsive layout using media-queries just adding broken hack on top of the Web stack.

> Getting there? After 15+ years? We are talking about "centering" and "grids"! And still not there yet. This is just crazy.

No, this is what happens when multiple competitors have to agree on a complex evolving standard. Result: they all drag their feet one way or the other, each release breaks all sorts of stuff, and so on.

That's because interoperability with competitors is NOBODY'S PRIORITY when all actors are well-established (the youngest browser engine is khtml/webkit, started in 1998; seen any new engine recently? Didn't think so.). In fact, the largest the market-share, the greater the incentive to add more incompatibilities in order to keep your lock-in as strong as possible.

So yeah, CSS can be maddening, and in many ways it's not entirely succeeded (you mention mobile, that was quite a failure), but it wasn't because of problems with the standard itself, or at least not entirely.

> It could have been fixed 15 years ago. And when it appeared it broke a ton of librairies developped during those years, like CSS grids and stuffs like jQueryUI which still has some incompatibilites.

And a hundred different problems with C could have been fixed any number of times, and that doesn't make it a bad tool.

> Getting there? After 15+ years?

I'm sorry, would you prefer it took 30? Is it not better that progress happens than not? The CSSWG is a glacial apparatus that create some of the worst bureaucratic bullshit I've ever seen, but CSS itself isn't a bad tool. Thanks to browser makers adding proprietary extensions they all agree on then shoving it down the throat of the WG helps a lot.

The pace of progress still doesn't mean it's a bad tool, or worse than what we had.

> Just try something basic : animate an element along a sinusoidal path in CSS. Look at the code you get . > Then try the same in JS.

Still doesn't prove CSS is somehow the worst thing ever and kill puppies.

Yes, programming for the web is hard. Programming is pretty much always hard, no matter how easy we make it because humans suck at long term planning. CSS is still leaps and bounds better than what we had, and makes a lot of things incredibly easy.

> And a hundred different problems with C could have been fixed any number of times, and that doesn't make it a bad tool.

CSS is just a presentation language, you can't compare it with C which is much much more. The problem with CSS is it's the only thing we have appart from HTML tables for building layouts but it didn't have the right functions to do so.

I reckon that it's getting better at some point but come one, it's been 19 years since the release of CSS 1 and we are just getting some tools really dedicated to building layouts.

> I'm sorry, would you prefer it took 30? Is it not better that progress happens than not?

What about 5 years? It should have been enough to have some bricks to build columns, centering, grids, etc.

> The CSSWG is a glacial apparatus that create some of the worst bureaucratic bullshit I've ever seen...

I couldn't agreee more.

> but CSS itself isn't a bad tool.

If you thing a bloated presentation layer that have to be hacked to death to build presentation isn't a bad tool... well...

> Yes, programming for the web is hard. Programming is pretty much always hard, no matter how easy we make it because humans suck at long term planning. CSS is still leaps and bounds better than what we had, and makes a lot of things incredibly easy.

I don't know what CSS have to do with the eventual difficulty of programming. Actually it's easier to build a layout framework programmatically with JS, using a restricted features set from CSS and fixing the bad parts in code than to use CSS alone.

> What animations have to do with styling and layout?

What don't they have to do with it? CSS is all about defining the way the site looks. Animations, and especially transitions between states, is the exact same thing. Animations are just layout plus time.

It works fine for documents, which were the original target.

It didn't work that well for applications or multi-element "content sites", but now with Flexbox it mostly does, and it continues to get better.

> Centering things? You have to use hacks even for this simple purpose.

To be fair, that was solved a while ago with flexbox, which now has next to universal adoption. If youre targeting a browser that doesn't support flexbox, you're going to have a lot of other hacks in place as well.

I use CSS quite a bit and I still barely grok the myriad interactions between display, position, and float and nested variations thereupon.

That's why I love Bootstrap.

I still can't believe you have to hack a

   margin: 0 auto;

to center stuff still...

Unless there's a new html element or css trick I'm unaware of? (like the `<center>` of old)?

Yeah they actually finally fixed this with flexbox.

It's not really a hack – it does make sense. Make left and right margin automatic so it would be balanced automatically.

There's flexbox, which allows vertical centering and other cool stuff.

`justify-content: center` when items are laid out on the x-axis, `align-items: center` when on y-axis

Jut to put you rant in context, the CSS color names were not decided by CSS, they were adopted from presentational HTML.

The initial stage of CSS was to provide an alternative to presentational HTML (font tags, bgcolor attribute etc.) by supporting at least the equal presentational power in a style sheet language. Since HTML already had color names, CSS also needed them in order to allow easy porting of style information from HTML to CSS.

This isn't really specific to CSS, the web is just a terrible place.