Hacker News Reader

Comment by ergothus | Hacker News Reader

Has ui improved? Yes. But is ui a good experience? No.

Simple tasks like centering or multiple equal height columns are now possible (yay!) but aren't actually simple.

A large majority of css techniques are trying to get around how css tries to work.

Flexbox is great compared to what came before...but have you tried teaching it to someone new? Zindex and stack context? Style a container based on what it contains?

Compared to the improvements in js, and compared to the ease of use of non web ui building, there is a lot of room for progress.

View on HN

CSS has poor defaults, but you can't break backwards compatibility on the web. Check out this gist [0], which sets far more sensible defaults for flexbox. I took it from css-layout, which was later renamed to yoga [1]. Everyone I've convinced to try it out has told me that they found it much more intuitive. It makes things work the way you'd expect them to!

I'd be genuinely interested in hearing about your experiences with other layout and styling languages or tools, and what you like about them. I used to hate on CSS a lot, but eventually changed my view and grew to like it, and I think given its history it's actually quite good. I haven't had much in-depth experience with native alternatives, but when I've tried em out I usually found they each have their own shortcomings. For example, on macOS I'd say Auto Layout is certainly easier when getting started, but as soon as you want to create your own components from scratch it becomes rather challenging.

As for styling a container based on what it contains, if you know of any examples which showcase good execution of this idea I'd also love to check em out. I know of at least two proposals / libraries which are attempts at tackling that problem in CSS; take a look at CSS-Element-Queries [2] and EQCSS [3].

[0] https://gist.github.com/cesarandreu/3e87cb6993bedeb162b56482...

[1] https://github.com/facebook/yoga

[2] http://marcj.github.io/css-element-queries/

[3] https://elementqueries.com/

> CSS has poor defaults, but you can't break backwards compatibility on the web.

That is why we should create something new that does not have this legacy baggage: The W3C tried this with XHTML 2.0

> https://en.wikipedia.org/w/index.php?title=XHTML&oldid=83709...

and it seems to have been much more elegant than HTML5:

> http://www.informit.com/articles/article.aspx?p=1994793

> https://web.archive.org/web/20100611220044/http://immike.net...

Gods I miss the dream of the semantic web. I can’t seem to convey why it’s ideals are important to the younger generation. They seemingly just want to build proprietary apps to make money. I wanted to build data sources to help the world.

The death of semantic CSS still stings. I simply cannot stand the current state of just appending classes that don’t describe the data to style. It’s barely an improvement over using style attributes. The HTML should ideally have zero consideration for how it will look on the page and just describe the data within; admittedly that became something of CSSs failing though I believe a lot of that can be resolved with preprocessors to allow easier reuse.

I want to say, as a guy who is not much of a web developer but is trying to make a web site, css is f'ing frustrating.

For example I found a CSS-only stylized dropdown list, which is great. Why should I have to use Javascript to stylize a dropdown list?

Anyway I take the component and css from codepen and put it in my site and it doesnt work, at all. Works perfectly on codepen, doesn't work on my site. As far as I can tell there really isn't a way of figuring out _why_ it isn't working either. There aren't any errors or anything, no real means of debugging it. I'm basically going through line-by-line the computed CSS for all the different parts and trying to see what's different and why that is impacting the look of the thing. Very frustrating.

Have you had more positive experiences with any native alternative? My experience with em has generally been that they work well until you want to customize things.

I think people tend to seriously underestimate the complexity involved in dealing with layout and styles. CSS has some poor defaults and plenty of quirks, but it's also incredibly powerful and not that difficult if you bother taking the time to learn it properly. You are struggling because you have not learned to use the tool correctly.

Try implementing a few basic layout algorithms as a weekend project. I believe it'll change your view of CSS.

So true. I looked at implementing some layout algorithms in PDF pages for a project I was working on; eventually realized I should just use the standard elements in the library I was using and forget about anything custom because otherwise I'd be making a separate product...

The worst part is trying to figure out which CSS property takes precedent and why that well is grey instead of white when you clearly said you wanted it to be white. But it’s inheriting it’s color from a parent div... somewhere.

The CSS inspector in most browsers these days has a "computed" section which lists every property and where it comes from, in order of precedence.

I think any language or technology you're not familiar with is frustrating and difficult to use.

Not trying to say that CSS is the best it can be, but I see lots of developers think that CSS isn't 'real programming' or think they can just float (heh) in and out of CSS development, not spend the effort on understanding it.

Centering is just `display:flex;align-items:center;justify-content:center;` on the parent. Equal height columns is just `display:flex;` on the parent. How is that not simple?

It even works if you just say `margin:auto` on the flex child

Only if it's a block or inline-block child though, right?

No, margin auto will center the child regardless of display property so long as the parent is a flexbox.

"Here's the 'display' property. It controls how the element is treated for flow. Or it decides how to change how the children are centered, when it's 'flex'. BTW, display:flex is totally unrelated to all other forms of flow control. We have multiple ways to center content, and vertical centering vs horizontal centering are not the same."

It's not impossibly complex, or even highly complex, but compared to any non-CSS layout, it's not simple. Only if you compare it to previous CSS layouts is it "simple".

>Flexbox is great compared to what came before...but have you tried teaching it to someone new

Yes, and it's way easier than trying to explain floating and clearing to someone who doesn't know the box model. Compared to what came before, it actually makes logical sense.

> Yes, and it's way easier than trying to explain floating and clearing to someone who doesn't know the box model.

That’s as hard as explaining arithmetic to someone who can’t read the numbers. The solution is the same: teach that first. The box model is not really complicated.

That's my point though: Being way better and logical than what came before is NOT the same as being a good solution. The Article here is talking about how the UI experience is lagging behind the coding improvements. The poster a few posts above pointed out that CSS has indeed made progress. And my argument is that both statements can be true: CSS is much improved, but still sucks.

What’s not simple?

CSS has spectacularly bad ergonomics and cognitive issues; for app development, it's particularly apparent with styles all over the place and having far-distance effects, and in any case a giant "impedance mismatch" to what you're doing in the main parts of your code. It might not be so obvious if you're working daily on CSS, but for casual use or use within a team with rotating roles it's really bad.

It also doesn't help that CSS's basic premise is flawed, and the fake narrative behind CSS's origin and role is insulting to any thinking person: that instead of typed markup attributes for some reason it's better to use an ever-growing bunch of ad-hoc micro syntax with poor checking and typing, and then postulating an arbitrary "semantic HTML" ideal after-the-fact. HTML is as syntactic as it gets; as it should, it being a standard in information presentation.

CSS is also incredibly bloated.

CSS has a serious issue with Stockholm syndrome (saying this as someone who also fell victim to it): once you "get" CSS and its many, many quirks, you're prone to dick-around with your CSS knowledge as a trophy to those who don't have the time and inclination to dabble around with it. In any case, CSS is seriously out of whack with the simplicity of HTML.

I was going to disagree but...

> It also doesn't help that CSS's basic premise is flawed, and the fake narrative behind CSS's origin and role is insulting to any thinking person: that instead of typed markup attributes for some reason it's better to use an ever-growing bunch of ad-hoc micro syntax with poor checking and typing, and then postulating an arbitrary "semantic HTML" ideal after-the-fact. HTML is as syntactic as it gets; as it should, it being a standard in information presentation.

On reflection I agree. I understand this approach when it's only document styling (here's a ruleset for h1, h2 etc kept separate from the HTML) but as soon as you start adding (multiple) classes... well yeah.

I fell into the yawning crevice that's semantic CSS, where "These class names give the HTML meaning". That and semantic HTML zealotry took up too much of my teenage years when I could've been making stuff, and have left me suspicious of any tech idea proclaimed with religious overtones.

Yes, and the ideal of "semantic HTML" might even point at a deep misunderstanding of what's required for a content-delivery standard. Consider how the MP3 standards were created: by specifying a decoder from bits and bytes to sound, so that we can have devices that "play" content many years from now. WHATWG's "Living Standard" thing and the ongoing sugaring of JavaScript syntax and other added complexity is completely antithetical to this.

> have left me suspicious of any tech idea proclaimed with religious overtones

If for nothing else, that's a valuable lesson learned in it's own right :)

CSS clicked with me right away. As for semantic CSS (not really css, class names are HTML) it made sense, especially when I sawy .green10px being neither green nor 10px.

Reply on news.ycombinator.com