Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS is unnecessary given a layout language

pchiusano.github.io

Post reply on HN
Print view View original

71–80 of 183 posts

Re: CSS is unnecessary given a layout language

#71

Post by yawaramin »

ender7 wrote: post #51

Graphical layout is one of the most underestimated challenges in computer science. Programmers instinctively look at the problem and thing "oh, this is logical, I'll just whip up some basic principles and layout primitives and I'll have this solved in no time!" No, you won't. Designing a layout framework is really, really hard. Designing one that is simultaneously expressive enough to handle all of the crazy corner c…

1. Someone _has_ come up with the One True Layout System. It's just that most people like to pretend TeX doesn't exist or, when they grok the box-and-glue layout model, try to reinvent it from scratch.

Re: CSS is unnecessary given a layout language

#72

Post by Everlag »

yawaramin wrote: post #71
ender7 wrote: post #51

Graphical layout is one of the most underestimated challenges in computer science. Programmers instinctively look at the problem and thing "oh, this is logical, I'll just whip up some basic principles and layout primitives and I'll have this solved in no time!" No, you won't. Designing a layout framework is really, really hard. Designing one that is simultaneously expressive enough to handle all of the crazy corner c…

1. Someone _has_ come up with the One True Layout System. It's just that most people like to pretend TeX doesn't exist or, when they grok the box-and-glue layout model, try to reinvent it from scratch.

Someone yell at me if I'm wrong, but isn't TeX designed for paged content?

That means while TeX might work amazingly for paginated content, single page apps, or really any non-paginated content, is very much a screwdriver where a hammer should be used scenario.

Re: CSS is unnecessary given a layout language

#73

Post by haberman »

ender7 wrote: post #51

Graphical layout is one of the most underestimated challenges in computer science. Programmers instinctively look at the problem and thing "oh, this is logical, I'll just whip up some basic principles and layout primitives and I'll have this solved in no time!" No, you won't. Designing a layout framework is really, really hard. Designing one that is simultaneously expressive enough to handle all of the crazy corner c…

> We finally shove bytecode-level runtimes into a browser and let a thousand flowers bloom

asm.js and PNaCl are here today. What more are you expecting?

Re: CSS is unnecessary given a layout language

#74

Post by grey-area »

CSS is broken.

I've just been watching a colleague learning HTML/CSS for the first time. HTML was easy and she has a very good handle on that, producing some nice HTML5 markup by hand very quickly. CSS has been a nightmare - mostly not because of selectors or values (that comes later), but because of basic layout issues caused by the nasty hacky layout model of CSS - in particular the concepts of floats, block and inline and unpredictable element sizes due to the box model.

But I disagree that CSS should thus become a general purpose programming language - the separation of concerns in HTML into content/style/controller is very useful and would be terrible to throw away, just because our current styling language is so lacking.

The problem with CSS is layout - properties, selectors and values could do with some work of course, but they're mostly passable if a bit underpowered. Layout is insane and it's down to assumptions made at the creation of CSS - a very simplistic doc model assuming some basic structure of heads, text and a few pics flowing in a linear fashion down a page - like a technical paper or simple book layout. Flexbox looks equally unintuitive if a bit more powerful.

It is a hard problem, but there has to be a better way than the current agglomeration of hacks upon hacks - something akin to the HTML5 movement for styling - remove or deprecate most of the overcomplex spec and refine what is actually in use. Grids are key here - they've been used in graphic design for centuries, and they are a fundamental part of organising information which is entirely missing from the CSS spec and should be the basis of layout, not an afterthought.

Re: CSS is unnecessary given a layout language

#75

Post by owenversteeg »

_pmf_ wrote: post #69
owenversteeg wrote: post #66

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 10…

> Firstly, I find it hilarious that when I opened this blog post dissing CSS the author's 'responsive' design was completely and utterly fucked. That kind of proves his point, though. If the foundational layout language for the web requires more than basic effort to create a responsive design, something with it is fundamentally rotten to the core.

> If the foundational layout language for the web requires more than basic effort to create a responsive design, something with it is fundamentally rotten to the core.

CSS is a language. Like Haskell, C++, or Ruby, if you only put "basic effort" into learning it when you try to write some it will be absolute shit.

Re: CSS is unnecessary given a layout language

#76

Post by bennettfeely »

lobster_johnson wrote: post #64
wavefunction wrote: post #38

I like Mr. Victor a lot but I'm not sure I agree. I think the way CSS is implemented either doesn't jive with the paradigms many programmers use to approach problems or perhaps it is just laziness? I meet a lot of programmers who are generally pretty smart and capable completely throw up their hands when it comes to laying out HTML via CSS. It's just rectangles being displayed on rectangles. It's nothing complex like…

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…

1. Flexbox, through the align-items property.

2. Flexbox, setting flex: 1; to the boxes. Can be done vertically or horizontally.

3. Flexbox, setting flex: 1; to boxes. Setting a min-width to a flex-item takes precedence so it will be honored.

4. You got me. I remember hearing talk about an aspect-ratio property. I'm not sure if the object-fit/object-position properties get the job done. The hacks will have to continue for now.

5. left: -50%; and margin-left: 25%; will work. See: http://codepen.io/bennettfeely/pen/LktDi

6. width: content-width;? I don't know how the browser support is there, however. It may be possible.

7. Same width as what element? The parent? Set position: relative; to the parent and top: 0; right: 0; to the child.

8. That seems like a real edge case and maybe a bug. I'm not sure.

I hope that I got at least a few of those right but CSS and browsers are consistently getting faster and more powerful and the answer to tricky layouts is increasingly not "just use JS". Flexbox is now supported by all the browsers and solves a whole lot of layout problems that designers/developers have wrestled with.

Re: CSS is unnecessary given a layout language

#77

Post by vidarh »

AdrianRossouw wrote: post #13

That's basically what I consider [1] famo.us to be. Instead of using css for the layout/positioning, just use javascript directly. and then build a [2] proper scene graph in javascript. [1] - http://famo.us/ [2] - http://adnanwahab.com/Render-Tree-Visualization/

Not seen famo.us before... Pretty much none of the demos work properly on my phone with the stock Android browser and 4.3.. And the amount of flickering in the browser even on my laptop was annoying. Looks to me like they have a long way to go.

Re: CSS is unnecessary given a layout language

#78

Post by vidarh »

jasonlfunk wrote: post #50
dustingetz wrote: post #4

So what does it look like to define a layout in elm?

This is what he is saying is better than CSS? I don't think so. http://elm-lang.org/edit/examples/Intermediate/Form.elm

Yikes. Gives me a whole new appreciation for our current stack.

Re: CSS is unnecessary given a layout language

#79

Post by reillyse »

ChrisGaudreau wrote: post #6

I actually like CSS as it is now, and it's getting better ( cough , flexbox). Am I the only one who finds CSS incredibly hard to master, though? I've been writing CSS for years and I still feel like a newbie sometimes, and feel like I'm just tinkering with random attributes until it looks right.

agreed. I've been coding for 20+ years now (shit I feel old), 15 or so years of them with HTML and friends and I still throw my hands up in the air every so often when trying to deal with something as simple as getting stuff to show in the right place on a web page. CSS really is hard to master.

Part of that could just be me. I don't really care how it works, I just figure out the smallest amount possible to get what I'm doing to work and leave it at that. Maybe it's the fact that there are many ways to do very similar things, e.g. I can access an element by id or class or another attribute and so I just really need to find one that works and move on to other more "important" parts of the app.

Re: CSS is unnecessary given a layout language

#80

Post by buovjaga »

grey-area wrote: post #74

CSS is broken. I've just been watching a colleague learning HTML/CSS for the first time. HTML was easy and she has a very good handle on that, producing some nice HTML5 markup by hand very quickly. CSS has been a nightmare - mostly not because of selectors or values (that comes later), but because of basic layout issues caused by the nasty hacky layout model of CSS - in particular the concepts of floats, block and in…

In addition to Flexbox, there is the CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/

There's a polyfill for it, following the 2012 version used by IE10: https://github.com/codler/Grid-Layout-Polyfill

Post reply on HN