♻️ Reusable classes to the rescue - VSADX/scoped-css GitHub Wiki

Does Scoped CSS mean no more classes?

Kind of, you can use <style class="scoped"> to never have a regular CSS class or CSS file again.

Before we go to the fall right into the opposite extreme, let's take a look at what we didn't like about CSS classes in the first place. There may be a lot of useful cases we're overlooking:

  1. A design that is unique
  2. A design that is linked to the HTML structure

Reusability makes CSS the best

Reusable classes are an excellent use case. Reusable classes should not depend heavily on the HTML structure. Cascading CSS properties like font-size or color are perfect for reusability. Functional CSS classes for specific padding sizes or common layouts can be super semantic for maintaining developers.

What to do?

Let's look at some HTML to try to find the truly "reusable" classes vs CSS that would be more helpful as Scoped CSS.

<div class="card card-style-3">
    <header class="top-style-6">
        <p class="font-alt-serif-2 grey-300"> 
            Welcome back, 
            <strong class="grey-100"> 
                vacation
            </strong>
            it's been too long since we last saw each other!
        </p>
    </header>
    <!-- ... more HTML -->
</div>

The code above uses CSS classes to import some basic reusable styles, but also to point to some CSS to style this unique component. class="card-style-3" was created for this exact HTML structure; it's the perfect candidate for Scoped CSS.

<div class="card">
    <header>
        <p class="font-alt-serif-2"> 
            Welcome back, <strong> vacation </strong>
            it's been too long since we last saw each other!
        </p>

        <style class="scoped">
            \& { ... }
            \& p { color: #555; }
            \& strong { color: #111; }
        </style>

    <header>

    <!-- ... more HTML -->

    <style class="scoped">
        \& { ... }
    </style>
</div>

End notes

  • Some CSS is perfect to keep in easy-to-maintain, reusable classes.
  • Other times, a scoped approach is better.

Scoped CSS makes writing, maintaining, even understanding CSS easier.
Why? Because it is alongside the HTML it was designed to affect.

⚠️ **GitHub.com Fallback** ⚠️