# `MishkaCmsCore.Runtime.PageBuilder.Classes`
[🔗](https://github.com/mishka-group/mishka_cms_core/blob/v0.0.1/lib/mishka_cms_core/runtime/page_builder/classes.ex#L5)

Named styles a site can reuse — style once, apply to twenty elements, change it in one place.

## Why this is not the style panel

The inspector writes utilities ONTO an element. That is right for the one card that needs to be a
little wider, and wrong for the twenty cards that are meant to look the same: making them match
means repeating yourself twenty times, and changing them means finding all twenty again. What
Bricks calls a global class is the missing half — a name you can put on many elements, holding the
styling they share.

## What one compiles to

A class is a name and a list of Tailwind utilities. All of a site's classes are written into ONE
stylesheet row the CMS owns, regenerated whole on every change:

    @layer components {
      .card-shell { @apply rounded-xl bg-white p-6; }
    }

Two decisions in that snippet, both load-bearing:

  * `@apply`, so a class is written in the same vocabulary as everything else in this editor. The
    row is `:custom`, which `MishkaCmsCore.Runtime.Compilers.TailwindCompiler` appends INTO the
    source Tailwind processes — not after it — so `@apply` resolves.
  * `@layer components`, so a per-element utility still wins. Without the layer, source order
    decides: the row is appended last, and `.card-shell`'s padding would quietly beat the `p-8`
    an author put on one card to make it the exception.

## One row, rewritten whole

Not one row per class. A stylesheet row is a compile input and a versioned record; twenty of them
for twenty classes would be twenty recompiles and twenty histories of something nobody thinks of
as a document. The row is found by its reserved name, so it is recognisable in the Stylesheets
admin — and editable there, at the cost of being rewritten the next time a class changes here.

# `all`

```elixir
@spec all(map() | nil, String.t() | nil) :: [
  %{name: String.t(), utilities: String.t()}
]
```

Every class this site has, newest last, as `%{name:, utilities:}`.

Read back out of the compiled row rather than kept anywhere else: the stylesheet IS the record, so
a class edited by hand on the Stylesheets page is still a class here.

# `css`

```elixir
@spec css([map()]) :: String.t()
```

The CSS for a set of classes.

Public because it is the whole contract with the compiler, and the one thing worth reading to
understand what a class becomes.

# `delete`

```elixir
@spec delete(map() | nil, String.t() | nil, String.t()) ::
  {:ok, [map()]} | {:error, term()}
```

Removes a class. The elements carrying it keep the name and simply stop being styled by it.

# `put`

```elixir
@spec put(map() | nil, String.t() | nil, String.t(), String.t()) ::
  {:ok, [map()]} | {:error, term()}
```

Adds a class or rewrites one, by name.

A name has to be a plain CSS class — lowercase, digits and dashes — because it is written straight
into a stylesheet, and because `.my class` and `.my<script>` are the two ways that goes wrong.
Empty utilities delete the class rather than leaving a rule that does nothing. The class is
compiled before it is stored, so what comes back on a typo is Tailwind's own sentence about it.

# `row_name`

```elixir
@spec row_name() :: String.t()
```

The reserved stylesheet row all of a site's reusable classes live in.

---

*Consult [api-reference.md](api-reference.md) for complete listing*