--- title: CSS-in-JS in 200 bytes | daily.dev description: A walkthrough of building a minimal CSS-in-JS library from scratch, ending in a ~200 byte implementation. Covers the pros and cons of CSS-in-JS, then... canonical: https://daily.dev/posts/css-in-js-in-200-bytes-ps09iufm7 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS-in-JS in 200 bytes | daily.dev og:description: A walkthrough of building a minimal CSS-in-JS library from scratch, ending in a ~200 byte implementation. Covers the pros and cons of CSS-in-JS, then... og:url: https://daily.dev/posts/css-in-js-in-200-bytes-ps09iufm7 og:image: https://api.daily.dev/og/posts/PS09iUFM7.png og:image:alt: CSS-in-JS in 200 bytes og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # CSS-in-JS in 200 bytes **[zserge's blog](https://daily.dev/sources/zserge)** · 5 min read · 0 upvotes · 0 comments ## Summary A walkthrough of building a minimal CSS-in-JS library from scratch, ending in a ~200 byte implementation. Covers the pros and cons of CSS-in-JS, then incrementally builds a runtime style injector using tagged template literals, ampersand-based scoping (similar to Less/SASS), and automatic implicit CSS block wrapping, culminating in a tiny minified snippet called zercss capable of handling media queries, keyframes, and multiple selectors. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How can I build a minimal CSS-in-JS library without a build step? Create a style element, inject it into the document head, and use a tagged template literal function that generates a unique class name per call, replaces ampersand characters with that class selector, and appends the resulting CSS text to the style element's textContent. Ampersands not found trigger an implicit wrap of the block into a single class rule. This approach requires no bundler plugin or build step and compresses to roughly 200 bytes minified. _Developers weighing lightweight CSS-in-JS approaches can compare tradeoffs and tutorials on daily.dev._ ### How do you scope CSS class names dynamically in JavaScript without a CSS-in-JS framework like styled-components? Generate a unique incrementing id (like 'z1', 'z2') each time a styling function runs, then wrap the provided CSS string in a rule using that id as the class selector, appending it to a shared style tag and returning the id string to apply as a className. Using an ampersand placeholder inside the template lets you target pseudo-selectors like hover or nested elements explicitly. _For those comparing scoped styling techniques, daily.dev surfaces practical CSS-in-JS implementation approaches._ ## Similar posts on daily.dev - [CSS-in-JS: The Great Betrayal of Frontend Sanity](https://daily.dev/posts/css-in-js-the-great-betrayal-of-frontend-sanity-yltrsmn2c) · The New Stack · 0 upvotes · 0 comments - [Stop Using JS for Everything: Harnessing the Power of Pure CSS in 2026](https://daily.dev/posts/stop-using-js-for-everything-harnessing-the-power-of-pure-css-in-2026-jql9shws1) · Ruby Flow · 6 upvotes · 0 comments - [StyleX: A Styling Library for CSS at Scale](https://daily.dev/posts/stylex-a-styling-library-for-css-at-scale-8rztohp6s) · Facebook Engineering · 110 upvotes · 7 comments - [Vanilla CSS is all you need](https://daily.dev/posts/vanilla-css-is-all-you-need-yaq77f62e) · Lobsters · 212 upvotes · 15 comments - [Static Extraction in CSS-in-JS for Efficiency in React Apps](https://daily.dev/posts/static-extraction-in-css-in-js-for-efficiency-in-react-apps-5kkh66dnn) · Telerik · 0 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/css-in-js-in-200-bytes-ps09iufm7) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"CSS-in-JS in 200 bytes","url":"https://daily.dev/posts/css-in-js-in-200-bytes-ps09iufm7","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-in-js-in-200-bytes-ps09iufm7"},"datePublished":"2026-08-23T10:20:14.512Z","dateModified":"2026-08-23T10:20:46.248Z","description":"A walkthrough of building a minimal CSS-in-JS library from scratch, ending in a ~200 byte implementation. Covers the pros and cons of CSS-in-JS, then...","image":"https://media.daily.dev/image/upload/s--HRgLpUt6--/f_auto/v1722860399/public/Placeholder%2003","thumbnailUrl":"https://media.daily.dev/image/upload/s--HRgLpUt6--/f_auto/v1722860399/public/Placeholder%2003","isAccessibleForFree":true,"articleSection":"zserge's blog","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"zserge's blog","logo":"https://media.daily.dev/image/upload/s--KQnFBOIT--/f_auto,q_auto/v1787480407/logos/zserge","url":"https://daily.dev/sources/zserge"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/css-in-js-in-200-bytes-ps09iufm7","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,css","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"zserge's blog","item":"https://daily.dev/sources/zserge"},{"@type":"ListItem","position":3,"name":"CSS-in-JS in 200 bytes"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/css-in-js-in-200-bytes-ps09iufm7#faq","mainEntity":[{"@type":"Question","name":"How can I build a minimal CSS-in-JS library without a build step?","acceptedAnswer":{"@type":"Answer","text":"Create a style element, inject it into the document head, and use a tagged template literal function that generates a unique class name per call, replaces ampersand characters with that class selector, and appends the resulting CSS text to the style element's textContent. Ampersands not found trigger an implicit wrap of the block into a single class rule. This approach requires no bundler plugin or build step and compresses to roughly 200 bytes minified. Developers weighing lightweight CSS-in-JS approaches can compare tradeoffs and tutorials on daily.dev."}},{"@type":"Question","name":"How do you scope CSS class names dynamically in JavaScript without a CSS-in-JS framework like styled-components?","acceptedAnswer":{"@type":"Answer","text":"Generate a unique incrementing id (like 'z1', 'z2') each time a styling function runs, then wrap the provided CSS string in a rule using that id as the class selector, appending it to a shared style tag and returning the id string to apply as a className. Using an ampersand placeholder inside the template lets you target pseudo-selectors like hover or nested elements explicitly. For those comparing scoped styling techniques, daily.dev surfaces practical CSS-in-JS implementation approaches."}}]} ```