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:
- wrap related elements in
<div style="/* common */; display: contents;">
- move their common styles to
/* common */ in that wrapper element
- 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>
