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

51–60 of 83 posts

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

#51

Post by dsego »

WorldMaker wrote: post #35
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…

`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 beca…

But flexbox is much newer than vertical-align.

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

#52

Post by whstl »

k1w1 wrote: post #43
migf wrote: post #6

Earlier quoted context omitted.

Tailwind * tries * to resolve this, but is probably just a different bird's nest.

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

Well, tailwind itself is very reusable, probably the epitome of reusable CSS.

And code that uses Tailwind is reusable as long as you use components (React, Vue, Svelte, WebComponents, CSS components with @apply, it doesn't matter). Those are reusable.

Trying to use Tailwind without components, in a CSS-garden style page for example, is just trying to fit a square peg in a round hole. It's just the wrong tool for it.

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

#54

Post by PaulHoule »

epgui wrote: post #39
PaulHoule wrote: post #32

Earlier quoted context omitted.

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…

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 opposed to offering you declarative access to an impoverished and inevitably flawed toolbox.

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

#55

Post by SteelWo1f »

Kiro wrote: post #16
brigadier132 wrote: post #11

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.

Not sure why you are getting downvote. I absolutely agree - avoid the C in CSS and your life will be much better.

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.

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

#57

Post by FigurativeVoid »

nailer wrote: post #26

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

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.

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

#58

Post by WorldMaker »

dsego wrote: post #51
WorldMaker wrote: post #35

Earlier quoted context omitted.

`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 beca…

But flexbox is much newer than vertical-align.

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.

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

#59

Post by hot_gril »

WheelsAtLarge wrote: post #5

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.

Ask ChatGPT to do it for you. It does surprisingly well.

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

#60

Post by nailer »

FigurativeVoid wrote: post #57
nailer wrote: post #26

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

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.

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.

Post reply on HN