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

Old dogs, new CSS tricks

mxb.dev

Post reply on HN
Print view View original

81–90 of 108 posts

Re: Old dogs, new CSS tricks

#81

Post by azangru »

kerkeslager wrote: post #7

> Quick question: how many of these have you actively used in production? > Container Queries I haven't used this, but it looks super useful. > Style Queries Eh, I'm sure this is useful for situations that don't come up very often. > CSS Layers Ugh, I'm not going to use this overly-complex silliness, and I'm not looking forward to debugging this when other people use this. > Subgrid Again, overly complex. Grid could…

> But I might be willing to make an exception for people who write CSS that requires you to read the MDN article on Specificity to understand it.

May I ask you, are you a front-end developer?

Re: Old dogs, new CSS tricks

#82

Post by leephillips »

Flimm wrote: post #53

For me personally, it's because I've been burned too many times by blog posts announcing that "feature X is here!", when in reality, it's only here in Chrome or behind a feature flag, or the exciting parts haven't been implemented yet. Even this blog post falls into the same trap. There isn't good cross-browser support for view transitions or anchor positioning, and yet they're listed as here now.

It does not fall into the trap:

“Granted some things are relatively new, and others might be sort of niche-y.”

Re: Old dogs, new CSS tricks

#84

Post by PaulStatezny »

Some comments here are framing CSS as getting too complex. Some folks are recommending the utility-class approach (e.g. Tailwind).

I don't want to argue for Tailwind, but as someone who's used it for ~4 years now, it strikes me that I've forgotten what it's like to have to think about sets of CSS rules and how they collide.

Utility class systems completely remove the need to even consider conflicting rules.

That doesn't mean CSS shouldn't continue to grow though, and I welcome these new features.

Re: Old dogs, new CSS tricks

#85

Post by marcinreal »

I simply need wide support. I made some websites for a client who receives many 1. older customers and 2. customers from all over the world. I was conscious of the possibility that these customers could have either ancient devices or some highly obscure foreign devices not reflected on caniuse.com.

Now, if your domain ends in .dev you can just assume that your users are up-to-date techies, but otherwise I avoid anything newer than flexbox (which is just so useful).

Re: Old dogs, new CSS tricks

#86

Post by BeFlatXIII »

Unai wrote: post #78
paavohtl wrote: post #51

The answer in my team's case is browser support and especially Safari on iOS. Our UI is quite complex and demanding regarding functionality, visual presentation and accessibility and would benefit greatly from most of these features, especially subgrid and container queries (and anchor positioning, but that feature doesn't exist outside of the latest version of Chrome). Even though MDN lists most of these features as…

I've read a few articles like this in the last few days and I don't understand why everyone is ignoring the elephant in the room. It's 2024 and Safari is still not evergreen. When people say Safari is the new Internet Explorer, replies always mention how Safari just adopted such and such bleeding edge CSS feature (while ignoring much older features, though), but the truth is many Apple users won't see those features…

> but the truth is many Apple users won't see those features for years, until their devices break

Yet another case of iPads being held back by their software. IIRC, iPads have slower replacement cycles than either iPhones or Macs.

Re: Old dogs, new CSS tricks

#87

Post by bramus »

Flimm wrote: post #53

For me personally, it's because I've been burned too many times by blog posts announcing that "feature X is here!", when in reality, it's only here in Chrome or behind a feature flag, or the exciting parts haven't been implemented yet. Even this blog post falls into the same trap. There isn't good cross-browser support for view transitions or anchor positioning, and yet they're listed as here now.

View transitions are the perfect candidate progressive enhancement. If the browser supports it, then the user will get the rich animations. If it doesn’t, then they get what they currently have.

And once other browsers starts supporting it, the experience will automatically work in those browsers too without you needing to touch a single line of code :)

Re: Old dogs, new CSS tricks

#88

Post by _heimdall »

graftak wrote: post #47
sir_pepe wrote: post #45

The real problem in my experience is that people who consider themselves to be "real" developers don't care about CSS. I do a ton of code reviews and consulting for companies of all sizes and their JavaScript and TypeScript is almost always at least in a borderline defensible state? But CSS is always one giant file that has been growing since 2002 and is treated as an append-only log of !important. Nobody even tries…

Css scoping has been fixed for ages already by css modules, styled components, or/and (native) support for nested css declarations. If those all fail there’s namespace conventions like BEM. If your css is a mess in 2024 (2016 really) it is all on the developer and not the language.

Fixing scoping in userland, like with styled components or BEM, is definitely doable but not really the same as having native support for scoped styles in CSS.

There's nothing wrong with those solutions and I've used those and similar plenty, but they are fragile. Those are conventions that have to be maintained and stuck with, and often for scoped style solutions you're also left with a hard dependency on a build step (BEM is an exception there). That may not be a problem at all, if you're using react you almost certainly already have a build and bundle step, but not every project is that way.

Re: Old dogs, new CSS tricks

#89

Post by _heimdall »

lenkite wrote: post #76
sir_pepe wrote: post #45

The real problem in my experience is that people who consider themselves to be "real" developers don't care about CSS. I do a ton of code reviews and consulting for companies of all sizes and their JavaScript and TypeScript is almost always at least in a borderline defensible state? But CSS is always one giant file that has been growing since 2002 and is treated as an append-only log of !important. Nobody even tries…

CSS needs a compiler with warnings, dead-code removal, type safety, modularization, standard structuring and "design patterns" - then software engineers will take it seriously.

We do have tools for that though, how would a build tool fit into a language specification? Aren't those different concerns?

Re: Old dogs, new CSS tricks

#90

Post by 9dev »

gonzo41 wrote: post #49
sir_pepe wrote: post #45

The real problem in my experience is that people who consider themselves to be "real" developers don't care about CSS. I do a ton of code reviews and consulting for companies of all sizes and their JavaScript and TypeScript is almost always at least in a borderline defensible state? But CSS is always one giant file that has been growing since 2002 and is treated as an append-only log of !important. Nobody even tries…

You are not wrong. But my god, the tech debt in any slightly older web app's CSS is bonkers. Even with really well thought out templates you still end up with ~5000 line css files that have all sorts of state and magic in them. And like all tech debt, it's a triage. What I'd really like is more intellisense for css so I could take a css file and get sensible code complete and class suggestions for elements.

I don’t know what tooling you use, but IntelliJ does all that for me, including autocomplete for variables, HTML elements in HTML files or components, and so on.

If you use the inspections, it can also make dead code removal really easy.

Post reply on HN