answerdotai/css-scope-inline

CSS Scope Inline lets you write CSS styles directly inside the HTML elements they affect, without worrying about your styles leaking out and changing other parts of your page. Normally, if you put a <style> tag on your page, those rules apply everywhere. This tiny script, just 16 lines of code, automatically restricts your styles to only the surrounding element and its children. You write me { background: red, } and only that container turns red. Under the hood, the script uses a browser feature called a MutationObserver, which watches the page for changes. The moment it spots a <style> tag, it rewrites the styles so they only apply to the parent element. This happens instantly, so there is no flash of unstyled content. Because it watches for changes, it also works well with dynamic content, like when new HTML is swapped in via tools like htmx, without missing any new style tags. This tool is for web developers who are tired of the overhead that comes with mainstream CSS frameworks like Tailwind. If you have ever been frustrated by repeating long class names on every child element, or you dislike needing a build step just to style a page, this offers a simpler alternative. You get the convenience of scoping styles locally, keeping the markup and its styles in one place, while still using standard, vanilla CSS that any browser understands without special tooling. The project is built to be as minimal and dependency-free as possible. There is no build step, no npm packages to install, and no risk of the tool itself becoming deprecated or sunsetted. You just paste the script into your page and it works. The main tradeoff is that it does add a small amount of JavaScript processing to watch the page, though the author notes they optimized this scanning to keep performance impact low.