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

261–270 of 318 posts

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

#261

Post by rafark »

mb2100 wrote: post #202
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 everything in your code is a React component, I get why you would just want to write the styles right there.[0] Then again, why write ` ` if you could just write ` ` and style it with standard CSS. [0]: https://mastrojs.github.io/blog/2025-11-27-why-not-just-use-...

Because button is literally anything clickable. Not everything is a boxed button. You cannot just globally add a style to and call it a day. For example, an upvote (^) button, a close (x) button, etc. A lot of clickable elements aren’t inside a [click me] box

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

#262

Post by rafark »

agos wrote: post #232
Kiro wrote: post #211

Earlier quoted context omitted.

Jumping up and down in the file is not much better and you still need to come up with names for classes. I want to look at an element and immediately know how it's styled.

From Tailwind's home page: [...] "immediately" is a stretch

Thanks for proving the point. I haven’t even seen that element rendered and I already have a good mental picture of what it is and what it looks like.

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

#263

Post by rafark »

digitalPhonix wrote: post #97
Sateeshm wrote: post #96

Earlier quoted context omitted.

Tailwind is not what you're describing.

Isn’t that what utility classes are? Shorthand for inline styles? Not saying it’s good/bad, but it feels like that’s the use case

Under that definition any css class is a shorthand for inline styles

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

#264

Post by lateforwork »

ozim wrote: post #144
lateforwork wrote: post #69

Earlier quoted context omitted.

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

Thanks GPT but I know all of that. I was expecting some eye opening new evidence because person I was asking seemed really confident and using strong words. But that’s just generic „blablabla”. MVVM is not a mistake and is still plenty useful.

If it is useful for you then it is not a mistake. For you.

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

#265

Post by rafark »

est wrote: post #95
lateforwork wrote: post #25

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.

> React was originally designed to be the "V in MVC" React was originally desingned to be php in the browser. php5 -> HHVM -> Hack -> XHP -> JSX

Omg yes finally someone acknowledges this. I am always pointing out how react and jsx are a port of XHP. This is why react was class based at first (because php is a class based OO language).

Hack was created later though. XHP was a php 5 extension created around 2008

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

#266

Post by vruppert »

I was excited to see if I had any of the old centering method in my CSS code, turns out I do! So I tried to replace it with the new grid/place-items method... doesn't work because I have multiple children all needing to be placed in the center layered on top of each other. So I wouldn't call this an easy swap

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

#267

Post by Sateeshm »

digitalPhonix wrote: post #97
Sateeshm wrote: post #96

Earlier quoted context omitted.

Tailwind is not what you're describing.

Isn’t that what utility classes are? Shorthand for inline styles? Not saying it’s good/bad, but it feels like that’s the use case

Media queries, pseudo selectors, extensible design system with sensible and practical defaults, and many more

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

#268

Post by Sateeshm »

raincole wrote: post #115
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.

Yeah and it's a really good idea. You can't really 'separate layout from style.' The layout and the style are both parts of the UI. HTML isn't the content, it's the layout. Even if you believe separation of concerns is the eleventh commandment, HTML and CSS are the same kind of 'concern' anyway. They're both at representation layer. Pretending you can decouple them is just burying the head in the sand.

Thank you. This just makes sense. In fact, seperating them into different files don't make much sense when you think about it.

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

#270

Post by pchangr »

maxloh wrote: post #107
josephcsible wrote: post #87

I dislike the examples here where the "old" way works in all browsers, but the "new" way only works in Chrome/Edge. IMO, it's irresponsible to include such examples, since it makes the Blink monoculture worse.

This site shouldn't be the one to blame. Instead, we should probably ask Mozilla to be more standards-compliant.

This is an experimental feature. Not part of the standard yet .. imho.. shouldn’t be included (yet)
Post reply on HN