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

CSS is hard no matter how good you are at it

aha.io

Post reply on HN
Print view View original

61–70 of 83 posts

Re: CSS is hard no matter how good you are at it

#61

Post by nailer »

Update: done.

https://codepen.io/mikemaccana/pen/WNgWmdY

Please note I didn't bother extracting the icons out the design (it's 11PM and I should be in bed) so just used emojis.

Choices:

- Box model border-box (padding inside box, most CSS resets do this for you now)

- Grid by default because we don't need flexing.

- No margins, at all. Space between items and their parents are determined by padding, space between items and their siblings are determined by 'gap'.

- No issues with vertical centering because items are aligned for the middle.

- CSS borders on the right of each grid each cell for the lines. We'd need a lot less HTML/CSS if the lines were removed BTW since many of items inside the cell have their own borders, part of good design is knowing the costs of your designs.

- Took 36 mins.

Original: F*k it. Live coding. Come watch: https://codepen.io/mikemaccana/pen/WNgWmdY

Re: CSS is hard no matter how good you are at it

#62

Post by overthrow »

nightpool wrote: post #40
overthrow wrote: post #22

The problem is caused by vertical-align. The default value for vertical-align is `baseline`. The flexbox container inside pill2 "hides" the inner text, so pill2 is treated as having no text at all (for layout purposes). This is treated the same as a font having zero height. So the browser aligns a 16px font (or whatever) with a 0px font, and it comes out misaligned. My two solutions in order of preference would be: 1…

I want to thank both you and the original article author for bringing this issue up, because until this article and this comment I never really understood the use of the vertical-align CSS property. This is the perfect example to illustrate the actual use of this property. Playing around with the author's codepen and seeing how it changed when I added the vertical-align CSS property really unlocked something for me.

I'm glad I could help!

Re: CSS is hard no matter how good you are at it

#63

Post by nailer »

dimal wrote: post #37
nailer wrote: post #27

Earlier quoted context omitted.

Not a fan of tailwind but grid by default is indeed a good basis for a design system and solves this easily.

Grid isn't a good solution for this particular problem because the layout depends on the intrinsic size of the content. Grid is good for when you want the container to define the layout and have the content flow into it. Flex is good for when you want the layout to adapt to the content, like in this case.

Flex is good when you need flexing. A single row grid, with variable width cells is simpler.

See elsewhere in the thread where I solved this and / or submit a fork your own version using flex.

Re: CSS is hard no matter how good you are at it

#64

Post by legitster »

> I work with a team that has accumulated a lot of CSS experience. Generally I don't think there is anything they cannot handle. So I jumped on a couple calls to work through the issue. They were just as confused as I was. The page in question had a lot of moving parts.

Not to say CSS isn't hard, but they encountered a pretty basic problem in CSS. I'm baffled that it took them multiple meetings to come to such a janky fix. Why they couldn't just open up DevTools and troubleshoot it?

In my experience, front-end engineering has gotten so easy the last few years that there's now a whole generation of quite adept programmers that also manage to have very limited understanding of basic webdev concepts. I can't tell you how many times I have been told "we don't need a CSS framework - we're using React!" only to be dragged into a meeting to explain to how to clear floats.

All this to say, if you are doing any amount of front-end engineering, it probably pays to have some old-timer who remembers how to build webapps before flexbox was a thing.

Re: CSS is hard no matter how good you are at it

#65

Post by epgui »

PaulHoule wrote: post #54
epgui wrote: post #39

Earlier quoted context omitted.

What you need is a system that implements some Grammar of Graphics (Leland Wilkinson, 2000; sometimes abbreviated "GoG" or "GG"), like ggplot2, vega, or something like that. Although I'm a bit weary of systems that have "their own version" of Wilkinson's GoG but that don't necessarily have the same rigorous correctness proofs. D3 is awesome but not trivial: I consider it a more low-level tool than any GoG.

no fan of ggplot2, one of the few ‘higher level’ libs i do like is seaborne as it has some actual wisdom baked in. i think one d3.js succeeds so well because it treats scales as functions, which is what they really are. as such it gives you the tools to implement ‘grammar of graphics’. Also it is giving you full control of the attributes of svg and other objects and puts them at the service of the GoG viewpoint as op…

Yeah, even though GoG was designed and is usually (or always? is there a counter-example?) implemented with the OOP paradigm, I've always found that its principles were better abstracted with functions and combinators. It's a product of its time.

I believe the original GoG theory/specification does not suffer from the same impoverishment and flaws, it having been formally proven and all... But the same cannot be said of any particular implementation "merely inspired by it". I would very much like to implement it in a pure FP language like haskell (and/or perhaps even proven correct with Coq) some day, that would be fun.

Myself, I think ggplot2 is one of the more solid and least-crippled implementations. Unfortunately, my distaste for the R language is such that I hope I never have to use it again.

Re: CSS is hard no matter how good you are at it

#66

Post by dimal »

nailer wrote: post #63
dimal wrote: post #37

Earlier quoted context omitted.

Grid isn't a good solution for this particular problem because the layout depends on the intrinsic size of the content. Grid is good for when you want the container to define the layout and have the content flow into it. Flex is good for when you want the layout to adapt to the content, like in this case.

Flex is good when you need flexing. A single row grid, with variable width cells is simpler. See elsewhere in the thread where I solved this and / or submit a fork your own version using flex.

Here's a fork.

https://codepen.io/mrdanimal/pen/VwGNOQw?editors=0100

As far as I could tell there was no visual change. It's not drastically different, but once you make everything flex, it's possible to remove a few of the grid properties.

Re: CSS is hard no matter how good you are at it

#67

Post by nailer »

dimal wrote: post #66
nailer wrote: post #63

Earlier quoted context omitted.

Flex is good when you need flexing. A single row grid, with variable width cells is simpler. See elsewhere in the thread where I solved this and / or submit a fork your own version using flex.

Here's a fork. https://codepen.io/mrdanimal/pen/VwGNOQw?editors=0100 As far as I could tell there was no visual change. It's not drastically different, but once you make everything flex, it's possible to remove a few of the grid properties.

(Off topic: can you please remove my name from your fork? Thanks)

Re: CSS is hard no matter how good you are at it

#68

Post by dimal »

nailer wrote: post #67
dimal wrote: post #66

Earlier quoted context omitted.

Here's a fork. https://codepen.io/mrdanimal/pen/VwGNOQw?editors=0100 As far as I could tell there was no visual change. It's not drastically different, but once you make everything flex, it's possible to remove a few of the grid properties.

(Off topic: can you please remove my name from your fork? Thanks)

Sure. I’m AFK but I’ll get it in a little while.

Re: CSS is hard no matter how good you are at it

#69

Post by paulddraper »

crispyambulance wrote: post #47

I have NEVER been able to understand why it took so long for css to get to grid. 2d layout was something that was “solved” by desktop application layout mechanisms like 25+ years ago. One would have thought given all the attention paid to web apps at the dawn of “web 2.0” that this problem would have been licked fast, but no, instead we had 15 years of floundering with floats and the proliferation of turgid framework…

What language/tech should CSS have looked to?

Re: CSS is hard no matter how good you are at it

#70

Post by yakshaving_jgt »

legitster wrote: post #64

> I work with a team that has accumulated a lot of CSS experience. Generally I don't think there is anything they cannot handle. So I jumped on a couple calls to work through the issue. They were just as confused as I was. The page in question had a lot of moving parts. Not to say CSS isn't hard, but they encountered a pretty basic problem in CSS. I'm baffled that it took them multiple meetings to come to such a jank…

Ouch. I just realised I am old.
Post reply on HN