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

171–180 of 318 posts

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

#171

Post by k33n »

65 wrote: post #67

The first example of not using absolute positioning isn't a good example because sometimes you do need to absolutely position things, like a modal. Also you can just use display: flex with justify-content: center and align-items: center for non absolutely positioned elements. Just because it uses CSS grid does not make it more "correct" than flexbox. I also only see one usage of custom @property properties here, whic…

Modal containers should be position: fix; with their own internal flexbox or grid btw.

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

#172

Post by TonyStr »

spartanatreyu wrote: post #60
crooked-v wrote: post #19

Earlier quoted context omitted.

Tailwind is a direct response to how the "C" in "CSS" actually sucks, so there's no surprise that it's so popular.

The "C" (Cascade) in CSS doesn't suck, the education about it sucks. People don't know how it works, then things go wrong so they learn to work around it. That's what led to things like div + class soup that you get with the BEM naming convention or Tailwind. The cascade is actually awesome, super powerful and if you know how to use it, it can greatly simplify your code. Education is the problem and the solution. ---…

What do you think is lacking from CSS education?

I don't think anyone in this thread is arguing that inheritance or specificity is hard to understand.

My issue with cascading style sheets is mainly that namespace pollution (as every selector is defined in the same global namespace) means that short selectors (.separator, .highlight, .button) are likely to collide with completely unrelated parts of the application. BEM and tailwind are popular because they localize styles to specific components, preventing namespace issues. Today, most web frameworks deal with components, so it makes a lot of sense to localize the styles to the components. Scoped css in vue/svelte allows you to write short selectors, and have them only apply to the component they are written in, without needing to prefix them with a component name.

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

#173

Post by ed_mercer »

susam wrote: post #133
ed_mercer wrote: post #93

Earlier quoted context omitted.

Missed opportunity to turn this into a poem

Go for it if Tailwind works for your team. Inline CSS for your solo project? Chase your dream. Still stuck on SASS? It'll work just fine. All in on modern CSS? Go ahead and shine.

<3

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

#174

Post by m-schuetz »

josephg wrote: post #82
MD87 wrote: post #68

Earlier quoted context omitted.

First widely available one I saw was this: https://modern-css.com/staggered-animations-without-nth-chil... That would actually fix some ugly CSS I have. The demo works. Neat. Except... the demo doesn't use either the old syntax or the new syntax. The browser support is wrong (Firefox doesn't support it, the site says Firefox 16+; it says Chrome 43+ but in reality it's much newer: Chrome 148+). It says "Since 2018" bu…

Yeah a lot of these demos say the features are widely available, but they don't actually work in my browser (Firefox on Macos). Makes me wonder if these demos (or the browser support tables) were made by LLMs. They clearly haven't tested the demos in firefox.

Firefox is pretty irrelevant nowadays. They've dragged their feet for years when it comes to implementing new stuff, and now web devs don't even bother checking Firefox. Because devs know it won't work on ancient browsers, no need to confirm.

My personal trigger events were when Firefox didn't optimize DataView for the longest time, initially refused to implement import maps, and couldn't get WebGPU support done. At that point I lost interest in supporting it.

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

#175

Post by presentation »

graypegg wrote: post #14
Bengalilol wrote: post #11

Me: cool, let's be creative, I love 2026. Browsers: Yeah, but beware of limited availability, most of those creative examples are in the 40-50% browsers support range.

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

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

#176

Post by zarzavat »

namuol wrote: post #43
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.

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.

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

#177

Post by the_other »

namuol wrote: post #43
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.

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

SoC is how all maintainable software is built. A function for A, a class for B, DDD-spec'd modules and features, databases on separate machines, API definitions, queuing systems, event systems, load balancing, web servers.

You don't even need to think of the web to see how content and presentation are different. Try editing a text file with hard line breaks in and you'll quickly understand how presentation and content are orthogonal.

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

#178

Post by gf000 »

spartanatreyu wrote: post #60
crooked-v wrote: post #19

Earlier quoted context omitted.

Tailwind is a direct response to how the "C" in "CSS" actually sucks, so there's no surprise that it's so popular.

The "C" (Cascade) in CSS doesn't suck, the education about it sucks. People don't know how it works, then things go wrong so they learn to work around it. That's what led to things like div + class soup that you get with the BEM naming convention or Tailwind. The cascade is actually awesome, super powerful and if you know how to use it, it can greatly simplify your code. Education is the problem and the solution. ---…

It has nothing to do with education, software development is not learnt in a centralized way so you could hardly claim anything based on that.

Cascading simply fails to scale/work with web applications, especially when multiple people work in parallel.

HTML both describes content AND layout, so you simply can't separate the two. This was a nice dream when the internet was "markdown encoded in html", but the moment you write a nested for layout purposes you lost. So HTML has to be written together with CSS, so we get no separation. Now what is it that you could meaningfully cascade? (If anything, variables are all that we needed)

Add to it that people are using third-party components as well, and now many "widgets" starts by resetting outside styling rules.

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

#179

Post by gf000 »

seer wrote: post #111
apsurd wrote: post #37

Earlier quoted context omitted.

Well, i've always been a fan of the island architecture that effectively mounts root nodes as little islands of isolated state, yes. Mainly this avoids the hell that global state SPA patterns produce: redux, reducer patterns in general, and 8 thousand context providers. I do think there's use cases that warrant global in-memory state, but it's such a pain in the ass to maintain and evolve, i'd always plan against it.…

Do you need react at this point? Isn’t it just html/css/components? I remember the birth of React was because Facebook had a problem - you would add a comment and your notification bar would sometimes not get updated. They had so many bugs with normal html / css that they wanted to solve this on the application layer - to make inconsistent UI elements unrepresentable. So they came up with react with global state - be…

> I just feel that if you really don’t need global state, then react kinda isn’t needed as well…

I don't know, in my mind "re-render (efficiently) when state changes" is the core point of react and similar frameworks. That requirement still stands even if I have a smaller, local state.

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

#180

Post by the_other »

afiori wrote: post #22
lawn wrote: post #13

Earlier quoted context omitted.

Is jumping between files supposed to be difficult or something?

Without a lot of discipline it is very easy to end up with a css with lots of unclear and hard to guess effects. Eg consider the case of where A and B are complex templates. Any selector with the " " operator on A risk expanding to the inner A even if it was intended only for the outer. Similarly a :has selector might catch a descendant of the wrong element. @scope fixes a lot of this, but it is a complex problem. Wi…

> Any selector with the " " operator on A risk expanding to the inner A even if it was intended only for the outer.

Then is potentially a . Consider a small refactor?

Post reply on HN