dimal Posts - Answer Overflow

dimal

•Created by dimal on 3/24/2025 in #front-end

Suggestions for a customizable React component library for someone who actually likes CSS?

I've been doing CSS for forever and built design systems, but I have an idea for a product that I want to build quickly and not deal with all of that stuff for V1. But I know that I'm going to want to customize some things. It's inevitable. So I'm looking for a component library that can get me up and running quickly but gives me some options for customizing styles or composing with custom components. My preferred way of styling is with CSS Modules. No Tailwind or CSS-in-JS. The best options I've found so far look like PrimeReact and Mantine, but I'm wondering if there are any other options that I'm missing, or if anyone has experience with trying to work this way. I feel like I've seen other newer options in the past year or so, but I can't remember the names of any of them.

2 replies

KPCKevin Powell - Community

•Created by dimal on 9/14/2024 in #front-end

How to achieve BEM / CSS Module type scoping with @scope

I'm trying to wrap my head around how @scope works and specifically how to implement parent/child scoping like in BEM or CSS Modules, where you can write styles that apply to a component that won't bleed into any child components. I thought that's what to was for, but it seems like it doesn't always do what I'd hoped. This works as expected. "Outer Text" is red. "Inner Text" is black.

  <style>
  @scope (.outer) to (.child) {
    .text {
      color: red;
    }
  }
  </style>
  
  <div class="outer">
    <div class="text">Outer Text</div>

    <div class="child">
      <div class="text">Inner Text</div>
    </div>
  </div>

  <style>
  @scope (.outer) to (.child) {
    .text {
      color: red;
    }
  }
  </style>
  
  <div class="outer">
    <div class="text">Outer Text</div>

    <div class="child">
      <div class="text">Inner Text</div>
    </div>
  </div>

But this doesn't do what I'd expect. Both "Outer Text 2" and "Inner Text 2" are purple.

  <style>
  @scope (.outer-2) to (.inner-2) {
    :scope {
      color: purple;
    }
  }
  </style>
  
  <div class="outer-2">
    Outer Text 2

    <div class="inner-2">Inner Text 2</div>
  </div>

  <style>
  @scope (.outer-2) to (.inner-2) {
    :scope {
      color: purple;
    }
  }
  </style>
  
  <div class="outer-2">
    Outer Text 2

    <div class="inner-2">Inner Text 2</div>
  </div>

Am I missing something here? According to the spec it seems like :scope should not include .inner-2?
https://drafts.csswg.org/css-cascade-6/#example-f310c4e4

3 replies

Gaming

Programming