Cascading Style Sheets

My CSS Hacks

• GitHub - btbytes/natty.css: all natural css; Aug 2025
• webgarden — The idea behind these pages is that they are “semantic HTML” pages with no extra div or CSSclass, and see how we can markup “plain” HTML pages to look good/different.
• Semantic CSS for Pandoc — same idea but applied to HTML generated by pandoc, and also pandoc+missing.
• zettelake.surge.sh — css experiments that started with zettelkasten and index, but also includes some visualization experiments involving card DAGs. July-Aug 2025
• the-monotyper-manifesto; July-Aug 2025

Learn

• The CSS Cascade Or, How browsers resolve competing CSS styles.
• Modern CSS Explained For Dinosaurs – Actualize – Medium; Feb 2018 (refers to BEM etc.,).
• CSS Variables [Mar 2018]
• 30 CSS Selectors
• 30 Seconds of CSS - “A curated collection of useful CSS snippets you can understand in 30 seconds or less.”; HN
• BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. Uses naming convention.
• CSS Grid Track Options | Geddski

Learning CSS by playing

• My own Web Garden
• Grid Garden - A game for learning CSS grid
• Flexbox Froggy - A game for learning CSS flexbox
• Flexbox Defense
• CSS Diner - Where we feast on CSS Selectors!

Frameworks

• Libraries — Lighten the Web

There are lightweight alternatives to commonly-used libraries. Some do away with compatibility with old browsers, some are less bloated, and some just do less.

• bulma — A modern CSS framework based on Flexbox
• Picnic CSS ; this is very clean.
• U.S. Web Design Standards is very thorough and nicely done.
• Spectre.css - a Lightweight, Responsive and Modern CSS Framework. Use sprecre-css, a maintained fork instead.
• NES.css - NES-style CSS Framework
• Vanilla documentation ChatGPT recommended this framework when I asked for css frameworks similar to Bulma. This is from Ubuntu, the linux vendor. Looks extensive, and well used for large sites producing lots of text-y documentation. css-framework
• Duet Design System

Functional CSS

Programming history leading resulting in “functional” CSS — CSS Utility Classes and “Separation of Concerns”

In defense of Functional CSS | Mike Crittenden’s Blog

Functional CSS frameworks

• TACHYONS - Css Toolkit is a “functional CSS” framework. looks very low-level. composable things. Probabaly not suitable for quick and easy copy-pasting.
• Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development. See Tailwind Builder via HN . See tailwind
• Basscss

Javascript

StyleX is a JavaScript syntax and compiler for styling web apps.

StyleX combines the strengths and avoids the weaknesses of both inline styles and static CSS. Defining and using styles requires only local knowledge within a component, and avoids specificity issues while retaining features like Media Queries. StyleX builds optimized styles using collision-free atomic CSS which is superior to what could be authored and maintained by hand.

Tools

• CSS Grid Layout Interface Builder | LayoutIt! .

• stylelint — “A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.”

CSS Variables

• Pollen is a highly configurable, responsive library of style-agnostic CSS variables for your next design system.
• Utopia an approach to Fluid Responsive Design. Youtube Video
• Open Props: sub-atomic styles

Colors

OKLCH Color Picker & Converter; OKLCH in CSS: why we moved from RGB and HSL

Typography

use Modern Font Stacks — use the System font stack “The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.”

Markdown

ReMarkdown — HTML that looks like Markdown text

Flexbox

• Holy Grail Layout — Solved by Flexbox — Cleaner, hack-free CSS
• From “Modern CSS explined for dinosaurs”

Semantic css

My favorites in particular order are: water.css, pico.css, mvp, though matcha looks excellent (May 2024), and I’m going to try it going forward.

• matcha.css | Drop-in semantic styling library in pure CSS; the site also has a “preview website” feature - which, given a URL, will apply the semantic CSS and let you preview the site. It also has a custom build feature that allows you to select exactly which elements you want to apply these styles + customize colors. Excellent library and website!
• missing.css — The goal of missing.css is to reduce needed intervention in HTML. It lets authors
  • start with a good out-of-the-box experience,
  • customize it easily, even create multiple themes,
  • build common components using plain, semantic HTML,
  • create unique sites by applying utility classes as needed.
• Carpetsmoker/hello-css: A CSS template focused on readability
• Water.css — is a just-add-css collection of styles to make simple websites like this just a little bit nicer..

• CSS Bed is a collection of “classless css themes” to use as starting points in web development.
• tacit
• Basic.css - Classless CSS Starter File — Carrer Blog: Don’t use CSS Reset use CSS Set
• Pico CSS • Minimal CSS Framework for semantic HTML
• Simple.css Simple.css is mostly classless, which means that you can integrate Simple.css with plain HTML and your site will look great.

• Writ; ref page — too bare bones, I recommend ones above.
• swyxio/spark-joy a list of semantic, and minimal CSS frameworks.

Minimal CSS

• Comparison of “Drop-in Minimal CSS”. “Dropin-minimal-CSS”
• 58 bytes of css to look great nearly everywhere — main {max-width: 38rem;padding: 2rem;margin: auto;}
• Element CSS
• ungrid - the simplest responsive css grid (58 bytes). @media (min-width: 30em) {.row { width: 100%; display: table; table-layout: fixed; }.col { display: table-cell; }}
• MVP.css - Minimalist stylesheet for HTML elements
• PaperCSS • the less formal CSS framework Kind of a hand drawn look to it.
• Terminal CSS
• Simple.css - A classless CSS framework
• Bolt CSS Basic styles for HTML Elements. Providing a mostly-reasonable set of styles without classes.

Javascript styling system

StyleX “JavaScript syntax and compiler for styling web apps.” by Meta.

StyleX combines the strengths and avoids the weaknesses of both inline styles and static CSS. Defining and using styles requires only local knowledge within a component, and avoids specificity issues while retaining features like Media Queries. StyleX builds optimized styles using collision-free atomic CSS which is superior to what could be authored and maintained by hand.

Cool stuff / experiments

• Chinese Window Lattice And CSS
• The Simpsons in CSS
• All monospace-web; Final output; some more monospace pages
• CSS Holographic Masks inspired by Holograms, light-leaks and how to build CSS-only shaders - Robb Owen

Classic CSS

• The Sinorcaish Stylesheet the original inspiration for www.btbytes.com as you can see from the Archive Page

Good CSS examples

• Good layout for reading text from sapiens.org

Tips and tricks

• Hardest Problem in Computer Science: Centering Things @ tonsky.me

Typographic CSS

Introducing TODS – a typographic and OpenType default stylesheet | Clagnut by Richard Rutter