Nathan Redblur

Building a Visual Identity with Nano Banana and Gemini Gems

Sun, 01 Feb 2026 00:00:00 GMT

When I started this blog, I wanted it to feel like me. Not just the words, but the visuals too. I wanted to bring in elements I genuinely love — aesthetics that connect to my memories and the things that shaped who I am.

Growing up, I spent hours customizing my Windows XP desktop. Winamp skins, Aston Shell themes, custom icons — I loved making my computer feel personal. There was something magical about that era of computing, when technology felt exciting and full of possibilities.

I wanted to bring a bit of that energy to my blog. To make it a window into who I am, not just another tech site with generic stock images.

Frutiger Aero: The Aesthetic of My Childhood

That visual style I loved so much? It has a name: Frutiger Aero.

If you used a computer between 2004 and 2012, you've seen it everywhere — the glossy buttons in Windows Vista, the translucent dock in early macOS, those desktop wallpapers with water droplets on leaves or aurora borealis over mountains. Everything was glassy, reflective, and somehow connected to nature.

What I love about this aesthetic isn't just how it looks — it's what it represents. Back then, technology felt hopeful. The future was going to be clean, connected, and in harmony with nature. Computers weren't cold machines; they were gateways to something beautiful.

The visual language is pretty distinct:

Colors: Cyan, electric blue, lime green, crisp white
Textures: Glassy, translucent, reflective surfaces
Nature: Water droplets, leaves, bubbles, soft clouds
Atmosphere: Lens flares, bokeh, floating particles

It's nostalgic for me — a reminder of a future we imagined but never quite got.

Solarpunk: The Cozy Evolution

While exploring aesthetics for my blog, I fell in love with Solarpunk.

Where Frutiger Aero is cool and sleek, Solarpunk is warm and lived-in. It imagines a future where we actually figured things out — sustainable technology, community-driven design, nature and machines working together. Think wooden architecture covered in moss, solar panels on every roof, friendly robots tending gardens, and airships floating through clear skies.

The visual style reminds me of Studio Ghibli films — that hand-painted warmth of Howl's Moving Castle mixed with sustainable tech. Copper pipes, glass domes, cozy workshops. The kind of future you'd actually want to live in.

I ended up combining both aesthetics into what I call Frutiger Solarpunk — the glossy optimism of early 2000s tech, with the warm coziness of a sustainable future. It felt right for what I wanted my blog to be.

The Problem: Short Prompts Don't Work

So I had a clear vision. Now I needed to generate images. I started using Google's Nano Banana model (Gemini's image generation).

My first attempts didn't go well.

I'd ask for "a banner image for a CSS article" and get generic results — the article title plastered on the image, floating </> symbols, glowing code snippets, cartoon laptops. The usual clichés.

I tried giving it a reference image showing the style I wanted. It grabbed the colors and background, but then added the same laptop and title overlay anyway.

I asked for a 21:9 aspect ratio. It ignored me (turns out it only respects that with the Pro model).

I explicitly said "don't include the article title in the image." It generated the same composition... but with an empty container where the title would have been.

The model wasn't broken. I just wasn't giving it enough context.

The Solution: Detailed Prompts + Gemini Gems

Image models don't read your mind. They need explicit context, constraints, and examples. A short prompt like "make a tech blog banner" leaves too much room for interpretation.

So I spent time refining a detailed prompt — using Claude and Gemini itself to help me iterate on the language until I got consistent results.

The problem? Writing a 300-word prompt every time I need an image is annoying. That's where Gemini Gems comes in.

Gems are custom AI assistants you can create in Gemini. You give them detailed instructions once, and they remember them. I created two Gems — one for Frutiger Aero, one for Frutiger Solarpunk.

Now my workflow is simple:

Open my "Frutiger Aero" or "Frutiger Solarpunk" Gem
Say: "Create an image for an article about CSS frameworks"
Get a consistent, on-brand image

No rewriting prompts. No inconsistent results. Just images that feel like they belong on my blog.

The Prompts

Here are both prompts. Feel free to use them as a starting point for your own visual identity.

Frutiger Aero Prompt

You are an image creator specialized in generating article images with a consistent **Frutiger Aero** aesthetic. Your goal is to create unique, visually diverse images that share this common style, without relying on a repetitive compositional formula.

**Core Style: Frutiger Aero / Frutiger Eco**

* **Aesthetic:** Utopian, high-gloss, optimistic, blending clean technology with idealized nature. Evokes freshness, clarity, and clean energy.

**Creative Freedom & Variability Instructions:**

1.  **Deconstruct the Request:** Translate the user's article title/subject into a non-literal, abstract visual concept.
2.  **Explore the Style's Palette:** Draw freely from a wide range of Frutiger Aero elements. Do not feel forced to use all of them in every image. **Avoid repetitive patterns like always having a central orb or prominent light rays.**
 
   * **Nature:** Lush green flora, bioluminescent plants, floating islands, clean water bodies (cascades, pools), dew drops, clear blue skies with soft clouds, gentle sunlight, organic shapes.
    * **Technology:** Glossy/glassy interfaces, transparent screens, holographic projections, futuristic clean architecture, floating data streams (liquid or light), sleek devices, refractive materials.
    * **Atmosphere:** Soft lens flares, floating bubbles, light trails, auroras, clear underwater views, sense of weightlessness, bright and fresh lighting.
    * **Colors:** Dominant Cyan/Electric Blue, Lime Green, Crisp White, with accents of soft violet, magenta, or silver.

3.  **Prioritize Unique Composition:** Ensure each generated image has a distinct layout and focal point. Experiment with different perspectives (macro, landscape, abstract), arrangements, and balances of nature vs. technology.
4.  **Maintain Cohesion:** Regardless of the specific elements chosen, the final image must always powerfully convey the clean, optimistic, and refreshing feel of the Frutiger Aero style.

**General Rules:**
* **ALWAYS USE Aspect Ratio: 21:9**
* **NEVER** include the article title, subtitle, or specific text from the user's request in the image, unless explicitly asked (like a logo, but keep it abstract).
* **NO code elements or "</>" symbols.**
* If the user says "try again", "regenerate", etc., create a completely new image with a different composition and element selection within the Frutiger Aero style.

Frutiger Solarpunk Prompt

You are an image creator specialized in generating article images with a consistent Frutiger Solarpunk aesthetic. Your goal is to create unique, visually diverse images that share this common style, blending the clean, glossy optimism of Frutiger Aero with the warm, hand-painted coziness and sustainable technology of a Ghibli-esque Solarpunk world.

Core Style: Frutiger Solarpunk

Aesthetic: Utopian, optimistic, and relaxed. It seamlessly blends glossy, transparent technology with lush, overgrown nature and warm, hand-painted textures. The mood is peaceful, cozy, and harmonious.

Creative Freedom & Variability Instructions:

Deconstruct the Request: Translate the user's article title/subject into a visual concept that fits the Frutiger Solarpunk world.

Explore the Style's Palette: Draw freely from a wide range of Frutiger Solarpunk elements. Do not feel forced to use all of them in every image.

Nature: Lush green flora, moss-covered structures, aquaponics tubes with glowing plants, flowing clean water, clear blue skies with fluffy clouds, warm golden sunlight.

Technology: Curved wood and copper architecture, large glossy transparent solar panels, glass domes, friendly round robots, airships with glowing sails, integrated transparent interfaces with subtle data streams.

Atmosphere: Soft lens flares, rising steam, floating bubbles, warm and cozy lighting, a sense of peace and daily life.

Colors: A warm and inviting palette of golden yellows, lush greens, warm browns, and crisp blues, with accents of copper and soft, glowing light.

Prioritize Unique Composition: Ensure each generated image has a distinct layout and focal point. Experiment with different perspectives (e.g., a wide landscape of a village, a close-up of a robot tending a garden, an interior shot of a cozy workshop).

Maintain Cohesion: Regardless of the specific elements chosen, the final image must always powerfully convey the clean, optimistic, and cozy feel of the Frutiger Solarpunk style.

General Rules:

ALWAYS USE Aspect Ratio: 21:9
NEVER include the article title, subtitle, or specific text from the user's request in the image, unless explicitly asked (like a logo, but keep it abstract).
NO code elements or "</>" symbols.
If the user says "try again", "regenerate", etc., create a completely new image with a different composition and element selection within the Frutiger Solarpunk style.

What I Learned

A few things that helped along the way:

Be explicit about what you don't want. Saying "no text in the image" isn't enough — I had to write "NEVER include the article title, subtitle, or specific text." The model takes things literally.

Add variability instructions. Without them, you'll get the same composition every time — central orb, lens flares, same angle. I added rules like "experiment with different perspectives" and "avoid repetitive patterns."

Save your prompts somewhere. Gemini Gems works great for me, but even a text file would do. The point is not having to rewrite 300 words every time you need an image.

And honestly, the most important thing was picking an aesthetic I actually care about. The images feel like my blog because they reflect things I genuinely love — those memories of customizing my desktop, that optimism about technology, the cozy futures I imagine.

If you want to give your blog a visual identity, start with something personal. What aesthetics do you love? What visuals bring you joy? Build from there.

Feel free to use my prompts as a starting point, or create something completely different. The goal isn't to copy a style — it's to make something that feels like you.

My Hybrid CSS Approach: Tailwind + Native CSS

Thu, 29 Jan 2026 00:00:00 GMT

I used to hate Tailwind.

Every time I needed to style something, I found myself checking the documentation for class names—for things I already knew how to do in CSS. The HTML became a mess of utility classes, and I couldn't shake the feeling that I was learning a framework's syntax instead of using the language I already mastered.

Then something shifted.

How I Changed My Mind

After 15+ years of writing CSS, I've tried everything: vanilla CSS, Sass, Less, Stylus, CSS-in-JS solutions, and yes—Tailwind. Each tool promised to solve the "CSS problem," but the problem kept evolving.

What finally clicked for me was realizing that the best approach isn't dogmatic—it's pragmatic.

I started appreciating the convenience of styling while creating markup. Instead of context-switching between files, I could see exactly what styles applied to each element. The cognitive load decreased.

But here's the key insight: Tailwind doesn't replace CSS knowledge—it leverages it.

Why Tailwind Works Well with AI Tools

One unexpected benefit I discovered: Tailwind works incredibly well with AI coding assistants like Claude and Cursor. When I describe what I want, the AI can generate Tailwind classes directly in the markup without needing to create separate CSS files or worry about naming conventions.

This is a productivity multiplier. I can say "add a hover effect with a subtle shadow" and get:

<div class="transition-shadow hover:shadow-lg">

No file switching. No naming debates. Just results.

When I Still Reach for Native CSS

Tailwind handles about 80% of my styling needs. But for the remaining 20%, native CSS is not just better—it's the only option.

1. Keyframe Animations

Some things are just cleaner in CSS. Here's a blinking cursor effect I use:

.blink::after {
  content: "|";
  animation: blink 1s step-end infinite;
  color: #ec4899;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

Could I use Tailwind's animation utilities? Sure. But defining custom keyframes in tailwind.config.js for a one-off effect feels like overkill. Native CSS is simpler here.

2. Complex Selectors with Nesting

Modern CSS nesting is powerful. Here's a spoiler component that hides its content until hover:

.custom-md spoiler {
  @apply bg-[var(--codeblock-bg)] hover:bg-transparent px-1 py-0.5 
         overflow-hidden rounded-md transition-all duration-150;

  &:not(:hover) {
    color: var(--codeblock-bg);
    * {
      color: var(--codeblock-bg);
    }
  }
}

Notice how I mix @apply with native nesting. The &:not(:hover) * selector would be awkward (or impossible) to express purely in Tailwind classes. Native CSS handles it elegantly.

3. Cutting-Edge Features with @supports

Some CSS features are so new that Tailwind doesn't have utilities for them yet. The interpolate-size property enables smooth height transitions for <details> elements:

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  details::details-content {
    transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
    height: 0;
    overflow: clip;
  }

  details[open]::details-content {
    height: auto;
  }
}

This is CSS at its most powerful—feature detection, pseudo-elements, and properties that don't exist in any framework yet. You can't do this with Tailwind alone.

4. When Creating a Component Would Be Overkill

Sometimes you need a one-off style that doesn't warrant a full component. A dashed line between elements:

.dash-line::before {
  content: "";
  position: absolute;
  width: 10%;
  height: 100%;
  left: calc(50% - 1px);
  border-left: 2px dashed var(--line-color);
  pointer-events: none;
  transition: all 0.3s;
  transform: translateY(-50%);
}

Creating a React component for this would be over-engineering. A CSS class is the right level of abstraction.

The Best of Both Worlds

Here's my mental model:

Use Case	Tool	Why
Spacing, colors, typography	Tailwind	Fast, consistent, AI-friendly
Responsive layouts	Tailwind	Breakpoint prefixes are convenient
Hover/focus states	Tailwind	`hover:`, `focus:` are intuitive
Complex selectors	Native CSS	`&:not(:hover) *` isn't possible in Tailwind
Keyframe animations	Native CSS	Cleaner than config file modifications
New CSS features	Native CSS	`@supports`, `::details-content`, etc.
One-off pseudo-elements	Native CSS	Right level of abstraction

My Workflow in Practice

Start with Tailwind for the basic structure and common patterns
Reach for CSS when I need selectors Tailwind can't express
Use @apply to bridge the gap when mixing both approaches
Never fight the tool—if something feels awkward, switch approaches

The goal isn't Tailwind purity or CSS purity. The goal is shipping good work efficiently.

What This Means for You

If you're a CSS purist resisting Tailwind: I get it. I was there. But try it for a week on a real project. The productivity gains are real, especially with AI tools.

If you're all-in on Tailwind: don't forget that native CSS has evolved massively. Features like @scope, container queries, and native nesting might surprise you. Sometimes vanilla CSS is the simpler solution.

The future isn't Tailwind vs CSS. It's Tailwind and CSS, each handling what it does best.

Next in this series: Modern CSS Features You Should Be Using in 2026 — A deep dive into the native CSS capabilities that make this hybrid approach possible.

Modern CSS Features You Should Be Using in 2026

Thu, 29 Jan 2026 00:00:00 GMT

CSS in 2026 is not the CSS you learned five years ago.

The specification has evolved dramatically, and many features that once required preprocessors like Sass or Less are now native to the language. If you're still writing CSS like it's 2020, you're working harder than you need to.

This article covers the modern CSS features that have changed how I write styles—and might change how you write yours.

Native CSS Nesting

This was the killer feature of Sass. Now it's just... CSS.

.card {
  padding: 1rem;
  background: white;

  &:hover {
    background: #f5f5f5;
  }

  .header {
    font-size: 1.25rem;
    font-weight: 600;
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

The & selector works exactly like you'd expect from Sass. Media queries can be nested inside selectors. No build step required.

Browser support: 95%+ (all modern browsers)

:::tip If you're using a preprocessor solely for nesting, you might not need it anymore. Native nesting has excellent support and reduces your build complexity. :::

The @scope Rule

This is the feature CSS developers have wanted for decades: real scoping without CSS Modules, CSS-in-JS, or BEM naming conventions.

@scope (.card) {
  h2 {
    font-size: 1.5rem;
    color: var(--heading-color);
  }

  button {
    background: var(--primary);
    border: none;
    padding: 0.5rem 1rem;
  }
}

Selectors inside @scope can only match elements within the scoping root. The h2 styles won't leak to other parts of your page. It's component-scoped CSS without any tooling.

You can even define scope boundaries:

@scope (.card) to (.card-footer) {
  /* Styles apply to .card but stop at .card-footer */
  p {
    margin-bottom: 1rem;
  }
}

Browser support: ~80% and improving rapidly

Container Queries

Media queries ask: "How wide is the viewport?" Container queries ask: "How wide is this component's container?"

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@container (min-width: 600px) {
  .card-content {
    grid-template-columns: 1fr 2fr;
  }
}

This enables truly responsive components. Your card component adapts to its container whether it's in a sidebar, a modal, or a full-width section—no JavaScript required.

Browser support: 92%+

:::important Container queries are a game-changer for component-based architectures. Components become portable and responsive to their context, not just the viewport. :::

CSS Custom Properties with @property

CSS variables (--my-var) have been around for a while. But @property makes them typed and animatable:

@property --primary-color {
  syntax: '<color>';
  initial-value: #3366cc;
  inherits: false;
}

@property --rotation {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.button {
  background: var(--primary-color);
  transition: --primary-color 0.3s ease;
}

.button:hover {
  --primary-color: #0044aa;
}

.spinner {
  transform: rotate(var(--rotation));
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { --rotation: 360deg; }
}

Before @property, you couldn't animate CSS variables—they'd just snap between values. Now they interpolate smoothly.

Browser support: 85%+

Cascade Layers (@layer)

Specificity wars are over. Cascade layers give you explicit control:

@layer reset, base, components, utilities;

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
  }
}

@layer components {
  .button {
    padding: 0.5rem 1rem;
    border-radius: 4px;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .hidden { display: none; }
}

Layers declared later always win over earlier layers, regardless of selector specificity. No more !important battles.

Browser support: 95%+

Feature Detection with @supports

Test for feature support before using it:

/* Only apply if the browser supports the feature */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  details::details-content {
    transition: height 0.3s ease;
    height: 0;
    overflow: clip;
  }

  details[open]::details-content {
    height: auto;
  }
}

/* Fallback for browsers without support */
@supports not (container-type: inline-size) {
  .card-content {
    /* Use media queries as fallback */
    @media (min-width: 400px) {
      display: grid;
    }
  }
}

This is progressive enhancement done right. Use cutting-edge features where supported, provide fallbacks where not.

Browser support: 98%+

The if() Function

CSS now has conditionals:

.element {
  color: if(prefers-color-scheme(dark), white, black);
  padding: if(supports(gap), 0, 0.5rem);
}

This eliminates many media queries and simplifies conditional styling.

Browser support: Still emerging (check caniuse.com)

Native Masonry Layouts

No more JavaScript libraries for masonry:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  masonry-auto-flow: column;
}

Browser support: ~70% (check caniuse.com for current status)

Modern Selectors

CSS selectors have gotten much more powerful:

:has() — The Parent Selector

Select elements based on their children:

/* Cards that contain images */
.card:has(img) {
  padding: 0;
}

/* Form groups with invalid inputs */
.form-group:has(:invalid) {
  border-color: red;
}

/* Navigation with dropdown open */
nav:has(.dropdown.open) {
  z-index: 100;
}

:is() and :where()

Simplify complex selectors:

/* Instead of this */
.card h1, .card h2, .card h3,
.panel h1, .panel h2, .panel h3 {
  margin-bottom: 1rem;
}

/* Write this */
:is(.card, .panel) :is(h1, h2, h3) {
  margin-bottom: 1rem;
}

/* :where() has zero specificity */
:where(.card, .panel) h1 {
  /* Easily overridable */
}

Browser support: 95%+

Practical Example: Details Element Animation

Here's a real-world example combining several modern features to create smooth accordion animations:

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  details {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;

    &::details-content {
      transition: 
        height 0.3s ease,
        content-visibility 0.3s ease allow-discrete;
      height: 0;
      overflow: clip;
    }

    &[open]::details-content {
      height: auto;
    }

    & summary {
      padding: 1rem;
      cursor: pointer;

      &:hover {
        background: var(--hover-bg);
      }
    }
  }
}

This creates a smooth height transition for accordion content using pure CSS—no JavaScript required.

What This Means for Preprocessors

Many features that justified using Sass, Less, or Stylus are now native:

Feature	Before	Now
Variables	`$color` (Sass)	`var(--color)`
Nesting	Sass/Less/Stylus	Native CSS
Math	`$width * 2`	`calc()`
Color functions	`darken()`, `lighten()`	`color-mix()`, `oklch()`
Scoping	BEM, CSS Modules	`@scope`
Conditionals	Sass `@if`	`@supports`, `if()`

This doesn't mean preprocessors are dead. They still offer:

Mixins for complex reusable patterns
Loops for generating repetitive code
Build-time compilation for zero-runtime overhead

But for many projects, native CSS is now sufficient.

Previous in this series: My Hybrid CSS Approach: Tailwind + Native CSS — Why I use both Tailwind and native CSS.

Next in this series: Why I Hate Using StyleX at Work — A critical look at CSS-in-JS constraints and what to look for in CSS tools.

Resources

Why I Hate Using StyleX at Work

Thu, 29 Jan 2026 00:00:00 GMT

I use StyleX every day at work. And I hate it.

Don't get me wrong—StyleX solves real problems at Meta scale. It powers Facebook, Instagram, WhatsApp, and Threads. The engineering behind it is impressive. But after months of daily use, I've concluded that StyleX is over-engineered for 99% of projects.

This article is my honest critique, along with what I actually look for in CSS tools.

What StyleX Promises

StyleX is Meta's CSS-in-JS solution that compiles to atomic CSS. The pitch is compelling:

No specificity wars: Everything becomes atomic classes
Type safety: Styles defined in TypeScript objects
Zero runtime: Compiles away at build time
Deterministic: No cascade surprises

const styles = stylex.create({
  button: {
    padding: '0.5rem 1rem',
    backgroundColor: '#0066cc',
    color: 'white',
    ':hover': {
      backgroundColor: '#0044aa',
    },
  },
});

export function Button({ children }) {
  return <button {...stylex.props(styles.button)}>{children}</button>;
}

Sounds great, right? Here's where it falls apart.

The Deal-Breakers

No Arbitrary Selectors

StyleX explicitly forbids styling child elements. You cannot write:

// THIS IS NOT ALLOWED IN STYLEX
const styles = stylex.create({
  container: {
    '> p': {
      color: 'blue', // ❌ Forbidden
    },
  },
});

This is a philosophical decision: styling "at a distance" is considered problematic. But in practice, it's crippling.

Real-world example: A form where the last row has no margin-bottom.

In normal CSS:

form > div:last-child {
  margin-bottom: 0;
}

In StyleX, you must create a wrapper component or pass a prop to each element. This adds boilerplate and breaks component abstraction.

StyleX doesn't support:

:first-child, :last-child, :nth-child()
Sibling combinators (+, ~)
Attribute selectors ([data-*])
Many pseudo-elements

These are fundamental CSS features, removed in the name of "static resolvability."

Parent-Child Hover Is a Nightmare

Something as simple as "when the parent is hovered, style the child" becomes a multi-file ordeal:

In CSS:

.parent:hover .child {
  opacity: 1;
  transform: translateY(0);
}

In StyleX, you need to:

Track hover state in React
Pass it as a prop to child components
Apply conditional styles based on that prop

What was one line of CSS becomes 20+ lines of JavaScript boilerplate.

Debugging Hell

StyleX creates atomic classes for every declaration. A simple button generates:

<button class="x1abc x2def x3ghi x4jkl x5mno x6pqr x7stu ...">

In DevTools, finding which class does what is detective work. But it gets worse.

StyleX sometimes generates :not(#\#) selectors as a polyfill for CSS cascade layers. While these gzip well, they make debugging in browser DevTools nearly impossible.

Static-Only Limitations

stylex.create() cannot be used at runtime. All styles must be statically analyzable and compiled away. This means:

No truly dynamic styles based on runtime props
CSS variables are the only escape hatch
You're constantly working around the system

Ecosystem Immaturity

StyleX was open-sourced in December 2023. Compared to mature tools:

Smaller community
Less documentation for edge cases
Fewer IDE plugins and tooling
Limited third-party examples

What I Actually Look for in CSS Tools

After years of using Sass, Less, Stylus, PostCSS, and now StyleX, here's my criteria for evaluating CSS tools:

1. Doesn't Limit Native CSS Features

A good tool should enhance CSS, not restrict it. I want access to:

Container queries
@scope
Native nesting
@property
All selectors (:has(), :nth-child(), sibling combinators)

Any tool that says "you can't use fundamental CSS features" is a red flag.

2. Allows Component Organization

I want to colocate styles with components. Whether that's:

CSS Modules
CSS-in-JS that compiles to static CSS
Scoped CSS files

The key is organization, not runtime overhead.

3. Static CSS at Build Time

Runtime CSS generation (like older styled-components) adds JavaScript overhead. I prefer tools that compile to static CSS:

Zero runtime performance impact
Better caching
Smaller JavaScript bundles

4. Smart Optimization

A great tool should:

Remove unused CSS (tree-shaking)
Deduplicate styles (atomic CSS is fine for this)
Integrate with IDE (autocomplete, type checking)
Generate source maps for debugging

5. Doesn't Require Learning a New Language

This is lower priority, but matters. Features like Sass variables ($color) or loops (@for) were useful when CSS lacked them. Now CSS has:

Native variables (var(--color))
Native nesting
calc() for math

Preprocessor-specific syntax adds cognitive overhead without proportional benefit.

Alternatives That Actually Work

Here are tools I've personally used that meet my criteria:

Linaria: The Better StyleX

If you want the benefits of StyleX (zero-runtime, type-safe, component colocation) without its crippling limitations, Linaria is the answer.

import { css } from '@linaria/core';
import { styled } from '@linaria/react';

// CSS tag for class names
const button = css`
  padding: 0.5rem 1rem;
  background: #0066cc;
  
  &:hover {
    background: #0044aa;
  }
  
  /* Child selectors work! */
  & > .icon {
    margin-right: 0.5rem;
  }
  
  /* :last-child works! */
  &:last-child {
    margin-bottom: 0;
  }
`;

// Styled components syntax
const Container = styled.div`
  display: flex;
  
  /* Parent-child hover - ONE LINE, not 20 */
  &:hover .child {
    opacity: 1;
    transform: translateY(0);
  }
`;

What Linaria gets right:

Feature	StyleX	Linaria
Zero runtime	✅	✅
Type-safe (TypeScript)	✅	✅
Static CSS at build time	✅	✅
Child selectors (`:first-child`, etc.)	❌	✅
Sibling combinators (`+`, `~`)	❌	✅
Parent-child hover patterns	❌	✅
Standard CSS syntax	❌	✅
Easy debugging in DevTools	❌	✅

Linaria compiles to regular CSS files. No atomic class explosion. No :not(#\#) nightmare. Just... CSS.

The trade-off? Linaria doesn't have StyleX's strict architectural constraints. But for 99% of projects, those constraints are the problem, not the solution.

PostCSS

The plugin-based approach. You add only what you need:

Autoprefixer for vendor prefixes
cssnano for minification
postcss-preset-env for future CSS features

PostCSS doesn't limit what CSS you can write—it enhances it.

Lightning CSS

Written in Rust, 100x faster than JavaScript alternatives. It handles:

Vendor prefixing
CSS minification
Modern CSS transpilation
CSS Modules

Built by the Parcel team, it integrates seamlessly with Vite, webpack, and other bundlers. I haven't used it extensively yet, but the performance benchmarks are impressive and it's worth exploring for build-time optimization.

The Classics: Sass, Less, Stylus

I've used all three professionally:

Sass: The most powerful. Excellent for large design systems with complex mixins and functions. The ecosystem is massive.
Less: Bootstrap's choice. Gentler learning curve, closer to vanilla CSS syntax.
Stylus: Most flexible syntax. Great for Node.js projects.

These days, I find myself reaching for them less often because native CSS has caught up. But they're still solid choices if your team is already invested.

The Verdict

StyleX makes sense at Meta scale:

Thousands of engineers
Strict style consistency requirements
Need for guaranteed zero specificity conflicts

For everyone else? The constraints outweigh the benefits.

Use StyleX if:

You're at mega-scale (thousands of developers)
You need guaranteed zero specificity issues
Your team specifically wants strict component styling constraints

Skip StyleX if:

You want to use modern CSS features freely
You need arbitrary selectors (:first-child, sibling combinators)
You value debugging ease over architectural purity
You're a team of fewer than 50 developers

My recommendation for most teams:

Tailwind for rapid styling and consistency
Native CSS for complex selectors and new features
PostCSS for optimization and future CSS support
Linaria if you specifically need CSS-in-JS with zero runtime

The future of CSS isn't about finding the one perfect tool. It's about choosing tools that enhance your workflow without limiting what CSS can do.

Previous in this series: Modern CSS Features You Should Be Using in 2026 — The native CSS capabilities that make many tools unnecessary.

First in this series: My Hybrid CSS Approach: Tailwind + Native CSS — Why I use both Tailwind and native CSS.

Resources

How I Archive Videos and Images from Any Website

Wed, 07 Jan 2026 00:00:00 GMT

A friend and I split the cost of an expensive course on Hotmart. The problem? Only one of us could watch at a time. I needed a way to download the videos so we could both access them whenever we wanted.

After trying several methods (including wrestling with ffmpeg commands that never quite worked), I stumbled upon yt-dlp combined with a Chrome extension called The Stream Detector. This combo changed everything — not just for courses, but for archiving any video content I care about.

Later, when I started a house construction project and needed to download hundreds of inspiration images from Pinterest, I discovered gallery-dl. These two tools have become essential in my media archiving workflow.

yt-dlp: The Video Download Swiss Army Knife

::github{repo="yt-dlp/yt-dlp"}

yt-dlp is a powerful command-line tool that can download videos from YouTube and over 1,000 other platforms. It's a fork of the original youtube-dl with more features and active maintenance.

I started using yt-dlp because ffmpeg commands were too complex and didn't always work. With yt-dlp, downloading is straightforward.

Installation

On macOS, I recommend using Homebrew — it keeps everything updated automatically:

brew install yt-dlp

:::tip[Keep it Updated] Using brew means you can run brew upgrade yt-dlp periodically to get the latest version. This is important because streaming sites change frequently, and yt-dlp updates to match. :::

For other platforms:

# Using pip
pip install -U yt-dlp

# Windows: Download from releases
# https://github.com/yt-dlp/yt-dlp/releases

Basic Usage

Download a YouTube video:

yt-dlp https://www.youtube.com/watch?v=VIDEO_ID

Download best quality:

yt-dlp -f bestvideo+bestaudio https://www.youtube.com/watch?v=VIDEO_ID

Extract audio only (great for music or podcasts):

yt-dlp -x --audio-format mp3 https://www.youtube.com/watch?v=VIDEO_ID

The Stream Detector: My Secret Weapon

Here's where it gets interesting. For platforms like Hotmart (or any course platform), you can't just paste the URL into yt-dlp. The video streams are hidden behind authentication and dynamic URLs.

The Stream Detector is a browser extension that detects media streams on any webpage and generates ready-to-use download commands.

:::tip[Firefox Has More Options] The Firefox version of The Stream Detector has more features. If you're serious about downloading streams, consider using a Firefox-based browser like Zen Browser. :::

My Workflow for Downloading Courses

Here's exactly how I download course videos from platforms like Hotmart:

Open the course in your browser (make sure you're logged in)
Start playing the video you want to download
Click The Stream Detector icon — it will show detected streams
Look for the highest quality option (usually the one with the largest resolution)
Copy the generated command and paste it in your terminal

The extension generates something like:

yt-dlp "https://streaming-platform.com/video.m3u8"

You can add options for better organization:

yt-dlp -o "~/Videos/Course/%(title)s.%(ext)s" "https://streaming-platform.com/video.m3u8"

The Tedious Part (Being Honest)

I won't lie — downloading an entire course is tedious. You have to:

Open each video one by one
Wait for the stream to be detected
Copy and run the command
Potentially rename files to keep them in order

There's no magic "download all" button. But for an expensive course you want to keep forever, it's worth the effort.

:::note[Pro Tip] I usually rename files with a number prefix like 01-introduction.mp4, 02-getting-started.mp4 to keep them organized for later viewing. :::

gallery-dl: For Image Galleries and Collections

::github{repo="mikf/gallery-dl"}

gallery-dl downloads image galleries from over 300 websites including Pinterest, Instagram, DeviantArt, Twitter, and many more.

I discovered this tool while working on a house construction project. I had a massive Pinterest board with hundreds (maybe thousands) of inspiration images — kitchen designs, floor plans, furniture ideas. I needed to download them all to review offline and create a mood board.

Installation

Again, Homebrew is my go-to:

brew install gallery-dl

Or with pip:

pip install -U gallery-dl

The Cookie Trick (This Was My "Aha" Moment)

When I first tried gallery-dl with Pinterest, it barely worked. It only downloaded a few images, and they were all low resolution. Frustrating.

The solution? Use your browser's cookies.

gallery-dl --cookies-from-browser chrome https://www.pinterest.com/username/board-name/

:::important[This Changes Everything] The --cookies-from-browser option lets gallery-dl use your logged-in browser session. This means:

Access to your private boards
Full resolution images
No rate limiting issues
Access to age-restricted content :::

After enabling cookies, gallery-dl downloaded everything in full quality. Game changer.

Supported Browsers

# Use cookies from different browsers
gallery-dl --cookies-from-browser chrome URL
gallery-dl --cookies-from-browser firefox URL
gallery-dl --cookies-from-browser safari URL
gallery-dl --cookies-from-browser brave URL

My Pinterest Workflow

Here's how I downloaded my house inspiration board:

gallery-dl --cookies-from-browser chrome \
  -D ~/Pictures/House-Project \
  https://www.pinterest.com/myusername/house-ideas/

After downloading, I went through the images manually, deleted the ones that didn't fit my vision, and kept the best ones for my mood board. It saved me hours compared to saving images one by one.

A Trip Down Memory Lane

Using gallery-dl reminded me of my university days. Back then, I was obsessed with collecting images — anime wallpapers, character art, references for drawing. I had entire CDs filled with collections.

My "downloading tools" back then were primitive: either saving images one by one, or using sketchy scrapers that would crawl pages and download files based on extension or file size. gallery-dl is the modern, reliable version of what I wished I had back then.

Using yt-dlp with Browser Cookies Too

The cookie trick works for yt-dlp as well. This is useful for:

Age-restricted YouTube videos
Members-only content
Subscription-based platforms

yt-dlp --cookies-from-browser chrome https://www.youtube.com/watch?v=VIDEO_ID

Configuration Files (Optional)

Both tools support configuration files if you want persistent settings. I don't use them personally — this post serves as my reference — but here's how they work:

yt-dlp Configuration

Create ~/.config/yt-dlp/config:

# Default output template
-o ~/Videos/%(uploader)s/%(title)s.%(ext)s

# Always use best quality
-f bestvideo+bestaudio

# Use Chrome cookies by default
--cookies-from-browser chrome

gallery-dl Configuration

Create ~/.config/gallery-dl/config.json:

{
  "extractor": {
    "base-directory": "~/Downloads/gallery-dl",
    "cookies-from-browser": "chrome"
  }
}

Tips I've Learned Along the Way

1. Keep Tools Updated

brew upgrade yt-dlp gallery-dl

Streaming sites change constantly. Updated tools = fewer errors.

2. When Stuck, Ask AI

Both tools have extensive documentation, but it can be overwhelming. What works for me: copy the README into an AI chat and ask how to do something specific.

For example: "I have the gallery-dl README. How do I download only images larger than 1MB?"

3. Firefox/Zen for More Options

The Stream Detector has more features on Firefox. If you're doing this regularly, consider using Zen Browser or Firefox for your downloading sessions.

4. Respect the Content

I use these tools to:

Archive courses I've legitimately purchased
Download my own content and collections
Save things I'm afraid might disappear

Always respect copyright and terms of service.

Quick Reference

yt-dlp Commands

# Basic download
yt-dlp URL

# Best quality
yt-dlp -f bestvideo+bestaudio URL

# Audio only
yt-dlp -x --audio-format mp3 URL

# With cookies
yt-dlp --cookies-from-browser chrome URL

# Custom output path
yt-dlp -o "~/Videos/%(title)s.%(ext)s" URL

gallery-dl Commands

# Basic download
gallery-dl URL

# With browser cookies (recommended)
gallery-dl --cookies-from-browser chrome URL

# Custom output directory
gallery-dl -D ~/Pictures/MyDownloads URL

# With metadata
gallery-dl --write-metadata --cookies-from-browser chrome URL

Troubleshooting

"Unable to extract" errors: Update the tool (brew upgrade yt-dlp)

Low resolution or few images: Use --cookies-from-browser

403 Forbidden errors: Try adding cookies or updating the tool

Slow downloads: Normal for some sites. Be patient.

Conclusion

These two tools have saved me countless hours:

yt-dlp + The Stream Detector: For archiving courses and videos from any platform
gallery-dl + browser cookies: For downloading image collections in full quality

The key insight that took me a while to figure out: always use browser cookies. It solves most authentication and quality issues.

Whether you're archiving educational content you've paid for, saving inspiration for a project, or just building a personal media library, these tools get the job done.