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

51–60 of 318 posts

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

#51

Post by christophilus »

robertoandred wrote: post #36
afiori wrote: post #22

Earlier quoted context omitted.

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…

This problem was solved a long time ago with CSS Modules.

I prefer almost anything to CSS modules, so this bike shedding topic is probably very subjective.

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

#52

Post by nine_k »

appplication wrote: post #50
namuol wrote: post #43

Earlier quoted context omitted.

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

You can separate concerns without violating locality of behavior, and that’s exactly what tailwind does. It admittedly does not do a good job at being very DRY but I think that’s poorly applied to HTML/CSS in general, and the most DRY css is often over abstracted to the point of becoming nigh uninterpretable.

When I write CSS, I most often do not want the locality of behavior. I instead want uniformity of behavior, hence "semantic" styles. Even the trivial light / dark mode switching is pain with Tailwind, when classes like "color-gray-200" are routinely applied.

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

#53

Post by appplication »

nine_k wrote: post #52
appplication wrote: post #50

Earlier quoted context omitted.

You can separate concerns without violating locality of behavior, and that’s exactly what tailwind does. It admittedly does not do a good job at being very DRY but I think that’s poorly applied to HTML/CSS in general, and the most DRY css is often over abstracted to the point of becoming nigh uninterpretable.

When I write CSS, I most often do not want the locality of behavior. I instead want uniformity of behavior, hence "semantic" styles. Even the trivial light / dark mode switching is pain with Tailwind, when classes like "color-gray-200" are routinely applied.

I’d somewhat agree with you there, but I usually use variables for uniformity. I do see arguments against tailwind but find anytime I’ve tried to do anything else it just feels like bikeshedding on internals for the same end result.

Really what I want to see is beautiful TDD for CSS so that uniformity can be enforced, but I’m not sure that exists.

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

#54

Post by nine_k »

lol768 wrote: post #45

I'm confused, many of these examples state that they don't work in my browser (Firefox) - but the live demo works fine? Are the demos poly-filled?

No, it says: "Limited availability".

These green percentage points at the bottom left show how many of the Web audience (IDK by what measurements) runs a browser supporting this feature. A ton of them are even below 50%.

So I suppose it's not "modern CSS", but more like "latest Chrome CSS". Best viewed in Internet Explorer 5.

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

#55

Post by ozim »

flowerlad wrote: post #38
bromuro wrote: post #30

Earlier quoted context omitted.

React is great for MVVM indeed. Who is still using MVC in 2026?

MVVM was invented by Microsoft for 2-way syncing in WPF. Today we know 2-way syncing is a mistake. Who uses MVC in 2026? Pretty much every framework out there, including Java frameworks and Python frameworks and .net

You have any more sources on MVVM being a mistake?

I found WPF rather nice to work with. Same with knockout.js and Angular I don’t see much downsides.

Everyone can write bad code of course in each of them but I think it was working quite well.

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

#56

Post by nine_k »

appplication wrote: post #53
nine_k wrote: post #52

Earlier quoted context omitted.

When I write CSS, I most often do not want the locality of behavior. I instead want uniformity of behavior, hence "semantic" styles. Even the trivial light / dark mode switching is pain with Tailwind, when classes like "color-gray-200" are routinely applied.

I’d somewhat agree with you there, but I usually use variables for uniformity. I do see arguments against tailwind but find anytime I’ve tried to do anything else it just feels like bikeshedding on internals for the same end result. Really what I want to see is beautiful TDD for CSS so that uniformity can be enforced, but I’m not sure that exists.

Variables are hugely helpful, I agreee. IDK about bikeshedding. I'm very used to writing React code that normally declares no styles for components at all, and having CSS that style components using 1-2 classes, specific to these components. Container components control margins, controls general things like fonts.

It seems that what solves the problem is a good component library. "But I need red text here!" For what reason? It's a warning. OK, we've got , it will be styled appropriately, and will look like every other warning in the application.

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

#57

Post by Kailhus »

nine_k wrote: post #54
lol768 wrote: post #45

I'm confused, many of these examples state that they don't work in my browser (Firefox) - but the live demo works fine? Are the demos poly-filled?

No, it says: "Limited availability". These green percentage points at the bottom left show how many of the Web audience (IDK by what measurements) runs a browser supporting this feature. A ton of them are even below 50%. So I suppose it's not "modern CSS", but more like "latest Chrome CSS". Best viewed in Internet Explorer 5.

Absolutely. So no thank you, I won't stop writing CSS like it's 2015 if those features aren't at least supported by all latest browsers.

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

#58

Post by Kerrick »

interlocutor wrote: post #44
bromuro wrote: post #30

Earlier quoted context omitted.

React is great for MVVM indeed. Who is still using MVC in 2026?

Ever heard of Django? ASP.NET? Most UI frameworks, including ASP.NET Core, Spring Boot (Java based framework), Ruby on Rails, and Django (Python) are all based on MVC.

Those are all stateless MVC over HTTP, which is a very different architecture from stateful MVC for long-lived UI. The latter was invented for Smalltalk by Trygve Reenskaug, and is far more relevant to front-end web.

Stateful MVC uses Publisher/Subscriber (or Observer) to keep Views and Controllers up-to-date with changing Models over time, which is irrelevant for stateless MVC over HTTP. Plus, in stateful MVC the View and Controller are often "pluggable," where a given Controller+Model may use a different View for displaying the same data differently (e.g. table vs. pie chart), or a given View+Model may use a different Controller for handling events differently (e.g. mouse+keyboard vs. game controller). Whereas, in stateless MVC over HTTP, the controller is the "owner" of the process, and won't generally be replaced.

And in the world of front-end web, stateful MVC really is mostly dead. MVVM and Component-based architectures (using the Composite pattern) have replaced it. A runtime is usually responsible for wiring up events, rather than individual controllers. Controllers don't need to be swappable because events can be given semantic meaning in components, and Views don't need to be swappable because you can instead render a sub-composite to change how the data is shown.

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

#59

Post by thih9 »

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.

> most of those creative examples are in the 40-50% browsers support range.

Not if you filter the examples. Click "widely available".

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

#60

Post by spartanatreyu »

crooked-v wrote: post #19
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.

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.

---

To anyone outside the CSS space, this is the closest analogy I can find:

In the American education system, there was a recent-ish change where children are "taught" to read using a method of just learning the shape of every word (e.g. "thermally" has a th at the start and ly at the end, so it must be the word "thermally", despite other similar looking words like thematically).

The method was disproven but the American education system still uses it.

Now illiteracy rates are climbing where almost 1/4 Americans (USA) can't read.

It's basically the same thing with CSS, where developers don't know what the code they're reading/writing is actually going to do.

Post reply on HN