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.
crooked-v 46 minutes ago [-]
Tailwind is a direct response to how the "C" in "CSS" actually sucks, so there's no surprise that it's so popular.
mattlondon 45 minutes ago [-]
Wait until you see React & JSX...
At least html and CSS are both presentation. React/JSX now confuses presentation and business logic.
lateforwork 34 minutes ago [-]
> 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.
azangru 31 minutes ago [-]
What are the M and the C, and how do they talk to the V in this case?
lateforwork 20 minutes ago [-]
M stands for Model layer. This layer handles business logic and knows nothing about UI. It does not have any html or CSS.
V stands for View. This layer handles HTML and CSS. You can use React here.
C stands for Controller. Controllers know about Views and Models and which model objects to instantiate for which view. It makes REST API calls and does caching, and handles errors. Controllers know about the application state and decide what page to display next.
(This app doesn't use React, but does use TSX, and you could use React as well).
apsurd 25 minutes ago [-]
react can be pure functions that take in props. Given a set of props, ideally data primitives, the outputted view is guaranteed. it's nice.
In practice, the entire JS ecosystem enjoys flying off the rails, every season, but it's not strictly react's fault.
To answer your question, however those props get into the component is up the the M & C. can be async server, or shoved in as json in the script tag.
azangru 18 minutes ago [-]
If you move the data (the M and the C) entirely out of react, and only pass it in via props, there would be only one place — the root react node — where the props could get into react. Is this what you have in mind? Or are you envisioning multiple root nodes?
apsurd 8 minutes ago [-]
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. Every html node in your app does not need to know about literally everything going on and react instantly to it. it just doesn't.
Just make another page!
Also: so the islands pattern can be as fancy or rudimentary as desired. they can bootstrap themselves via async endpoints, they can be shipped as web components even, or they can be static, pre-hydrated in some manner.
kittbuilds 5 minutes ago [-]
[dead]
tim1994 12 minutes ago [-]
With signals you can avoid the prop drilling. I think signals can help a lot with this approach
cbarrick 26 minutes ago [-]
- M for Model: your data model.
- V for View: views of your data.
- C for Controller: does stuff with your data.
madeofpalk 13 minutes ago [-]
I think you're confusing business logic with view logic.
bromuro 21 minutes ago [-]
React is great for MVVM indeed. Who is still using MVC in 2026?
flowerlad 6 minutes ago [-]
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
h4x0rr 1 hours ago [-]
Yeah let's do that. You have everything related to your component on place instead of jumping between files.
lawn 1 hours ago [-]
Is jumping between files supposed to be difficult or something?
afiori 39 minutes ago [-]
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 <A type=1><B><A type=2></A></B></A> 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. With tailwind you mostly have to worry about inheritance
robertoandred 10 minutes ago [-]
This problem was solved a long time ago with CSS Modules.
chrisweekly 56 minutes ago [-]
Colocation is a useful principle in component-based architecture.
apsurd 17 minutes ago [-]
In my lived experience, shared components just become another problem. Especially in a fledgling company, the iteration velocity is actually negatively affected by shared libs because there's always overhead to (not) breaking legacy. so shared components bloat to address every evolving need.
And now with AI generated code i see so many wrapper patterns that forward endless props down, it's crazy!
TLDR: i almost always end up branching out into evergreen "reusable" components.
runarberg 1 hours ago [-]
Also modern CSS is often written in a <style> tag either in a native web component or in a framework which supports single file component like vue or svelte.
ewuhic 38 minutes ago [-]
Is staying in one file supposed to be difficult or something?
Bengalilol 1 hours ago [-]
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.
graypegg 1 hours ago [-]
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.
Stop pinning things to the edges of the screen and window. Some sites have literally over 50% of the viewable area taken up by irrelevant static elements. Let the content scroll, like god intended.
anematode 43 minutes ago [-]
Random pet peeve... it annoys me when people have old browser-specific aliases to standardized CSS properties. For example, -o-tab-size and -moz-tab-size instead of just tab-size. Those properties haven't done anything on Opera/Firefox for a decade!
piskov 2 hours ago [-]
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 no longer receive updates.
So writing CSS like it is 2015 is great. Not because it feels great but because it is what caring about your users (and business) is.
Otherwise you’ll get humbled by your clients soon enough. And in corporate they won’t even be your clients unless you support old stuff: IE 11 is a great target if you really want to shine.
nicoburns 2 hours ago [-]
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.
57 minutes ago [-]
2 hours ago [-]
jgalt212 1 hours ago [-]
CSS and JavaScript are like two dysfunctional law enforcement agencies fighting over jurisdiction.
sublinear 1 hours ago [-]
All web standards are like this, and then the battle continues when it comes to browser implementation.
user3939382 54 minutes ago [-]
CSS is the only thing from browsers we actually need. The rest can be done in a terminal. Contemporary terminals could even render the UI with way less memory. The browser is a nightmare because it wasn’t architected to run applications.
azangru 23 minutes ago [-]
> The browser ... wasn’t architected to run applications.
Could you explain this? What prevents the browser from running applications? How should it have been architected otherwise if running applications was the goal?
laacz 2 hours ago [-]
Is it just me or gradients and tile grid with specific hover effects are AI generated stuff giveaways? Maybe it's old people yelling at clouds, but I'm very reluctant to trust the site, when I see these signs.
apsurd 1 hours ago [-]
AI got it from people though.
I too am saddened by the instant-polish marketing pages everyone and their grandma deploys to Render, but also some people at some point in time really did make these effects. And they are nice. HTML based UIs will always have a place in my heart.
Btw: actually I think webflow did more to pump this stuff out to the masses. The animate on scroll being the biggest offender. It's so good, but not for every literal text paragraph on your local bakery's website.
samhh 1 hours ago [-]
You’re right not to trust it, it’s wrongly calling sibling-index() widely available. And that’s the first example I checked.
Rendered at 22:18:45 GMT+0000 (Coordinated Universal Time) with Vercel.
At least html and CSS are both presentation. 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.
V stands for View. This layer handles HTML and CSS. You can use React here.
C stands for Controller. Controllers know about Views and Models and which model objects to instantiate for which view. It makes REST API calls and does caching, and handles errors. Controllers know about the application state and decide what page to display next.
For an application written in this style see: https://github.com/wisercoder/eureka/tree/master/webapp/Clie...
(This app doesn't use React, but does use TSX, and you could use React as well).
In practice, the entire JS ecosystem enjoys flying off the rails, every season, but it's not strictly react's fault.
To answer your question, however those props get into the component is up the the M & C. can be async server, or shoved in as json in the script tag.
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. Every html node in your app does not need to know about literally everything going on and react instantly to it. it just doesn't.
Just make another page!
Also: so the islands pattern can be as fancy or rudimentary as desired. they can bootstrap themselves via async endpoints, they can be shipped as web components even, or they can be static, pre-hydrated in some manner.
Who uses MVC in 2026? Pretty much every framework out there, including Java frameworks and Python frameworks and .net
@scope fixes a lot of this, but it is a complex problem. With tailwind you mostly have to worry about inheritance
And now with AI generated code i see so many wrapper patterns that forward endless props down, it's crazy!
TLDR: i almost always end up branching out into evergreen "reusable" components.
Browsers: Yeah, but beware of limited availability, most of those creative examples are in the 40-50% browsers support range.
https://wpt.fyi/interop-2025
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 no longer receive updates.
So writing CSS like it is 2015 is great. Not because it feels great but because it is what caring about your users (and business) is.
Otherwise you’ll get humbled by your clients soon enough. And in corporate they won’t even be your clients unless you support old stuff: IE 11 is a great target if you really want to shine.
Could you explain this? What prevents the browser from running applications? How should it have been architected otherwise if running applications was the goal?
I too am saddened by the instant-polish marketing pages everyone and their grandma deploys to Render, but also some people at some point in time really did make these effects. And they are nice. HTML based UIs will always have a place in my heart.
Btw: actually I think webflow did more to pump this stuff out to the masses. The animate on scroll being the biggest offender. It's so good, but not for every literal text paragraph on your local bakery's website.