I’d go further. Declarative programming is deceptively hard. It only seems easier at first
CSS is hard no matter how good you are at it
21–30 of 83 posts
Re: CSS is hard no matter how good you are at it
#22The 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. Get rid of the inner flexbox, so the layout engine can see through to the text inside and use its baseline for alignment. Rely on the pill's parent for vertical alignment. I don't think I've ever come across a double-nested (or div) that couldn't be flattened out.
2. Give .pill `vertical-align: middle` so its baseline is not used for alignment at all--but then the other non-pill items will need `vertical-align: middle` too in order to line up.
The author went the opposite way as #1 and added dummy text inside the pill, but outside the flex. Since the text is not inside a block element, the layout engine can see it. It has the same font size as the outer text, so with `vertical-align: baseline` both baselines line up again.
Re: CSS is hard no matter how good you are at it
#23The fix in the article seems very strange to me. For something like a horizontal list of tags/labels, you would want to use flexbox. Using `display: inline-block` and the default text spacing creates an inconsistent layout.
Re: CSS is hard no matter how good you are at it
#24No, these days CSS is super easy.
It makes fairly complex things very easy. One does not have to be a graphics programmer or good at math to perform very powerful operations.
Re: CSS is hard no matter how good you are at it
#25Here's a quick fix: use `align-items: baseline` instead of center in your wrapper class
Re: CSS is hard no matter how good you are at it
#26No, this is terrible CSS. grid handles this perfectly.
Re: CSS is hard no matter how good you are at it
#27What worked for me is tailwind + making almost everything display:flex/grid.
Not a fan of tailwind but grid by default is indeed a good basis for a design system and solves this easily.
Re: CSS is hard no matter how good you are at it
#28https://www.w3.org/TR/css-flexbox-1/#flex-baselines
first/last main-axis baseline set
When the inline axis of the flex container matches its main axis, its baselines are determined as follows:
[...]
Otherwise, if the flex container has at least one flex item, the flex container’s first/last main-axis baseline set is generated from the alignment baseline of the startmost/endmost flex item. [...]
(for https://codepen.io/jsteel64/pen/rNrPYNQ) The first img sets the baseline for the .wrapper, which sets it for the pill, and then two pills are aligned according to their baselines.
And yes, anything that has to do with baselines is a source of pain and bugs, it sucks.
Re: CSS is hard no matter how good you are at it
#29What tactics do employ when a CSS issue has stumped you?
!important generally.
The retort is that you should rely on specificity, by way of selectors.
Good thing that we have the specificity checker, that makes sure that the semantics of your application of styles remain sound if you change the structure of the document in ways that could affect the selectors!
Oh wait, there's no such thing, bummer.
Re: CSS is hard no matter how good you are at it
#30EDIT See comment above, mostly related to vertical-align things, not flexbox. The author's point still stands: CSS is hard.
Smells like baseline / vertical alignment issues. The author hones in at the end,
Text
The flexbox [spec][1] talks about how flex items become "blockified," but I don't see anything that indicates empty children which demonstrate this weird behavior.