Looks vibecoded
"That plank over there looks nailed."
Modern CSS Code Snippets: Stop writing CSS like it's 2015
161–170 of 318 posts
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#162I 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.
Sometimes I'm developing an internal tool or something only for myself / handful of people. I'm perfectly fine saving time and complexity using a one liner modern CSS solution instead of having to rely on some hacky unreadable code to support 10 years of legacy browsers.
The latest version of Firefox is not a legacy browser.
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#163Could you please add pwa, so I can install it on my phone for easy access?
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#164Earlier quoted context omitted.
HTML vs. CSS is a separation of technologies. If HTML was really only about the content and the CSS was only about styling, we wouldn't have to write div soups to style our websites (.container-wrapper .container .container-inner { /* "separation" */ }) and we wouldn't have to adjust our HTML when we change the layout.
> we wouldn't have to adjust our HTML when we change the layout. You don't have to: https://csszengarden.com/
Fine for a static site which is frozen at the first version forever.
So, so, painful for apps which need to change and evolve over time, which I'm currently experiencing. It's too easy to break the bits where you needed to get clever to make a layout variant work.
I did also did a Zen Garden on YouTube recently when they removed the list view option from Subscriptions, restyling their grid markup was a fun CSS exercise.
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#165Earlier quoted context omitted.
That’s actually disgusting.
It gets worse Check out the Netlify admin dashboard screenshot in my blog post https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-cra...
There's nothing in Tailwind that makes the craftsmanship dead, and your proposed solution with scoped styles somehow a revival of said craftsmanship.
Note how your solution literally depends on a build tool (Vue) to work. Whereas Tailwind can work with no build tools (tailwind build tools removes unused classes, and that's mostly it).
And then you go:
--- start quote ---
Juniors still come along and just do margin: 13px. In tailwind, they do m-[13px]. No difference. At least with CSS its centralized.
--- end quote ---
When your scoped CSS example is literally decentralized per-file CSS that has `margin: 5px` in it. That gets compiled into a meaningless `class-678x8789g` by the build tool.
> The people I've seen who are most excited over tailwind are generally those that would view frontend as something they have to do, not something they want to do.
Tailwind is the product of its era: where even sites are composed out of components. That is, this separation of concerns: https://x.com/simonswiss/status/1664736786671869952
As a comparison, here's Youtube's expertly crafted CSS (which is actually an improvement over their original 6B file). Note how much endless repetition there is: https://www.youtube.com/s/_/ytmainappweb/_/ss/k=ytmainappweb...
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#166Earlier quoted context omitted.
this is grey text from tailwindcss.com, I wouldn't call it easy and readable. Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite sites are built with Tailwind, and you probably had no idea.
In my editor this looks like this, with an extension like Tailwind Fold or Inline Fold: Because Tailwind is so low-level, it never encourages you to design the same site twice. Some of your favorite sites are built with Tailwind, and you probably had no idea.
Ok, and how does it look when you want to read or edit the “classes”?
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#167Earlier quoted context omitted.
I do sympathise as someone who has to scrape content from time to time, but that doesn't sound like a problem for the author of the content or something that impacts their intended user.
that's a problem for accessibility too
tailwind is very much not a problem for accessibility? if your content is semantic and you add the appropriate aria tags, whether or not you have 300 classes or 1 will make no difference for screen readers
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#168My top list of recent CSS improvements: 1) Nested selectors. 2) :has(...). 3) :is(...), before you had to write :not(:not(...)). 4) :where(...), similar to :is(...), but the selector weight inside :where becomes 0. Useful when you need deep/complex selectors without increasing the selector weight.
Mine is text-box: trim. Twenty years of trying to explain to graphic designers why it’s next to impossible possible to get the top of a capital letter to a box, I feel free like a bird.
Once Firefox supports it, we will be golden.
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#169Funny how half of the shit there does not work for me, even though I'm using latest Chrome (Helium)
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#170Earlier 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. ---…
> That's what led to things like div + class soup that you get with the BEM naming convention or Tailwind.
You could try and think why people end up with BEM or Tailwind. And the answer isn't "because people are not educated about cascade". Both BEM and Tailwind came form people who are very much aware of the cascade.
The problem is that cascade is very much a hindrance in quite a few cases. Especially when you deal with components and design systems.
> To anyone outside the CSS space, this is the closest analogy I can find
All analogies are bullshit.
The truth is that CSS is designed for documents, and for a few decades people have been trying to use it to design/build components: https://x.com/simonswiss/status/1664736786671869952 Cascade is good for the former, and is death for the latter.
And browser vendors have been surprisingly stubborn when it comes to making any improvements to the DX in this area. That's why instead of locally scoped CSS, CSS nesting, CSS mixins (and a bunch of other improvements from SASS and various JS Frameworks) we first got 15 000 JS-only specs around web components, of which 14 999 can be covered by improvements to CSS.
> where developers don't know what the code they're reading/writing is actually going to do.
Lol. Tailwind has made people more aware of what CSS does, with better documentation, than decades of bullshit articles and millions of words of existing docs.