cohost css reuse via inheritance

cohost only supports inline styles, hence the need for tooling like prechoster, but code reuse is still possible thanks to the ‘all’ and ‘display’ properties. this can make hand-writing chosts easier, and it could potentially even help reduce the size of generated chosts? here’s how:

1. wrap related elements in <div style="/* common */; display: contents;">
2. move their common styles to /* common */ in that wrapper element
3. prepend all: inherit; display: /* something */; to each of their styles

these wrappers can be nested, though for inner wrappers you can use <div style="all: inherit; /* common */"> to save a few characters. for example:

<div style="position: relative; height: 8em;">
    <div style="width: 2em; height: 2em; position: absolute; justify-content: center; color: #fff9f2; background: #83254f; display: contents;">
        <div style="all: inherit; display: flex; inset: 1em 0 0 1em;">e</div>
        <div style="all: inherit; display: flex; inset: 3em 0 0 3em;">g</div>
        <div style="all: inherit; display: flex; inset: 5em 0 0 5em;">g</div>
        <div style="all: inherit; background: #e56b6f;">
            <div style="all: inherit; display: flex; inset: 1em 0 0 4em;">b</div>
            <div style="all: inherit; display: flex; inset: 3em 0 0 6em;">u</div>
            <div style="all: inherit; display: flex; inset: 5em 0 0 8em;">g</div>
        </div>
    </div>
</div>