That’s not how I wrote CSS 3 years ago
summary
A 100‑post slog called 100 days teaches modern CSS: custom properties become a configuration layer, container style queries let components change layout without new markup, and cascade layers let specificity stay useful. Built reusable web components (example WM-card with 10 custom properties) that style via a documented CSS API, reduced Sass and JavaScript (DVH, scrollbar-gutter, masonry, :has replace hacks). The series works and is exhausting; a site redesign is already using these patterns.
AI-written summary · about
chapters (65)
- 0:00Intro
- 2:26Thank you
- 2:53Lets start again
- 4:40The 100 days of CSS challenge
- 6:04The Side Project
- 6:30Modern CSS
- 7:16What I learned
- 8:34What I forgot
- 9:26The changes
- 9:56The past
- 10:28New computer
- 10:50CounterStrike
- 11:42Clan
- 12:00Website
- 12:28Special about this site
- 13:18My biggest milestones
- 14:37Preprocessors
- 14:53Influences
- 15:39Modules
- 16:00Methodologies
- 16:18Other influences
- 17:05Custom Properties
- 18:13Relative Color Syntax
- 18:43Custom Property
- 20:02Default Custom Property
- 20:23Web Components
- 20:42Viennese Melange
- 21:31CSS API
- 22:02CSS Day Card
- 23:29Changes in CSS
- 24:50CSS attributes
- 25:51Example
- 27:37CSS without HTML
- 27:52A strange break
- 28:15No more classes
- 29:29CSS styling
- 29:52Custom CSS properties
- 30:24Decouple component variations
- 30:49Extracting stylings and using them separately
- 31:25Repeating stylings
- 31:46More CSS
- 32:27Breaking with conventions
- 32:51The Cascade
- 34:11Cascade Layers
- 34:29Complex Selectors
- 34:58Component Level Problems
- 35:44Nest Layers
- 36:35Testing
- 36:56What has changed
- 38:02Random photo
- 39:09JavaScript workaround
- 39:35Layout flickering
- 39:57Scrollbar gutter
- 40:23Masonry
- 40:57HasHas
- 41:24Dialog
- 41:54Hover
- 42:16Has
- 42:37I like JavaScript
- 43:07Conclusion
- 44:05Lobster
- 44:31Questions
- 44:59Timeline
- 45:40Favourite feature
- 46:17Custom property names
