The color lightening/darkening is new to me. I have a bunch of older sites that still accomplish the same thing with Sass and Compass, but the Compass toolchain has been fiddly to keep running. Nice to see that as a new creature comfort.
Modern CSS Code Snippets: Stop writing CSS like it's 2015
101–110 of 318 posts
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#102Earlier quoted context omitted.
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…
I tend to think that if you're having issues with repeating yourself with stuff like tailwind you probably need to refactor your JSX/templates to share the repeated code. Keeping stuff like CSS isolated is a deliberate choice that helps massively with stuff like splitting code, and keeping changes side effect free.
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#103Earlier quoted context omitted.
Colocation is a useful principle in component-based architecture.
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) break 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 e…
FWIW, “colocation in component-based architecture” doesn’t necessarily mean shared code. It can just mean the one thing has all of its parts in one place, instead of having HTML in one file, CSS in another, JS in another.
You’re right about DRY and code reuse very often being a premiere (wrong) abstraction, which is usually more of a problem than a few copy/pastes, because premature wrong abstractions become entrenched and harder to displace.
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#104CSS 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 let's do that. You have everything related to your component on place instead of jumping between files.
Vue, Svelte, and Surface manage to do this without forcing you to inline all your styles
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#105Earlier quoted context omitted.
Another loser here to second you
I wrote these libraries like https://github.com/kristopolous/db.js and https://github.com/kristopolous/evda in the early 2010s. I spent months on them I was all in. I swore off touching front end in 2022. It's terrible now
Ah, yeah. I spent the early 2010s writing front-ends in AS3, so imagine how that turned out. I wrote my own event system too when I was forced to head to javascript, but in the end I mostly just used jquery's, and it's still what I use. I agree the event-driven paradigm leads to sloppy code, but static event names are enough of a clue to what's invoked most of the time, even in relatively large projects. And most things can sensibly just be promisified now anyway, besides user interactions.
I thought it was funny that you wrote this way back when:
>> I've often seen projects where I think "what talks to what and how? What is the separation of concerns and where does this code live?"
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#106Earlier quoted context omitted.
Is staying in one file supposed to be difficult or something?
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.
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#107I 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.
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#108Earlier 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.
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...
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#109Earlier 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. ---…
I call it cargo cult developing. People develop bags of spells and tricks that they attempt to apply to a situation to solve a problem. Usually they can arrive at a solution by trying a number of these incantations, but not always. And never actually ask them what the incantation does
It's not just css either. At a job I've worked, we had a VPN client that would get into a weird state, where it needed to be killed to restart. An incantation that made use of ps, grep, awk, and xargs was provided, instead of just using pkill
Re: Modern CSS Code Snippets: Stop writing CSS like it's 2015
#110Me: 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.
It takes time. Browser vendors add support for those features now, in the hope that they will become widely available one day.