---
title: "Scoped CSS Per Module: Styling with @scope and :scope"
description: "Every module now has a Scoped CSS field. Write CSS scoped to a single module with native @scope and :scope."
---

# Scoped CSS Per Module: Styling with @scope

![black/white low-res military footage of a crosshair scope, capturing an alien silhouette holding the text "<MODULE>"](https://cdn.sanity.io/images/cyu7k2r0/production/4f656fc9a1d22cd9c527682366c88c0db956da18-1536x1024.png)

Every module now ships with a **Scoped CSS** field in its **Attributes** group. Drop CSS straight onto any module and it applies to that module only, with no separate **custom-html** module, no UID juggling.

## The old way

To style any specific module on a page, adding a **custom-html** module was the way go, setting a **UID** on the target module (which becomes its HTML `id` attribute), then hanging your declarations off that id selector. It worked, but it was fragile: rename the UID and the styles silently detach.

```css
#my-uid  
  background: black;
  color: white;

  h2  
	font-size: 3rem;
```

_Filename: Custom HTML module_

## The new way

Paste your CSS directly into the module's **Scoped CSS** field. Use `:scope` to target the module's root element:

```css
:scope  
  background: black;
  color: white;
 

h2  
  font-size: 3rem;
```

_Filename: Scoped CSS field per module_

Behind the scenes, your CSS is wrapped in an `@scope` ... block, so the selectors only ever match elements inside that one module. No id selector required. Notice how nesting is not needed here; modern CSS knows selectors are scoped to within the root element.

Here’s how it looks in the Sanity Studio:

![New Scoped CSS field under module attributes in the Sanity Studio](https://cdn.sanity.io/images/cyu7k2r0/production/ebc976c3e4bcc4dae715b37d27327b40c61ae537-2262x2154.png)

## How `@scope` and `:scope` work

The [`@scope` at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope) limits a set of style rules to a subtree of the DOM, and `:scope` selects that subtree's root element, in most cases it’s the module's `<section>`.

Both are now [Baseline across all major browsers](https://caniuse.com/?search=%40scope) so you can reach for it without fallbacks.

## For developers: the new `<Module>` component

This shipped with a new `<Module>` wrapper that replaces the old `moduleAttributes(props)` spread. Module components no longer manage their own root element:

```tsx
import   moduleAttributes   from '.'

<section className="section"  ...moduleAttributes(props) >
   /* … */ 
</section>
```

_Filename: Before_

```tsx
import   Module   from '.'

<Module className="section"  {...props} >
   /* … */ 
</Module>
```

_Filename: After_

`<Module>` wires up `id`, `data-module` and `hidden` and injects the scoped `<style>` tag for you. It renders a `<section>` by default. Pass `as="nav"` (etc.) when you need a different root element.

## Updated `/new-module` skill

The `/new-module` scaffolding skill now generates `<Module>`-based components out of the box, so every new module gets scoped-CSS support for free.

## 🚀 Ready to try it?

Add a Scoped CSS field to your next module and start building with the [**getting-started guide**](/docs/getting-started).

![clear context. create a technicolor style film still of Ultraman with black and silver color scheme (instead of red). he's doing his signature beam ray, but it depicts the letters "SCOPE" within the beam](https://cdn.sanity.io/images/cyu7k2r0/production/e35d80bae44f76f263bc4486ee86a783bb5386b9-1536x1024.png)