10 ms·

CSS is hard no matter how good you are at it

95 points by SteelWo1f 4y ago

FigurativeVoid 4y ago
Based on some of the comments here, it seems like the browser 'defaults' for styles are not what you would intuit. This is something I run into with flexbox. The tool is great, but the default mode is almost never what I want.
SteelWo1f 4y ago
What tactics do employ when a CSS issue has stumped you?
- burnte 4y ago
  !important generally.
  - forgetfulness 4y ago
    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.
- nicoburns 4y ago
  `position: relative`, `overflow: hidden`, `height: 100%`, `line-height: 1` and `margin: 0` solve a surprising percentage of CSS issues in my experience.
sharemywin 4y ago
I always thought there should be some kind of visual effects database. I'm looking to do X with Y tool. here are all the things it could be called in other tools. and/or layman terms.
- PaulHoule 4y ago
  The problem this article is pointing out is that you could have that database and still struggle. It is easy to make a database of effects that work in isolation, for that matter GPT-4 will do a great job writing CSS to make isolated visual effects. It’s when you need to put those visual effects to work inside of a real application or web site that you find it doesn’t work or rather almost works because of very fine details in how HTML and CSS work. Often you find you can move something forcibly a few pixels this way or that way but what works for the personal web site will be a nightmare for a complicated application that has multiple parts that multiple people are working on because you’ll need more hacks to deal with the consequences of those hacks. It is real, global, and comprehensive understanding we need, not just another cheat sheet.
WheelsAtLarge 4y ago
It's always been a time sink for me. Besides using frameworks, does anyone have any suggestions on how to develop a css file without getting into the neverending hacks that require hacks to fix the hacks? I have yet to see a long term css file that's not a birds nest of fixes.
- RobertRoberts 4y ago
  Are you building sites or apps? I got to the point a long time ago where I just didn't care to cover every single design need and just made my own mini-framework.
- migf 4y ago
  Tailwind * tries * to resolve this, but is probably just a different bird's nest.
  - PaulHoule 4y ago
    Frameworks are going from the frying pan to the fire. There are numerous React frameworks that supply a "widget set" either of web page elements, UI controls or both that work out of the box. If you (your client, your employer, ...) like the way these look out of the box they are a great way to build something quickly and not have to understand the underlying CSS. If you are required to customize the look, however, or you want to combine components from various sources and have them look consistent you have to understand all the concepts of the frameworks, the frameworks the frameworks depend on and CSS.
  - vehemenz 4y ago
    Tailwind is a bird's nest in one place instead of a bird's nest in two places with hidden abstractions.
  - k1w1 4y ago
    The problem with Tailwind is that it is write-once code. You don't get any leverage. Ideally as you write more code you get more reuse and writing future code becomes faster. In theory CSS classes act like this too. As you have more (well designed) CSS classes then writing future CSS becomes easier because you can reuse the past work. Tailwind breaks this benefit that by encouraging you to write your CSS with glorified styles.
Fauntleroy 4y ago
For what it's worth, this is a relatively easy problem to solve with flexbox these days. My advice for those who constantly complain about CSS: give it the respect you give things like programming languages or SQL. You're not just understanding a text file, you're understanding the way browsers interpret and render styles. You probably need an expert to "just do what you want to do", and if you don't have an expert available you'll need to make do. Just like anything other sufficiently complex development problem.
- PaulHoule 4y ago
  Flexbox is way better than what there was before, I'll grant that. Grid too.
brigadier132 4y ago
I've never had much trouble with CSS but I also just never try to use the cascading aspect of it outside of fonts. I just write either CSS directly onto components I'm using or I just use tailwind.
- Kiro 4y ago
  Not sure why you are getting downvote. I absolutely agree - avoid the C in CSS and your life will be much better.
  - SteelWo1f 4y ago
    Definitely. I love using BEM when you have to nest things. If you stick to strict BEM, you will generally avoid having nesting more than 1 or 2 levels deep.
sourcecodeplz 4y ago
The "trick" is to employ progressive enhancements. Also, the less CSS, the better. + no shame in using !important sometimes. All in all, CSS requires experience
- Dudeman112 4y ago
  !important is like global variables Sure they have their place, but goddamnit do some people abuse them and make huge messes with them :(
- eurasiantiger 4y ago
  Better off repeating classnames (.foo.foo { color: pink; }) than using !important.
owenpalmer 4y ago
CSS is terrible for positioning elements and unnecessarily complicated for a problem that is actually not that hard. If only browsers provided alternatives to the classic dom.
kebsup 4y ago
What worked for me is tailwind + making almost everything display:flex/grid.
- nailer 4y ago
  Not a fan of tailwind but grid by default is indeed a good basis for a design system and solves this easily.
  - dimal 4y ago
    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.
    - nailer 4y ago
      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.
      - dimal 4y ago
        Here's a fork. https://codepen.io/mrdanimal/pen/VwGNOQw?editors=0100 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.
        nailer 4y ago
        (Off topic: can you please remove my name from your fork? Thanks)
        4y ago
robomartin 4y ago
For me grid and flexbox brought balance to the force. Master these and CSS will feel far more accessible.
tambourine_man 4y ago
I’d go further. Declarative programming is deceptively hard. It only seems easier at first
- PaulHoule 4y ago
  I never enjoyed making graphs with most APIs whether it was products like Matlab and IDL or xvgr, not to mention pyplot, highcharts, etc. I was initially apprehensive about making plots with D3.js but once I got over the hump it was such a breath of fresh air. Instead of the usual second guessing, head scratching and "you can't get here from there" it was just... easy! Want bar charts by date where the weekends are a different color... easy! I'd also point out the endless complaining people have about things like puppet, terraform, kube files and such. I always found that building out cloud infrastructure with Java or Python programs that use the AWS/Azure API and write bash scripts that boot up on the machines or Python programs was... Easy! Often I'd have complicated systems up-and-running and checked into git while people were still fighting with leaking abstractions with various value-subtracting tools that never absolve you from knowing bash.
  - epgui 4y ago
    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.
    - PaulHoule 4y ago
      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 opposed to offering you declarative access to an impoverished and inevitably flawed toolbox.
overthrow 4y ago
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. 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.
- WorldMaker 4y ago
 `vertical-align: middle` would also likely give them better preferred alignment the first time a "pill" thinks it needs a second line of text and sometimes when too many pills exist for available width and the container starts to spill to another row. I understand why `vertical-align: baseline` is the default, but it seems like such a bad default for all the ways designers like to (over) use Flexbox. (Especially because designers really love the baseline alignment at first but often can't seem to think two and four dimensionally enough when designs meet real world constraints and user data and need to expand/contract/shift to available space.)
 - dsego 4y ago
 But flexbox is much newer than vertical-align.
 - WorldMaker 4y ago
 As I said, I know why it is the default. There's nothing that would have stopped `display: flex` having a different default `vertical-align` given `vertical-align` original use cases mostly didn't overlap anyway, but that's obviously armchair quarterbacking and we have the CSS we have.
zichy 4y ago
The 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.
beebeepka 4y ago
No, 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.
- pessimizer 4y ago
  I agree. The problem that people are having is that CSS has completely changed within the past 5 years, especially positioning, as all of the modules have been implemented. Things that once involved elaborate and fragile rituals to perform are now trivial to write. If you knew CSS 10 years ago and never went back to survey it since, you don't really know CSS now. I finally stopped claiming I knew CSS until I took a few months to work through a top to bottom overview. None of the skills I had 10 years ago apply to modern CSS; I had to give up every habit. This is a good time to do a review, because CSS development seems to have slowed down considerably, and browsers are all pretty good. However, CSS has become very big, and web development teams should really start respecting it as a specialty in itself, and making sure they have at least one person who knows it all. Even if they use tailwind.
omneity 4y ago
Here's a quick fix: use `align-items: baseline` instead of center in your wrapper class
nailer 4y ago
No, this is terrible CSS. grid handles this perfectly.
- FigurativeVoid 4y ago
  I have a hard time differentiating when I should use grid and when I should use flex-box. In this case, setting up a grid seems like overkill. Seems more like a browser default issue than a tool choice issue.
  - nailer 4y ago
    If you need flexing, use flex box. You probably don't need flexing. /If you don't know what flexing is/, you should use grid.
alex7734 4y ago
https://www.w3.org/TR/css-flexbox-1/#flex-baselines https://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. [...] It uses the first flex item (the first child controlled by the flexbox) to set the baseline for the flexbox. (for https://codepen.io/jsteel64/pen/rNrPYNQ 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. https://imgur.com/Bt4e6gU https://imgur.com/Bt4e6gU And yes, anything that has to do with baselines is a source of pain and bugs, it sucks.
romellem 4y ago
EDIT 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, <div style="display: inline-block">  Text </div> The presences of that empty tag is what changes the alignment. This also requires the flex container to be wrapper in an inline-block element, and for the flex container to align-items: center. 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. [1]: https://www.w3.org/TR/css-flexbox-1/#flex-items https://www.w3.org/TR/css-flexbox-1/#flex-items
amsheehan 4y ago
I agree with exactly one sentence in the comment thread so far. "CSS requires experience" If you're interested in actually learning css, and don't just want to complain about how poorly written css is bad, this website is invaluable and provides concrete examples of how to build layouts and style elements. https://web.dev/learn/css https://web.dev/learn/css
- epgui 4y ago
  I agree, but I'd even say that becoming pro at CSS is orders of magnitude easier than becoming pro at your average programming language. I think engineers just tend to not take the task seriously, and don't apply themselves enough. You just need to actually understand the box object model and a handful of common gotchas.
  - eurasiantiger 4y ago
    CSS is essentially declarative programming for several different black-box systems. How selectors are written has exponential performance implications. Using the wrong type of transform might make your page forego hardware acceleration, or use more battery on a mobile device. At least typical programming languages are targeting a known set of environments and devices with known characteristics. You definitely need to understand a lot more than the box model and a handful of gotchas.
Avlin67 4y ago
line-height ?
jaredcwhite 4y ago
CSS has been hard. Modern CSS is amazingly more straightforward. As others have pointed out here, this is a problem of trying to apply new functionality (and more modern CSS) to a legacy codebase. Obviously there will be weird issues there. If the entire parent component had been designed from top to bottom using flex/grid mechanics, I doubt a problem like this would have presented itself after the fact.
- SteelWo1f 4y ago
  You are absolutely right here. This problem arose because the surrounding code was much older. I would have liked to reformat it, but that would have been a huge lift compared to what I was trying to achieve.
  - epgui 4y ago
    That's been my experience as well... Any CSS issue that was not immediately obvious, in my experience, has always had more to do with insane markup and javascript than with css. Just to give a fictitious example (inspired by real events)... I wouldn't really expect a Label react component to be made up of 26 nested html elements, 80% of which coming from third party libraries. Stuff like that can be hard to style, but that's just because there's inappropriate abstractions involved.
- lisasays 4y ago
  "Modern CSS" defined as ... what, precisely? Keyword searches seem to pull up an unstructured soup of random essays and 'tips-n-tricks' type articles.
  - xboxnolifes 4y ago
    To me, that means flexbox and grids. All of my past css formatting issues are solved with those two things.
flutterdev 4y ago
[dead]
crispyambulance 4y ago
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 frameworks like bootstrap to get by. So much confusion and suffering just because there was no will power to straighten this stuff out into something sane and cogent.
- paulddraper 4y ago
  What language/tech should CSS have looked to?
  - crispyambulance 4y ago
    Take your pick. Java Swing GridBagLayout? Anything that allows you to reason cogently about layout in terms of rows and columns? I just wonder what CSS implementers were thinking when people started replacing desktop application with web-apps and they could see that application developers could zip through a dialog layout in minutes whereas the same thing in a browser would take endless effort and workarounds.
- marssaxman 4y ago
  What do you mean by "get to grid"? Have people come back around to the idea that tables weren't so bad? I enjoyed web development quite a lot in the '90s, but after CSS came along it was an endless source of frustration, and I gave up on it all.
  - crispyambulance 4y ago
    > Have people come back around to the idea that tables weren't so bad? In a way, yes, I think so. Grid has similarities to tables. These similarities are not accidental. They're a consequence of thinking about layout in terms of rows and columns. I recall back in the day the purists always decreed that tables were supposed to be semantic construct and not used for layout. Pragmatists just ignored that advice for years because there was nothing but a lot of obstacles if you went "table-less" for layout. But yeah, tables "just worked" for layout despite what purists said. Now we have "grid" and it's part of css, so it's "OK" now for the purists. I remember this comic strip from 2005, it captured the essence of the situation perfectly: https://web.archive.org/web/20100125163107/http://okcancel.com/comic/98.html https://web.archive.org/web/20100125163107/http://okcancel.c...
nailer 4y ago
Update: done. https://codepen.io/mikemaccana/pen/WNgWmdY 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 https://codepen.io/mikemaccana/pen/WNgWmdY
legitster 4y ago
> 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.
- yakshaving_jgt 4y ago
  Ouch. I just realised I am old.

95 points by SteelWo1f 4y ago

Based on some of the comments here, it seems like the browser 'defaults' for styles are not what you would intuit. This is something I run into with flexbox. The tool is great, but the default mode is almost never what I want.

SteelWo1f 4y ago

What tactics do employ when a CSS issue has stumped you?

burnte 4y ago
!important generally.
- forgetfulness 4y ago
  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.
nicoburns 4y ago
`position: relative`, `overflow: hidden`, `height: 100%`, `line-height: 1` and `margin: 0` solve a surprising percentage of CSS issues in my experience.

sharemywin 4y ago

I always thought there should be some kind of visual effects database. I'm looking to do X with Y tool. here are all the things it could be called in other tools. and/or layman terms.

PaulHoule 4y ago
The problem this article is pointing out is that you could have that database and still struggle. It is easy to make a database of effects that work in isolation, for that matter GPT-4 will do a great job writing CSS to make isolated visual effects. It’s when you need to put those visual effects to work inside of a real application or web site that you find it doesn’t work or rather almost works because of very fine details in how HTML and CSS work. Often you find you can move something forcibly a few pixels this way or that way but what works for the personal web site will be a nightmare for a complicated application that has multiple parts that multiple people are working on because you’ll need more hacks to deal with the consequences of those hacks. It is real, global, and comprehensive understanding we need, not just another cheat sheet.

WheelsAtLarge 4y ago

It's always been a time sink for me. Besides using frameworks, does anyone have any suggestions on how to develop a css file without getting into the neverending hacks that require hacks to fix the hacks? I have yet to see a long term css file that's not a birds nest of fixes.

RobertRoberts 4y ago
Are you building sites or apps? I got to the point a long time ago where I just didn't care to cover every single design need and just made my own mini-framework.
migf 4y ago
Tailwind * tries * to resolve this, but is probably just a different bird's nest.
- PaulHoule 4y ago
  Frameworks are going from the frying pan to the fire. There are numerous React frameworks that supply a "widget set" either of web page elements, UI controls or both that work out of the box. If you (your client, your employer, ...) like the way these look out of the box they are a great way to build something quickly and not have to understand the underlying CSS. If you are required to customize the look, however, or you want to combine components from various sources and have them look consistent you have to understand all the concepts of the frameworks, the frameworks the frameworks depend on and CSS.
- vehemenz 4y ago
  Tailwind is a bird's nest in one place instead of a bird's nest in two places with hidden abstractions.
- k1w1 4y ago
  The problem with Tailwind is that it is write-once code. You don't get any leverage. Ideally as you write more code you get more reuse and writing future code becomes faster. In theory CSS classes act like this too. As you have more (well designed) CSS classes then writing future CSS becomes easier because you can reuse the past work. Tailwind breaks this benefit that by encouraging you to write your CSS with glorified styles.

Fauntleroy 4y ago

For what it's worth, this is a relatively easy problem to solve with flexbox these days. My advice for those who constantly complain about CSS: give it the respect you give things like programming languages or SQL. You're not just understanding a text file, you're understanding the way browsers interpret and render styles. You probably need an expert to "just do what you want to do", and if you don't have an expert available you'll need to make do. Just like anything other sufficiently complex development problem.

PaulHoule 4y ago
Flexbox is way better than what there was before, I'll grant that. Grid too.

brigadier132 4y ago

I've never had much trouble with CSS but I also just never try to use the cascading aspect of it outside of fonts. I just write either CSS directly onto components I'm using or I just use tailwind.

Kiro 4y ago
Not sure why you are getting downvote. I absolutely agree - avoid the C in CSS and your life will be much better.
- SteelWo1f 4y ago
  Definitely. I love using BEM when you have to nest things. If you stick to strict BEM, you will generally avoid having nesting more than 1 or 2 levels deep.

sourcecodeplz 4y ago

The "trick" is to employ progressive enhancements. Also, the less CSS, the better. + no shame in using !important sometimes. All in all, CSS requires experience

Dudeman112 4y ago
!important is like global variables Sure they have their place, but goddamnit do some people abuse them and make huge messes with them :(
eurasiantiger 4y ago
Better off repeating classnames (.foo.foo { color: pink; }) than using !important.

owenpalmer 4y ago

CSS is terrible for positioning elements and unnecessarily complicated for a problem that is actually not that hard. If only browsers provided alternatives to the classic dom.

kebsup 4y ago

What worked for me is tailwind + making almost everything display:flex/grid.

nailer 4y ago
Not a fan of tailwind but grid by default is indeed a good basis for a design system and solves this easily.
- dimal 4y ago
  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.
  - nailer 4y ago
    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.
    - dimal 4y ago
      Here's a fork. https://codepen.io/mrdanimal/pen/VwGNOQw?editors=0100 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.
      - nailer 4y ago
        (Off topic: can you please remove my name from your fork? Thanks)
        4y ago

robomartin 4y ago

For me grid and flexbox brought balance to the force. Master these and CSS will feel far more accessible.

tambourine_man 4y ago

I’d go further. Declarative programming is deceptively hard. It only seems easier at first

PaulHoule 4y ago
I never enjoyed making graphs with most APIs whether it was products like Matlab and IDL or xvgr, not to mention pyplot, highcharts, etc. I was initially apprehensive about making plots with D3.js but once I got over the hump it was such a breath of fresh air. Instead of the usual second guessing, head scratching and "you can't get here from there" it was just... easy! Want bar charts by date where the weekends are a different color... easy! I'd also point out the endless complaining people have about things like puppet, terraform, kube files and such. I always found that building out cloud infrastructure with Java or Python programs that use the AWS/Azure API and write bash scripts that boot up on the machines or Python programs was... Easy! Often I'd have complicated systems up-and-running and checked into git while people were still fighting with leaking abstractions with various value-subtracting tools that never absolve you from knowing bash.
- epgui 4y ago
  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.
  - PaulHoule 4y ago
    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 opposed to offering you declarative access to an impoverished and inevitably flawed toolbox.

overthrow 4y ago

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. 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.

WorldMaker 4y ago
`vertical-align: middle` would also likely give them better preferred alignment the first time a "pill" thinks it needs a second line of text and sometimes when too many pills exist for available width and the container starts to spill to another row. I understand why `vertical-align: baseline` is the default, but it seems like such a bad default for all the ways designers like to (over) use Flexbox. (Especially because designers really love the baseline alignment at first but often can't seem to think two and four dimensionally enough when designs meet real world constraints and user data and need to expand/contract/shift to available space.)
- dsego 4y ago
  But flexbox is much newer than vertical-align.
  - WorldMaker 4y ago
    As I said, I know why it is the default. There's nothing that would have stopped `display: flex` having a different default `vertical-align` given `vertical-align` original use cases mostly didn't overlap anyway, but that's obviously armchair quarterbacking and we have the CSS we have.

zichy 4y ago

The 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.

beebeepka 4y ago

No, 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.

pessimizer 4y ago
I agree. The problem that people are having is that CSS has completely changed within the past 5 years, especially positioning, as all of the modules have been implemented. Things that once involved elaborate and fragile rituals to perform are now trivial to write. If you knew CSS 10 years ago and never went back to survey it since, you don't really know CSS now. I finally stopped claiming I knew CSS until I took a few months to work through a top to bottom overview. None of the skills I had 10 years ago apply to modern CSS; I had to give up every habit. This is a good time to do a review, because CSS development seems to have slowed down considerably, and browsers are all pretty good. However, CSS has become very big, and web development teams should really start respecting it as a specialty in itself, and making sure they have at least one person who knows it all. Even if they use tailwind.

omneity 4y ago

Here's a quick fix: use `align-items: baseline` instead of center in your wrapper class

nailer 4y ago

No, this is terrible CSS. grid handles this perfectly.

FigurativeVoid 4y ago
I have a hard time differentiating when I should use grid and when I should use flex-box. In this case, setting up a grid seems like overkill. Seems more like a browser default issue than a tool choice issue.
- nailer 4y ago
  If you need flexing, use flex box. You probably don't need flexing. /If you don't know what flexing is/, you should use grid.

alex7734 4y ago

https://www.w3.org/TR/css-flexbox-1/#flex-baselines https://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. [...] It uses the first flex item (the first child controlled by the flexbox) to set the baseline for the flexbox. (for https://codepen.io/jsteel64/pen/rNrPYNQ 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. https://imgur.com/Bt4e6gU https://imgur.com/Bt4e6gU And yes, anything that has to do with baselines is a source of pain and bugs, it sucks.

romellem 4y ago

EDIT 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, <div style="display: inline-block">  Text </div> The presences of that empty tag is what changes the alignment. This also requires the flex container to be wrapper in an inline-block element, and for the flex container to align-items: center. 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. [1]: https://www.w3.org/TR/css-flexbox-1/#flex-items https://www.w3.org/TR/css-flexbox-1/#flex-items

amsheehan 4y ago

I agree with exactly one sentence in the comment thread so far. "CSS requires experience" If you're interested in actually learning css, and don't just want to complain about how poorly written css is bad, this website is invaluable and provides concrete examples of how to build layouts and style elements. https://web.dev/learn/css https://web.dev/learn/css

epgui 4y ago
I agree, but I'd even say that becoming pro at CSS is orders of magnitude easier than becoming pro at your average programming language. I think engineers just tend to not take the task seriously, and don't apply themselves enough. You just need to actually understand the box object model and a handful of common gotchas.
- eurasiantiger 4y ago
  CSS is essentially declarative programming for several different black-box systems. How selectors are written has exponential performance implications. Using the wrong type of transform might make your page forego hardware acceleration, or use more battery on a mobile device. At least typical programming languages are targeting a known set of environments and devices with known characteristics. You definitely need to understand a lot more than the box model and a handful of gotchas.

Avlin67 4y ago

line-height ?

jaredcwhite 4y ago

CSS has been hard. Modern CSS is amazingly more straightforward. As others have pointed out here, this is a problem of trying to apply new functionality (and more modern CSS) to a legacy codebase. Obviously there will be weird issues there. If the entire parent component had been designed from top to bottom using flex/grid mechanics, I doubt a problem like this would have presented itself after the fact.

SteelWo1f 4y ago
You are absolutely right here. This problem arose because the surrounding code was much older. I would have liked to reformat it, but that would have been a huge lift compared to what I was trying to achieve.
- epgui 4y ago
  That's been my experience as well... Any CSS issue that was not immediately obvious, in my experience, has always had more to do with insane markup and javascript than with css. Just to give a fictitious example (inspired by real events)... I wouldn't really expect a Label react component to be made up of 26 nested html elements, 80% of which coming from third party libraries. Stuff like that can be hard to style, but that's just because there's inappropriate abstractions involved.
lisasays 4y ago
"Modern CSS" defined as ... what, precisely? Keyword searches seem to pull up an unstructured soup of random essays and 'tips-n-tricks' type articles.
- xboxnolifes 4y ago
  To me, that means flexbox and grids. All of my past css formatting issues are solved with those two things.

flutterdev 4y ago

[dead]

crispyambulance 4y ago

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 frameworks like bootstrap to get by. So much confusion and suffering just because there was no will power to straighten this stuff out into something sane and cogent.

paulddraper 4y ago
What language/tech should CSS have looked to?
- crispyambulance 4y ago
  Take your pick. Java Swing GridBagLayout? Anything that allows you to reason cogently about layout in terms of rows and columns? I just wonder what CSS implementers were thinking when people started replacing desktop application with web-apps and they could see that application developers could zip through a dialog layout in minutes whereas the same thing in a browser would take endless effort and workarounds.
marssaxman 4y ago
What do you mean by "get to grid"? Have people come back around to the idea that tables weren't so bad? I enjoyed web development quite a lot in the '90s, but after CSS came along it was an endless source of frustration, and I gave up on it all.
- crispyambulance 4y ago
  > Have people come back around to the idea that tables weren't so bad? In a way, yes, I think so. Grid has similarities to tables. These similarities are not accidental. They're a consequence of thinking about layout in terms of rows and columns. I recall back in the day the purists always decreed that tables were supposed to be semantic construct and not used for layout. Pragmatists just ignored that advice for years because there was nothing but a lot of obstacles if you went "table-less" for layout. But yeah, tables "just worked" for layout despite what purists said. Now we have "grid" and it's part of css, so it's "OK" now for the purists. I remember this comic strip from 2005, it captured the essence of the situation perfectly: https://web.archive.org/web/20100125163107/http://okcancel.com/comic/98.html https://web.archive.org/web/20100125163107/http://okcancel.c...

nailer 4y ago

Update: done. https://codepen.io/mikemaccana/pen/WNgWmdY 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 https://codepen.io/mikemaccana/pen/WNgWmdY

legitster 4y ago

> 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.

yakshaving_jgt 4y ago
Ouch. I just realised I am old.