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
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.
- NES.css - NES-style CSS Framework
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
-
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
Colors
OKLCH Color Picker & Converter; OKLCH in CSS: why we moved from RGB and HSL
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
Typographic CSS
Introducing TODS – a typographic and OpenType default stylesheet | Clagnut by Richard Rutter