{"repo":"gnat/css-scope-inline","free":true,"listed":false,"github":"https://github.com/gnat/css-scope-inline","clone":"git clone https://github.com/gnat/css-scope-inline.git","description":"🌘 Scope your inline style tags in pure vanilla CSS! Only 16 lines. No build. No dependencies.","language":"HTML","stars":693,"topics":["css","dom","frontend","html","inline","inline-css","inline-styles","lob","locality-of-behavior","scoped-css"],"license":"MIT","category":"ui-components","readme_excerpt":"🌘 CSS Scope Inline (Art by shahabalizadeh) 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) You wish this would work in tags. Want all CSS features: Nesting, animations. Get scoped @keyframes ! You wish @media queries were shorter for responsive design. Only 16 lines. No build step. No dependencies. Pairs well with htmx and Surreal Want fewer layers, less complexity. Are aware of the cargo cult. ✈️ ✨ Want to also scope your tags? See our companion project Surreal 👁️ How does it look? See the Live Example! Then view source. 🌘 How does it work? This uses MutationObserver to monitor the DOM, and the moment a tag is seen, it scopes the styles to whatever the parent element is. No flashing or popping. This leaves your existing styles untouched. Mix in scoped at your leisure. 🎁 Install ✂️ copy + 📋 paste the snippet into in your Or, 📥 download into your project, and add in your Or, 🌐 CDN: 🤔 Why consider this over Tailwind CSS? Use whatever you'd like, but there's a few advantages with this approach over Tailwind, Twind, UnoCSS: No repeat styles on child elements (no more @apply, no [& thing] ). No repeat prefixes for media queries, hover, focus, etc. No visual noise on every . Use on groups of elements. Share real CSS between inline and .css files. Just replace me Regain your \"inspect + edit styles + paste\"","default_branch":null,"files":null,"tree":[],"storefront":"/r/gnat","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/gnat/css-scope-inline/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}