# 🌘 CSS Scope Inline
(Art by [shahabalizadeh](https://www.artstation.com/artwork/zDgdd))
## Why does this exist?
* You want an easy inline vanilla CSS experience without Tailwind CSS.
* Hate creating unique class names over.. and over.. to use once.
* You want to co-locate your styles for ⚡️ [Locality of Behavior (LoB)](https://htmx.org/essays/locality-of-behaviour/)
* You wish `this` would work in `
```
See the [Live Example](https://gnat.github.io/css-scope-inline/example.html)! Then [view source](https://github.com/gnat/css-scope-inline/blob/main/example.html).
## 🌘 How does it work?
This uses `MutationObserver` to monitor the DOM, and the moment a `
red
green
green
green
yellow
blue
green
green
red
green
green
green
yellow
blue
green
green
```
### CSS variables and child elements
At first glance, **Tailwind Example 2** looks very promising! Exciting ...but:
* 🔴 **Every child style requires an explicit selector.**
* Tailwinds' shorthand advantages sadly disappear.
* Any more child styles added in Tailwind will become longer than vanilla CSS.
* This limited example is the best case scenario for Tailwind.
* 🔴 Not visible on github: **no highlighting for properties and units** begins to be painful.
```html
```
## 🔎 Technical FAQ
* Why do you use `querySelectorAll()` and not just process the `MutationObserver` results directly?
* This was indeed the original design; it will work well up until you begin recieving subtrees (ex: DOM swaps with [htmx](https://htmx.org), ajax, jquery, etc.) which requires walking all subtree elements to ensure we do not miss a `