My hit-rate with AI and CSS is really bad!
I love using AI, but for styling it's just too weak yet IMO.

Damn... I had no idea!
Here I was: adjusting font weight manually in dark mode...

Promotional graphic announcing a new frontend developer job at BoligPortal, featuring a teal background on the left with a stylized illustrated portrait of Lars Ejaas smiling, labeled “Frontend Developer” with a handwritten signature beneath. The center shows a tilted Polaroid-style frame containing the BoligPortal logo with an orange house-shaped icon and white user figure on a dark blue background. The right side displays a modern industrial-style office with large glass walls, exposed red brick, wooden desks, indoor plants, and soft natural lighting. A bold white outline label reads “NEW JOB.”

Two weeks in at my new job at BoligPortal 🏠 — and what stands out the most is the team spirit 🙌
It’s been great joining a group that collaborates so naturally and builds things with real energy.
Excited for what’s ahead! 🚀

This is sooooo satisfying 😌

This reminds me of some edge-case I've seen recently in Chrome 🤔 It definitely wasn't about RTL - but of course I forgot how to trigger it 😒

IMO it takes a bit more optimization to make things really smooth.
Especially on mobile devices.
Prefetcing and prerendering can really help a lot!

The animation tab in Chrome dev tools instantly becomes your best friend 😅

Love it Salma! 😍

The view transition API is soo nice!

Been playing a lot around with this on my own page as well - makes the look and feel of multi-page apps/pages sooooo much nicer! 😍 🥳

This is SO clever! 🤯

Congrats! This sounds like a powerful combo 💪🥳

But I really like the idea of inserting a breakpoint on pagereveal - will take a stab at that!

Thanks! NO, my portfolio is certainly not a minimal reproduction - quite the contrary! 😂
I better start off with something simpler than the blur-background - this one is quite a bit more complex - but I also get this weird blink of "no blur" on my header menu on desktop.

The easiest way to understand what I mean is to go to my page at:
larsejaas.com/about/cyclin...
and then navigate to the next image using the arrow-buttons.

The issue is probably in terms of transparent layers and backdrop-filter.

I would like my blur background to look like it persists across navigation to a different URL - I just haven't found a way to do this yet...

I am using CSS Modules and found it a bit difficult to control the CSS bundling.
So, I ended up adding a style tag manually in the top of my head where the cascade layers are defined. This works well 🙂

Finally got around to taking a look at your entry!
Makes sense!
I am in Astro actually - but prefer CSS Modules over <style> tags - totally a personal preference...
But your info here on local/global scope could have helped me out!
Maybe include info about view-transition-class here also 💡😀

CSS Modules are simple but super powerful if you lean into these tricks. 🚀

CSS styling: :global(:root[data-darkmode="true"]) .someLocalClass { box-shadow: unset; }

🌍 Global styling
Most of the time, you’ll want to keep styles local, but sometimes it’s useful to reference global classes, IDs, or states.

You can combine local and global selectors with the global keyword.

Here, `.someLocalClass` remains local, but its style adapts to a global state.

Terminal command: npx tcm -p src/**/*.module.css // geneares a *.d.ts file for all *.module.css files

🛡️ Type Safety
If you want full type safety in TypeScript, you can generate `.d.ts` files for your CSS Modules.

A package like typed-css-modules github.com/Quramy/typed... can do this automatically for all modules.
Now classnames will be typed, avoiding typos and giving you editor autocompletion.

CSS showing: @layer components { .button { font-size: 1rem } }

🪄 Cascade Layers Tip
Wrap all component styles in the `components` cascade layer.

Anything outside cascade layers has higher specificity.

This makes it easier to override component styles from the outside when needed.

CSS showing: :import('@components/buttons/button.module.css') { fadeIn: fadeIn; fadeOut: fadeOutFast; } .awesomeButton { animation: fadeIn 400ms ease-out; }

🎬 Importing animations

CSS Modules let you import from other `.module.css` files — even keyframes!

The import syntax allows for renaming the keyframe animations - or use them as-is.

Now you can use the animation as if it were local.

CSS showing: .closeButton { composes: button from '@components/buttons/button.module.css'; color: red; }

🔄 Re-using classes with `composes`
You can “spread” one class into another using `composes`.

Works a bit like Sass mixins but stays inside the CSS Modules ecosystem.

✅ Preprocessors?
CSS Modules are often paired with Sass, but native CSS now supports nested selectors in all modern browsers, making Sass less essential.

If you previously relied on Sass mixins for reusable styles, you can often achieve the same with reusable classes using `composes`.

💅 Using CSS Modules in your projects.
CSS Modules are often underrated. Looking for an alternative to Tailwind CSS? They’re one of the cleanest ways to keep styles scoped to your components and avoid global CSS conflicts.

Let’s go through some practical tips. 🧵
#DeveloperTips #CSSModules

No worries! It helped a ton with your working example! I could exclude a lot of previous unknowns pretty fast 😃
Number 14? I would love to take a stab at an issue if I might be of help!
I still have a thing that bothers me with transparent layers with a background blur filter applied 🤔

Thanks! No bug here: just needed a small syntax tweak when using class declarations inside CSS modules 😀 See my post above...

👆 @vtbag.dev - finally found out why I couldn't make this work - but took some time to figure out how to get it working 😀

::view-transition-image-pair(.test-class) {
animation-duration: 1s;
}

it will fail!

I have to use this syntax:

::view-transition-image-pair(:global(.test-class)) {
animation-duration: 1s;
}

So now it works 🕺
view-transition-classes must be globally scoped!

So, took a stab at this tonight (you know - friday night fun!).

And love and behold: I FINALLY found out why!

I use css modules(with no preprocessors).

If I do a declaration like eg.:

::view-transition-image-pair(test-name) {
animation-duration: 1s;
}

it will work just fine.

But!...

I will take a deep dive into the transitional rabbit hole and return if I find something worth sharing 😉🐰🕳