For some "web developers", this is literally how they create a page:

    import React from 'react';
    
    function App() {
        return (
            <div>
                <h1>Hello world!</h1>
                <p>This is my HTML page.</p>
            </div>
        );
    }
    
    export default App;

But global-ness is what you want from design directives. You want all your buttons to look the same, your links consistent. You want to define your base fonts once and then not have to worry about it for the rest of the build. You want to have your vertical rhythm (line spacing) repeated on most pages. You want most pages to have the same background and foreground colours. CSS syntax gives you all that for free.

Giving multiple elements the same border definitions is easy:

    elem,
    another-elem,
    .some-class,
    #just-this-one {
        border: whatever;
        background: swoosh;
    }

I accept that managing things like the shared border example can get fiddly. SASS made it easier; some flavour of react-plus-css-helper-library thing can make it easier, kinda, if you squint. But it's actually _very_ simple to write the basic core idea in plain CSS. Personally, I feel that the discipline required to manage larger CSS codebases isn't that different than the discipline required to write good JS or TS; we just have a habit of pretending we shouldn't need to do that and wishing someone else would (via a library, or changing the standards). I don't know why we're happy doing it in JS or TS, but not CSS.

<svg><path d=“” fill=“currentColor” /></svg>

element { color: hsl(0 0% 0%) }

One advantage is that you can target the parent element and the SVG will change automatically.

You can also create multiple “shades” by having currentColor on multiple paths with different opacity.

Which, to be fair, is a pretty high cost. The consistency of the greys that only differentiate on hover is half the aesthetic value of the effect.

> ..., or an always-on transparent border that only changes colour when you hover – but those can interfere with other CSS rules

Next week: How to run your Docker React Node Babel Webpack Svelte grocery list application at the EDGE using Kubernetes on AWS serverless EC2 instances with Cloudflare workers.

EDIT: I forgot we're gonna use Bootstrap too.