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

Modern CSS Code Snippets: Stop writing CSS like it's 2015

modern-css.com

Post reply on HN
Print view View original

221–230 of 318 posts

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#221

Post by trepaura »

These look like some interesting css options, though I'll comment that adding grid placement options is less new, and more just minor syntactic sugar. Plus, basic grid layout styling being added to css will rarely do what we actually want them to do.

Accounting for scrollbar appearance and auto-updtating the width of the frame/window is pretty useful, though. Not having the horizontal scroll bar suddenly appear when a vertical bar is needed due to dynamic elements is highly preferable.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#222

Post by AltruisticGapHN »

rafael-lua wrote: post #212
ktpsns wrote: post #4

CSS in 2025: Let's write html inlined styles as if it was 2005 and separation of formatting/representation was never invented. I talk of tailwind, of course.

Are we still complaining about Tailwind? This ship has sailed. The world is so much better than the old BEM/LESS hell, it is wonderful. UnoCSS is even greater in empowering frontend developers.

BEM is actually not hell, since the whole point is to have classes with a specificity of 1, making precedence of CSS rules easy to figure out.

Non-BEM CSS with ids and multi-classes everywhere was hell.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#223

Post by gf000 »

black3r wrote: post #207
gf000 wrote: post #184

Earlier quoted context omitted.

Is the Controller not in a coupled pair with a View? We could imagine an interface where it could be completely separate (e.g. a kiosk TUI where stuff like "press 'r' for X" is displayed), but in the vast majority of UIs the View has state, and the Controller has to depend on that state (e.g. did this keypress happen with a text field focused). Sure, this is abstracted away via the UI framework and we operate on usua…

You can have decoupled Controllers from Views using React. That's the basis of the "original" Flux/Redux architecture used by React developers 10+ years ago when React was just beginning to get traction. A flux/redux "Store" acts as a Model -> contains all the global state and exactly decides what gets rendered. A flux/redux "Dispatcher" acts as a Controller. And React "Components" (views) get their props from the "S…

I was asking more in the abstract. Web UI frameworks usually sit on top of considerable abstraction (in the form of the DOM, eventing system, etc), so I'm not sure your reply exactly answers my question.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#224

Post by folbec »

szszrk wrote: post #185
p0w3n3d wrote: post #143

Live demo for input:user-invalid does not work on my phone. It'd always been the same: those ugly patches of JavaScript were being added to maintain compatibility with all the browsers... That's why the newest CSS tricks were always out of reach for us

yeah, it doesn't work on desktop Firefox or desktop Chrome-based browser either. That one is a dud. Most others work for me, though.

there is a bug in the CSS :

explicit border:2px solid var(--border); on the input which takes priority over the class :

.demo-uv-input:user-invalid { border-color: var(--red-muted); background: rgba(239,68,68,.04); }

YMMV but when corrected it works for me on latest Edge, Chrome, Firefox (Windows versions)

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#225

Post by hk1337 »

The one I don’t see that often used is color-scheme and light-dark. Both of those with css variables are so helpful with theming and having light and dark themes. Plus it works in all of the main browsers and the effect happens immediately, so you have your page up and switch your system from light to dark, you see it transition without having to refresh.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V...

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#227

Post by netdevphoenix »

zarzavat wrote: post #176
namuol wrote: post #43

Earlier quoted context omitted.

The deadest horse in web development is the myth of “separation of concerns”

I don't use Tailwind, it's a solution to a problem I don't have. I can understand how it might be useful for certain types of web development, e.g. landing pages where the content and styles are tightly coupled. So as a technology, it's OK. But my god its userbase is toxic and obnoxious.

The majority of its userbase is no longer made of humans though.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#228

Post by chuckadams »

raincole wrote: post #117
zeroCalories wrote: post #100

Earlier quoted context omitted.

Tbh there's nothing really wrong with that. You don't need stuff like article or section if you set the right attributes. Often easier to just use divs to get the structure right, and figure out the meaning later.

Exactly this. I wonder if the people downvoted you realize that HN is basically just a big table and a bunch of div, and they use this very site just fine?

And it's nearly impossible to customize any part of the layout with user styles because of that.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#229

Post by chasd00 »

ktpsns wrote: post #4

CSS in 2025: Let's write html inlined styles as if it was 2005 and separation of formatting/representation was never invented. I talk of tailwind, of course.

If I may be so bold, the coding agents are really good at this stuff. Save yourself the pain of front end and make a clanker do it. Or at least make the clanker to the heavy lifting and just do tweaks yourself.

Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015

#230

Post by graypegg »

presentation wrote: post #175
graypegg wrote: post #14

Earlier quoted context omitted.

In the past this was a major issue that meant useful features were only ever usable after IE/Safari finally supported them half a decade later, but it has seriously gotten better. Sadly as a result of Chromium's overbearing presence, but it's a helpful outcome at least. https://wpt.fyi/interop-2025

Problem with safari though is that it’s tied to OS updates that many people just defer for insanely long periods of time. So unlike the other browsers, it’s not evergreen, so if you need to support any iOS users or Mac users who don’t use chrome etc, you’re out of luck

Yeah that definitely sucks. I have seen MacOS Safari updates come though separately in Preferences.app > General > Software Update, but I think that release channel is for security issues.

Saying that, MacOS and iOS generally (up until recently, from what I've heard) have very good uptake rates for major updates. It's become less awful standards-wise as time has gone on in my experience at least.

Post reply on HN