Welcome to the Naked CSS blog
A short introduction to what we'll publish here — design audits, CSS debugging, layout measurement, and a bit of the engineering behind a 80kb Chrome extension.
This is the first post on the Naked CSS blog. It exists mostly to demonstrate that the structure works — but it's also a useful place to set expectations about what we'll publish here over time.
What we'll write about
Three categories, roughly:
- Technique posts — how to use Naked CSS (and Chrome generally) to do specific things: spot inconsistent spacing in a design system, find which CSS variable produced a wrong color, debug a broken flex layout in 30 seconds.
- Positioning posts — what Chrome DevTools doesn't show you about layouts, why design audits stall on screenshot-vs-Figma comparisons, what modern design QA actually looks like.
- Engineering posts — how we keep the extension under 80 kilobytes, how the on-page SVG overlay renders without layout thrashing, what we learned shipping Manifest V3.
If you have a question you'd want answered in any of those categories, open an issue and we'll write the post.
What the markup looks like
This blog uses MDX, so every post can mix Markdown with React. Lists, tables, links, code blocks, blockquotes, and images all render with the site's existing visual style — no separate typography theme.
A few examples:
| Element | When to use it |
|---|---|
<code> inline | for property names like --color-primary-500 |
<pre> block | for short snippets of code in technique posts |
<blockquote> | for a one-line takeaway you want to surface |
The on-device principle still holds: Naked CSS never sends page content anywhere. That includes anything you screencap for a blog post.
Code blocks look like this:
// Press Cmd+I, click an element, hover another.
// The pixel distance renders directly on the page.
function getDistance(a: Element, b: Element) {
const ra = a.getBoundingClientRect();
const rb = b.getBoundingClientRect();
return {
horizontal: rb.left - ra.right,
vertical: rb.top - ra.bottom,
};
}
How to follow along
We'll publish roughly one post a month. The blog index lists everything in reverse-chronological order, and you can always find the source for the extension on GitHub.
Thanks for being here. The next post is coming soon.