Component-based CSS

There are a lot of CSS "solutions" out there. They generally act to solve a broad range of problems, none of which actually exist outside their authors' bubble. Let me take you by the mitten and show you how I like to style components. Here's "semantic-component-name.html": <section class="semantic-component-name-here"> <form> <fieldset> <legend>Robin Hood</legend> <!-- etc... --> </fieldset> <fieldset> <legend>King Arthur</legend> <!-- etc... --> </fieldset> <input type="submit" value="Update history"> </form> <p class="disclaimer"> None of these people are what you think they are. </p> </section> and "semantic-component-name.css": .semantic-component-name-here { /* Put everything in here... */ legend { color: var(--heading-color); font-size: 1.5rem; } .disclaimer { color: var(--ethically-dubious-color, #ccc); } /* that's it. You're done. */ } Your component, which has a distinct cont