So what does "scoped CSS" mean?
<body>
<section>
<h1>
<small> Is there a <em> good </em> alternative to CSS frameworks? </small>
Examining Scoped CSS
</h1>
<style class="scoped">
/* this targets the <small> inside the <section> */
\& small {
display: block;
font-size: .5em;
opacity: .5;
}
/* this targets the <h1> inside the <section> */
\& h1 { font-size: 6em; }
</style>
</section>It means easier to create + maintain CSS.
<!-- ... here is another <section> in the document. this one *won't* be affected
by the style element we saw earlier. `<style class="scoped">` can only see
its exact parent + all its parent's children. -->
<section>
<h2>
<small> Did you know? </small>
Nearly <em> all </em> web frameworks have a version of scoped CSS.
</h2>
</section>
</body>🌌 What is scoped CSS?
It's a <style> element, inside your HTML file.
🌄 What does it do?
Scoped CSS let's you add CSS to a specific group of elements.
You can copy, paste, or modify that group of elements - it won't ever
clash style rules or break! Scoped CSS is safe, but also super fast
to write or edit in the future.
🌆 How does it work?
The JavaScript library will replace \& in your CSS using a unique id for the
parent HTML element of the <style> element. The id prevents your CSS rules
from "bleeding" to other elements on your page.
You can reuse your elements just by copying the scoped style element (including
parent element), then pasting it where you want.
<script src="https://cdn.jsdelivr.net/gh/VSADX/scoped-css@main/scoped-css.js" type="module"></script>See how Scoped CSS works in practice, how we use it, how you may want to use it!
- Here's how you use scoped CSS. Add
class="scoped"to your<style>element. - Then use
\&for all the CSS rules that you want to be scoped.
<header>
<style class="scoped">
\& p a {
color: blue;
}
\& nav a {
color: green;
}
</style>
<p><a> Drawing Straws Art Studio </a></p>
<nav>
<a> Home </a> <a> About </a> <a> Contact </a> <a> Get Hired </a>
</nav>
</header>
<aside>
<h2> Our Socials </h2>
<!-- these "nav a" won't be green, since we used Scoped CSS earlier. -->
<nav>
<a> Instagram </a> <a> Facebook </a> <a> Twitter </a> <a> YouTube </a>
</nav>
</aside>