---
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 and :scope](https://cdn.sanity.io/images/cyu7k2r0/production/e35d80bae44f76f263bc4486ee86a783bb5386b9-1536x1024.png?blur=30&q=100&auto=format)

# Scoped CSS Per Module: Styling with @scope

![Mitchell Christ](https://cdn.sanity.io/images/cyu7k2r0/production/26bddd620298806d202e516a4078eab89dc8117a-1254x1254.png?q=100&auto=format)

By Mitchell Christ

* [Changelog](https://sanitypress.dev/blog?category=changelog),
* [Web Dev](https://sanitypress.dev/blog?category=web-dev)
Jun 1, 20262 min read

On this page
1. [The old way](#the-old-way)
2. [The new way](#the-new-way)
3. [How @scope and :scope work](#how-scope-and-scope-work)
4. [For developers: the new <Module> component](#for-developers-the-new-module-component)
5. [Updated /new-module skill](#updated-new-module-skill)

### Ready to build your next website with SanityPress?

[🚀 Get started today](https://sanitypress.dev/docs/getting-started)

![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?rect=67,67,1402,909&q=100&auto=format)

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.

* Custom HTML module

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

  h2 {
	font-size: 3rem;
  }
}
```

## The new way

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

* Scoped CSS field per module

```
:scope {
  background: black;
  color: white;
}

h2 {
  font-size: 3rem;
}
```

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?q=100&auto=format)

New Scoped CSS field under module attributes in the Sanity Studio

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

The [@scope](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@scope) at-rule 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:

* Before

```
import { moduleAttributes } from '.'

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

* After

```
import { Module } from '.'

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

`<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](https://sanitypress.dev/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?q=100&auto=format)

1. [Home](https://sanitypress.dev/)
2. [Blog](https://sanitypress.dev/blog)
3. Scoped CSS Per Module: Styling with @scope

## Stop Scaffolding. Start Shipping.

[🚀 Start building](https://sanitypress.dev/docs/getting-started)[⭐ Star on GitHub](https://sanitypress.dev/repo)