🏖 Spend less time looking for CSS - VSADX/scoped-css GitHub Wiki

No more looking for CSS 🏖

The biggest problem to solve is for web designers who create unique components regularly. You can make beautiful websites this way, but might also end up having long class names spread through many files.

<div class="my-div-p-3">
    <p> Hello world </p>
</div>

This could be the most beautiful CSS design in the world. So what's wrong?

  1. The class is for a unique component, it expects the HTML to always be <div><p></p></div>
  2. This class is going to get lost in our website's CSS, we're going to be scrolling or searching for .my-div-p-3
  3. Media queries don't help our problem at all, responsive design adds more variables to watch out for.

What does Scoped CSS let us do?

We have CSS that expects precise HTML, so let's do it that way!

<div>
    <p> Hello world </p>

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

What's the difference?

  1. The styles are directly beside the HTML
  2. Less CSS is in files that contain actually reusable CSS
  3. If you want to rearrange your HTML, the CSS is right there, you can see how it matches up or not
⚠️ **GitHub.com Fallback** ⚠️