Live data from Hacker News

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

modern-css.com

61–70 of 318 posts

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

#61
post #43
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 was recently doing some very specific web scraping of some very public very static documents. About 25% of them use a soup of divs with hashes for class names. Not a or or in sight. I am fine with the idea of what tailwind does but like at least using semantic tags where appropriate could be a thing.

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

#62
post #55

Earlier quoted context omitted.

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.

Isn't Vue also MVVM?

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

#64
post #3

2015 is good enough. For example instead of grid center, one can use flex and margin auto. If you are building really nation-wide products, there are still a lot of guys in corporate with old windows (where even chrome stopped updating like win7). Or, you know, old or poor people with PC from 2008. Also don’t forget guys with mobile phones: not like one could easily install a browser there. Especially on phones which…

I definitely don't agree with all of these, but grid centering is pretty nice and has a lot fewer quirks than Flexbox based solutions.

What are the quirks with flexbox centering?

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

#65
post #26

Earlier quoted context omitted.

> React/JSX now confuses presentation and business logic React was originally designed to be the "V in MVC". You can still use it that way. React becomes very simple when you only use it as the V in MVC.

What are the M and the C, and how do they talk to the V in this case?

In the original MVC architecture, the fundamental idea was that the model was responsible for storing the application state, a view was responsible for rendering output to the user, and a controller was responsible for responding to user interactions.

The model can be completely unaware of any specific views or controllers. It only needs to provide an interface allowing views to observe the current state and controllers to update that state.

In practice, views and controllers usually aren’t independent and instead come as a pair. This is because most modern UIs use some kind of event-driven architecture where user interactions are indicated by events from some component rendered by the view that the controller then handles.

My go-to example to understand why this architecture is helpful is a UI that features a table showing some names and a count for each, alongside a chart visualising that data graphically. Here you would have a model that stores the names and counts as pure data, and you would have two view+controller pairs, one managing the table and one the chart. Each view observes the model and renders an updated table or chart when the model state changes. Each controller responds to user interactions that perhaps edit a name or change its count — whether by typing a new value as text in an editable table cell or by dragging somewhere relevant in the chart — by telling the model to update its state to match (which in turn causes all views observing the model to refresh, without any further action from whichever controller happened to be handling that user interaction).

In practical terms for a React application, we might implement this with a simple object/Map somewhere that holds the names and values (our “model”) and two top-level React components that each get rendered once into some appropriate container within the page. Each component would have props to pass in (a) the current state and (b) any functions to be called when the user makes a change. Then you just write some simple glue logic in plain old JavaScript/TypeScript that handles keeping track of observers of the model, registering an observer for each top-level component that causes it rerender when the state changes, and providing a handler for each type of change the user is allowed to make that updates the state and then notifies the observers.

There are lots of variations on this theme, for example once you start needing more complicated business logic to interpret a user interaction and decide what state change is required or you need to synchronise your front-end model state with some remote service. However, you can scale a very long way with the basic principle that you hold your application state as pure data in a model that doesn’t know anything about any specific user interface or remote service and instead provides an interface for any other modules in the system to observe and/or update that state.

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

#66
post #58

Earlier quoted context omitted.

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

Whether application state is short-lived (e.g., request/response CRUD) or long-lived (e.g., an in-memory interactive UI) is orthogonal to MVC. MVC is a structural separation of responsibilities between model, view, and control logic. The duration of state affects implementation strategy, not the applicability of the pattern itself.

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

#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, which has been one of the most useful things to happen to CSS in years. They have many different use cases, particularly for complex animations.

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

#68
post #59

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".

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" but the spec was introduced in 2024.

So maybe an interesting overview of things that might be available or might not, but the filtering and data on the site doesn't seem to be useful.

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

#69
post #55

Earlier quoted context omitted.

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.

When React launched in 2013, its defining idea was strict one-way data flow: parents pass data down via props, and updates happen in a clear, explicit place. Children can't mutate parent state directly; they signal changes through callbacks. The result is predictable, traceable state changes.

This contrasted with MVVM frameworks like early AngularJS, Knockout, and WPF, which relied on two-way data binding. That automatic syncing felt convenient for small apps, but at scale it often led to hidden coupling and hard-to-trace update chains.

Over time, many developers came to view pervasive two-way binding as a design mistake in complex systems. React's unidirectional model gained traction because it favored clarity and control over "magic."

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

#70
post #42
post #3

2015 is good enough. For example instead of grid center, one can use flex and margin auto. If you are building really nation-wide products, there are still a lot of guys in corporate with old windows (where even chrome stopped updating like win7). Or, you know, old or poor people with PC from 2008. Also don’t forget guys with mobile phones: not like one could easily install a browser there. Especially on phones which…

I dare you to find any analytics, anywhere, that show any IE 11 usage. It would be utterly negligent to still be running IE in a corporate environment. It’s a huge security risk.

Just recently I stumbled on some god forsaken pc hooked up to a projector in some conference room.

It had Windows 7 with guess what browser built-in. It had Chrome also, thank god (that’s how I know it is no longer updated by Google under 7).

But that’s not the point. The thing is 2015’s state of affairs is good enough for dare I say most UI.

Yeah, grid is not there, but there are very specific UIs that need what flex cannot provide.

PostCSS takes care for most other legacy things

Post reply on HN