CSS is unnecessary given a layout language

There are some things a designer will throw at you that are very very difficult to achieve in CSS in any regular way (sans non-cross-browser-compatible hacks). But for the most part, CSS isn't too bad.

It's not that it's difficult, really, but the tools are incredibly underpowered. For example:

* How do you vertically center an arbitrary element inside another where you don't know the height of any of them? Answer: The only reliable way is via "display: table-cell". It has several annoying limitations.

* How do you ensure that several horizontally adjacent boxes fill the width of the container and are all of equal height, regardless of their contents? Answer: Table again, but it's not always possible without JS because of how height percentages are calculated. (Also, all browsers including Chrome implement "height: 100%" differently.)

* How, given N elements arranged horizontally next to each other, do you ensure that they (1) fill the width of the container, (2) if they become too narrow (ie. min-width), any element(s) that don't fit will wrap below? (Note: Rule #1 must apply; when one element doesn't fit, the preceding "line" must expand to fit the full width of the container.) Answer: Not possible in CSS alone.

* How do you ensure that an element (eg., an image) of arbitrary width is always has the same height as it's width? (For example, imagine a grid which should expand to fit the window, and all cells should be quadratic.) Answer: With images, possible with an unintuitive "height: 0; padding-bottom: 100%" hack, not for other elements without JS.

* How do you center an absolutely positioned element of arbitrary width and height (think tooltip or speech balloon)? Answer: JS.

* How do absolutely position an element without specifying a width, so that the width becomes the minimum needed to display all of its contents up to a max-width? For example, a box saying "Hello" should take up the space required by that word and no more. Answer: Not possible in CSS alone, although you would have thought that "display: inline-block" would work. Firefox actually does it, Chrome/WebKit don't.

* How do you have an absolute element be the same width as another element? For example, a drop down menu should be at least the width of its menu item, and an autocomplete box should at least be the width of its input box. Answer: JS.

* How do ensure a label is vertically centered on the same text baseline as an adjacent textarea? Answer: Textareas are considered blocks, not text, so you cannot without computing the baseline and using padding or negative margins, and that is imprecise.

These are just a few basic real-world layout challenges. They should not be challenges, they should be simple to implement, but CSS doesn't help; it gets in the way more than it aids. In some cases, inconsistent browser implementations result in wildly different rendering. The result is JavaScript to fill the holes, and sometimes just to say "screw this, I will do in code".

TL;DR Neither this blog post, the Elm website or Elm's example sites have a good example of something laid out well with Elm (all break horribly badly when resized.) Also, If people actually learned CSS, they would have a much easier time.

Firstly, I find it hilarious that when I opened this blog post dissing CSS the author's 'responsive' design was completely and utterly fucked. I opened the page at 50% width and 100% height on a laptop, and I was confronted with a bunch of unrelated text taking up literally the entire fold. By resizing my browser I found out that the hideous thing taking up my entire browser window was what would be the sidebar if I expanded my browser further. I then go to the Elm website and am presented with a site that's not responsive at all, and I take a look at some "example sites" built with Elm and I get this[0] site, which breaks in a ridiculous fashion when resized. Hell, if you're designing a layout language and you can't even point to one example where it works I'll really start to question it.

Secondly, I think that the vast majority of 'problems' people have with CSS would be solved if people just learnt it as they would a programming language. All the time I hear "CSS is so frustrating!" from people that write code in other languages just fine but don't know CSS. Well, just learn it! Most people don't care about learning CSS, and only copy-and-paste from Stack Overflow. You wouldn't copy-and-paste every single line of code from Stack Overflow for your C++ application, so why do you do it with CSS? I actually took the time to learn CSS a while ago, and it's been much easier to write it since. I have only had one problem in the past few years with CSS specifically: vertical centering and browser inconsistencies. I'd say having only two major problems for a language that's been designed around browser politics is excellent.

[0] http://library.elm-lang.org/

I've yet to run into those, but then again I am my company's primary designer, as well as implementing whatever I design. Perhaps as a product of that, I don't end up having to code up (m)any ridiculous designs.

Because the ui of a website or program is not just an interface, it's also (and quite often primarily) presentation. Visual presentation is a justifiably complex field with a rich history that has taught us that how you present information is often just as important as the information itself. All those colors, animations, etc are an integral part of expressing authorial intent that goes far beyond simple branding.

Arguing that computer ux should solely be driven by the needs of interface without concern for presentation is like arguing that all print media should look like unillustrated pages from a research paper.