Hacker News Reader

Comment by rglullis | Hacker News Reader

> position of the HTML elements always did affect the layout and some designs were pretty much impossible to achieve without having to move HTML elements around

The results you see on CSS Zen Garden show that this is not true at all. It was hard, but not impossible then and nowadays grid layout and CSS3 fixed a lot of the issues.

View on HN

> It was hard, but not impossible

Oh great let me get right on that. Wait, no, I have far more important things to do with my time.

Like leaving snarky comments on here?

Have you deliberately ignored the rest of the sentence? CSS3 and display grid solved a lot of the issues. It is supported by any modern browser.

Leveraging grid layout makes for a complete separation of concerns and still keep semantic markup without any hacks that only add to the amount of work. Take just a couple of hours of your very important time to learn it, and you might see the payoff.

To achieve that tho you need a ton of superfluous non-semantic html wrapping everything in triple so that you have the flexibility to do what you need.

Again, not true. Take a look at the HTML from the Zen Garden page and you will see it is very semantic.

Also, just anecdotal: I am working on a Vue.js component which I want people to customize the styling however they want. This is forcing me to drop the CSS part of the components. I am not adding any cruft HTML and yet I did manage to get a "basic" theme and a good chunk of the "materialize" look already. Two themes, two separate SASS projects. It can be done.

The main (only?) way html affects style is containment - the hierarchical nature of it and the ability for components to be "inside" other components. I feel like I already bump into this issue quite often with something as basic as whether an <input> should be inside the <label> or next to it. The only way, I believe, to resolve containment issues is with absolute positioning (right?). Given enough time and change requests, every element will eventually have to become absolutely positioned, which would become a mess - do you agree with this and how do you handle it?

I am not a frontend specialist, but "display:grid" solved a lot of these issues for me. You can define even template areas and make things responsive with align-self, justify-self and related directives.

Reply on news.ycombinator.com