nikhil.io

Here’s a cheatsheet for common things. Amazing stuff you can do these days with just CSS.

Plenty of good stuff on there but this totally blew my mind. Consider this custom tag (should be lowercased and contain hyphens. Emojis are allowed!):

<cool-thing shadow>wow</cool-thing>

and this valid CSS:

cool-thing {
    display: flex;

    &[shadow] {
        box-shadow: 1px 1px #0007;
    }

    @media (screen < 480px) {
        flex-direction: column;
    }
}

The only thing missing from my beloved SASS are mixins but I suppose you can achieve that by composing attributes (like shadow above). Super cool.

Here’s a lovely noise generator, for example.