Inlining the stylesheet

A linked stylesheet costs a second request before the browser can paint anything. On a site whose CSS is a handful of kilobytes, that round trip is a larger share of the wait than the bytes themselves, so the stylesheet goes into the document.

The trade is real and worth stating plainly: a repeat visitor downloads the CSS again on every page, because it is no longer a cacheable file with a name of its own. Seven pages of this site each carry the same twelve kilobytes.

The trap is escaping. A templating layer escapes text children, which is correct for markup and wrong for CSS: an escaped child combinator becomes an entity and the rule stops matching. CSS is not markup, and this is the one place the usual rule inverts.