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
- 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.
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
Tools
-
stylelint – “A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.”
Flexbox
- Holy Grail Layout — Solved by Flexbox — Cleaner, hack-free CSS
- From “Modern CSS explined for dinosaurs”
Semantic css
- Writ; ref page
- 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
Minimal CSS
- Comparison of “Drop-in Minimal CSS”. “Dropin-minimal-CSS”
- 58 bytes of css to look great nearly everywhere
- Element CSS
- ungrid - the simplest responsive css grid (58 bytes).
- MVP.css - Minimalist stylesheet for HTML elements
- PaperCSS • the less formal CSS framework Kind of a hand drawn look to it.