🌠 I just updated by CSS Reset to include a handy new declaration:
html {
interpolate-size: allow-keywords;
}
This rule allows us to animate height from "0px" to "auto", perfect for accordions and other collapsible UI. ✨
Learn more in my blog post about it:
www.joshwcomeau.com/css/custom-c...
html {
interpolate-size: allow-keywords;
}
This rule allows us to animate height from "0px" to "auto", perfect for accordions and other collapsible UI. ✨
Learn more in my blog post about it:
www.joshwcomeau.com/css/custom-c...
A Modern CSS Reset • Josh W. Comeau
I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!
www.joshwcomeau.com
March 25, 2025 at 3:14 PM
🌠 I just updated by CSS Reset to include a handy new declaration:
html {
interpolate-size: allow-keywords;
}
This rule allows us to animate height from "0px" to "auto", perfect for accordions and other collapsible UI. ✨
Learn more in my blog post about it:
www.joshwcomeau.com/css/custom-c...
html {
interpolate-size: allow-keywords;
}
This rule allows us to animate height from "0px" to "auto", perfect for accordions and other collapsible UI. ✨
Learn more in my blog post about it:
www.joshwcomeau.com/css/custom-c...
📝 When and how CSS custom properties are calculated might not be what you expect, and it has a big impact on your styles.
Here's how it works: jakearchibald.com/2026/css-cus...
Here's how it works: jakearchibald.com/2026/css-cus...
Controlling when CSS custom properties are computed
The default might not be what you expect, and it has a big impact on your styles.
jakearchibald.com
August 26, 2026 at 2:00 PM
📝 When and how CSS custom properties are calculated might not be what you expect, and it has a big impact on your styles.
Here's how it works: jakearchibald.com/2026/css-cus...
Here's how it works: jakearchibald.com/2026/css-cus...
Poetic CSS course is live for early-bird registration! Only available during July.
Thanks for your patience, we had some last-minute fixes. #css
courses.oddbird.net/poetic-css/
Thanks for your patience, we had some last-minute fixes. #css
courses.oddbird.net/poetic-css/
Poetic CSS
Understand CSS as a system — so you can write, review, and maintain web styles with confidence on a timeline and under budget.
courses.oddbird.net
July 2, 2026 at 9:01 PM
Poetic CSS course is live for early-bird registration! Only available during July.
Thanks for your patience, we had some last-minute fixes. #css
courses.oddbird.net/poetic-css/
Thanks for your patience, we had some last-minute fixes. #css
courses.oddbird.net/poetic-css/
New in ChromeDevTools: Debug complex CSS values more easily! 🎉
The Elements > Styles tab now shows a tooltip on hover with:
1. A step-by-step evaluation of complex CSS calculations to trace values back to their origin!
2. The full definition chain of CSS variables!
The Elements > Styles tab now shows a tooltip on hover with:
1. A step-by-step evaluation of complex CSS calculations to trace values back to their origin!
2. The full definition chain of CSS variables!
July 14, 2025 at 4:43 PM
New in ChromeDevTools: Debug complex CSS values more easily! 🎉
The Elements > Styles tab now shows a tooltip on hover with:
1. A step-by-step evaluation of complex CSS calculations to trace values back to their origin!
2. The full definition chain of CSS variables!
The Elements > Styles tab now shows a tooltip on hover with:
1. A step-by-step evaluation of complex CSS calculations to trace values back to their origin!
2. The full definition chain of CSS variables!
🧩 Write cleaner CSS with nesting
You can now nest selectors directly in CSS.
It improves readability, keeps styles modular, and reduces repetition.
No preprocessor needed.
Learn more 👇
developer.mozilla.org/en-US/docs/...
You can now nest selectors directly in CSS.
It improves readability, keeps styles modular, and reduces repetition.
No preprocessor needed.
Learn more 👇
developer.mozilla.org/en-US/docs/...
April 7, 2026 at 3:58 PM
🧩 Write cleaner CSS with nesting
You can now nest selectors directly in CSS.
It improves readability, keeps styles modular, and reduces repetition.
No preprocessor needed.
Learn more 👇
developer.mozilla.org/en-US/docs/...
You can now nest selectors directly in CSS.
It improves readability, keeps styles modular, and reduces repetition.
No preprocessor needed.
Learn more 👇
developer.mozilla.org/en-US/docs/...
I don't miss Sass, I miss named breakpoints. We can almost get there with raw CSS. 🤏
www.abeautifulsite.net/posts/named-...
www.abeautifulsite.net/posts/named-...
September 22, 2026 at 10:28 PM
I don't miss Sass, I miss named breakpoints. We can almost get there with raw CSS. 🤏
www.abeautifulsite.net/posts/named-...
www.abeautifulsite.net/posts/named-...
When and how CSS custom property values are calculated might not be what you expect, and it has a big impact on your styles…
September 10, 2026 at 1:23 PM
When and how CSS custom property values are calculated might not be what you expect, and it has a big impact on your styles…
💡 CSS Tip!
Transform the native range slider into an interactive star rating component using a few lines of CSS and 0 JavaScript.
✅ Single-element
✅ No inline styles
✅ Less than 15 declarations
✅ Using the new attr() function 🥳
Code & Demo: css-tip.com/star-rating/
#CSS
Transform the native range slider into an interactive star rating component using a few lines of CSS and 0 JavaScript.
✅ Single-element
✅ No inline styles
✅ Less than 15 declarations
✅ Using the new attr() function 🥳
Code & Demo: css-tip.com/star-rating/
#CSS
January 24, 2025 at 11:28 AM
💡 CSS Tip!
Transform the native range slider into an interactive star rating component using a few lines of CSS and 0 JavaScript.
✅ Single-element
✅ No inline styles
✅ Less than 15 declarations
✅ Using the new attr() function 🥳
Code & Demo: css-tip.com/star-rating/
#CSS
Transform the native range slider into an interactive star rating component using a few lines of CSS and 0 JavaScript.
✅ Single-element
✅ No inline styles
✅ Less than 15 declarations
✅ Using the new attr() function 🥳
Code & Demo: css-tip.com/star-rating/
#CSS
what the FUCK lmao dev.to/codypearce/i...
I turned CSS in a SQL Database
Devs have been trying to avoid CSS for years with inline styles, CSS-in-JS, Tailwind. But they're not...
dev.to
January 24, 2026 at 12:08 AM
what the FUCK lmao dev.to/codypearce/i...
Wrote a post about CSS if()!
You can now write inline CSS conditionals for:
- style queries
- media queries
- supports queries
Read on:
developer.chrome.com/blog/if-arti...
You can now write inline CSS conditionals for:
- style queries
- media queries
- supports queries
Read on:
developer.chrome.com/blog/if-arti...
CSS conditionals with the new if() function | Blog | Chrome for Developers
Learn about the new CSS if function, which enables a cleaner developer interface for dynamic styles like style queries and media queries.
developer.chrome.com
July 1, 2025 at 4:00 PM
Wrote a post about CSS if()!
You can now write inline CSS conditionals for:
- style queries
- media queries
- supports queries
Read on:
developer.chrome.com/blog/if-arti...
You can now write inline CSS conditionals for:
- style queries
- media queries
- supports queries
Read on:
developer.chrome.com/blog/if-arti...
new webcrafting supplies @ ribo.zone/free/snippets/borders
April 1, 2026 at 2:35 AM
new webcrafting supplies @ ribo.zone/free/snippets/borders
Some very handy CSS snippets here that could comfortably be dropped in most projects.
adactio.com/journal/21896
adactio.com/journal/21896
CSS snippets
Some styles I re-use when I’m programming with CSS.
adactio.com
May 20, 2025 at 9:04 AM
Some very handy CSS snippets here that could comfortably be dropped in most projects.
adactio.com/journal/21896
adactio.com/journal/21896
FLIP animations in pure CSS? @nerdy.dev figured it out.
AIM = Anchor Interpolated Morph
CSS Anchor positioning + starting-styles = element morphing without JavaScript.
🎧 whiskey.fm/230
AIM = Anchor Interpolated Morph
CSS Anchor positioning + starting-styles = element morphing without JavaScript.
🎧 whiskey.fm/230
February 8, 2026 at 2:58 PM
FLIP animations in pure CSS? @nerdy.dev figured it out.
AIM = Anchor Interpolated Morph
CSS Anchor positioning + starting-styles = element morphing without JavaScript.
🎧 whiskey.fm/230
AIM = Anchor Interpolated Morph
CSS Anchor positioning + starting-styles = element morphing without JavaScript.
🎧 whiskey.fm/230
WebKit blocking interop on CSS modules (import … with { type: "css" }) [1] affects a lot more than meets the eye.
It means web component authors cannot make component styles a first-class dependency unless they’re willing to stuff them into a JS string.
[1] caniuse.com/wf-css-modules
It means web component authors cannot make component styles a first-class dependency unless they’re willing to stuff them into a JS string.
[1] caniuse.com/wf-css-modules
CSS import attributes | Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
March 12, 2026 at 3:21 PM
WebKit blocking interop on CSS modules (import … with { type: "css" }) [1] affects a lot more than meets the eye.
It means web component authors cannot make component styles a first-class dependency unless they’re willing to stuff them into a JS string.
[1] caniuse.com/wf-css-modules
It means web component authors cannot make component styles a first-class dependency unless they’re willing to stuff them into a JS string.
[1] caniuse.com/wf-css-modules
I'm sad to miss you all at #CSSDay this year! Wish I could be there, and see all the great talks.
In the spirit of the event, I'm launching my new #CSS course – Poetic CSS! The first module is ready, and early bird tickets will go on sale for the month of July.
courses.oddbird.net/poetic-css/
In the spirit of the event, I'm launching my new #CSS course – Poetic CSS! The first module is ready, and early bird tickets will go on sale for the month of July.
courses.oddbird.net/poetic-css/
Poetic CSS
Understand CSS as a system — so you can write, review, and maintain web styles with confidence on a timeline and under budget.
courses.oddbird.net
June 11, 2026 at 7:54 PM
I'm sad to miss you all at #CSSDay this year! Wish I could be there, and see all the great talks.
In the spirit of the event, I'm launching my new #CSS course – Poetic CSS! The first module is ready, and early bird tickets will go on sale for the month of July.
courses.oddbird.net/poetic-css/
In the spirit of the event, I'm launching my new #CSS course – Poetic CSS! The first module is ready, and early bird tickets will go on sale for the month of July.
courses.oddbird.net/poetic-css/
I can’t stop switching styles on localghost.dev !
localghost
Sophie builds fun things out of HTML, CSS & JavaScript, and writes blog posts about tech and mental health.
localghost.dev
March 4, 2025 at 7:06 PM
I can’t stop switching styles on localghost.dev !
CSS tip 💡
Instead of writing:
padding-left: 24px;
padding-right: 24px;
padding-top: 16px;
padding-bottom: 16px;
You can use
padding-inline: 24px;
padding-block: 16px;
or just padding: 16px 24px; (top/bottom, left/right)
Instead of writing:
padding-left: 24px;
padding-right: 24px;
padding-top: 16px;
padding-bottom: 16px;
You can use
padding-inline: 24px;
padding-block: 16px;
or just padding: 16px 24px; (top/bottom, left/right)
July 13, 2026 at 9:59 AM
CSS tip 💡
Instead of writing:
padding-left: 24px;
padding-right: 24px;
padding-top: 16px;
padding-bottom: 16px;
You can use
padding-inline: 24px;
padding-block: 16px;
or just padding: 16px 24px; (top/bottom, left/right)
Instead of writing:
padding-left: 24px;
padding-right: 24px;
padding-top: 16px;
padding-bottom: 16px;
You can use
padding-inline: 24px;
padding-block: 16px;
or just padding: 16px 24px; (top/bottom, left/right)
Journal: CSS snippets
Some styles I re-use when I’m programming with CSS.
🔗https://adactio.com/journal/21896
Some styles I re-use when I’m programming with CSS.
🔗https://adactio.com/journal/21896
May 8, 2025 at 10:27 AM
Journal: CSS snippets
Some styles I re-use when I’m programming with CSS.
🔗https://adactio.com/journal/21896
Some styles I re-use when I’m programming with CSS.
🔗https://adactio.com/journal/21896
Web Performance Calendar day 13 with Yoav Weiss (@yoav.ws) showing us a clever and creative way to ship *only* critical/necessary CSS for each page type (home, search, etc) while also avoiding duplicate code in the CSS bundles.
calendar.perfplanet.com/2025/how-to-...
calendar.perfplanet.com/2025/how-to-...
How to load CSS (fast)
Loading styles on the web is something that looks trivial at first.
You just add a <link rel=stylesheet> to your page (or <style> for inline styles) and you're done.
But if you wanted to load CSS fas...
calendar.perfplanet.com
December 13, 2025 at 9:19 AM
Web Performance Calendar day 13 with Yoav Weiss (@yoav.ws) showing us a clever and creative way to ship *only* critical/necessary CSS for each page type (home, search, etc) while also avoiding duplicate code in the CSS bundles.
calendar.perfplanet.com/2025/how-to-...
calendar.perfplanet.com/2025/how-to-...
I have a new article out!
Super Simple Full-Bleed & Breakout Styles
frontendmasters.com/blog/super-s... - my take on an old problem using modern CSS solutions.
Using a spooky made up Halloween recipe to illustrate concepts.
PS @chriscoyier.net told me to be proud of it 😛
#CSS
Super Simple Full-Bleed & Breakout Styles
frontendmasters.com/blog/super-s... - my take on an old problem using modern CSS solutions.
Using a spooky made up Halloween recipe to illustrate concepts.
PS @chriscoyier.net told me to be proud of it 😛
#CSS
October 31, 2025 at 6:28 PM
I have a new article out!
Super Simple Full-Bleed & Breakout Styles
frontendmasters.com/blog/super-s... - my take on an old problem using modern CSS solutions.
Using a spooky made up Halloween recipe to illustrate concepts.
PS @chriscoyier.net told me to be proud of it 😛
#CSS
Super Simple Full-Bleed & Breakout Styles
frontendmasters.com/blog/super-s... - my take on an old problem using modern CSS solutions.
Using a spooky made up Halloween recipe to illustrate concepts.
PS @chriscoyier.net told me to be proud of it 😛
#CSS
Stylex made me a css in js convert. The benefits you get from it are pretty hard to top
- componentized css
- better composition patterns
- encourages isolated styles (ie a component only styles itself)
- size of css caps our (it generates tailwind style utils)
- componentized css
- better composition patterns
- encourages isolated styles (ie a component only styles itself)
- size of css caps our (it generates tailwind style utils)
CSS-in-JS promised simplicity but delivered performance issues. Learn why ditching it for native CSS solutions leads to faster, more maintainable web apps.
CSS-in-JS: The Great Betrayal of Frontend Sanity
CSS-in-JS promised simplicity but delivered performance issues. Learn why ditching it for native CSS solutions leads to faster, more maintainable web apps.
bit.ly
November 29, 2025 at 11:57 PM
Stylex made me a css in js convert. The benefits you get from it are pretty hard to top
- componentized css
- better composition patterns
- encourages isolated styles (ie a component only styles itself)
- size of css caps our (it generates tailwind style utils)
- componentized css
- better composition patterns
- encourages isolated styles (ie a component only styles itself)
- size of css caps our (it generates tailwind style utils)
I’m in the css mines breaking shit because something is wrong in my styles and it broke everything lmao
Person with AI dependence over even the smallest task:
pw-pwease cwaude buiwd my website with data twacking and cookies and AI seawch suwfacing so my wife sees how smart I am... 👉👈🥺
me: hehe html go brrrrrrrr
pw-pwease cwaude buiwd my website with data twacking and cookies and AI seawch suwfacing so my wife sees how smart I am... 👉👈🥺
me: hehe html go brrrrrrrr
August 8, 2026 at 6:25 AM
I’m in the css mines breaking shit because something is wrong in my styles and it broke everything lmao
Donut scoping: Preventing the parent's styles from leaking inwards, courtesy of the @scope at-rule.
css-tricks.com/solved-by-cs...
css-tricks.com/solved-by-cs...
Solved By CSS: Donuts Scopes | CSS-Tricks
Donut scoping addresses the challenge of preventing parent styles from leaking to nested content. Originating from a 2011 concept by Nicole Sullivan, the issue has evolved, culminating in 2024's @scop...
css-tricks.com
November 22, 2024 at 2:07 PM
Donut scoping: Preventing the parent's styles from leaking inwards, courtesy of the @scope at-rule.
css-tricks.com/solved-by-cs...
css-tricks.com/solved-by-cs...
Dev 1: I write my CSS from scratch so I can control how styles are done
Dev 2: I use utility libs so I don't have to reinvent the wheel
Dev 3: I don't care what folks do, if you're good at CSS like me, you can work with anything
All three: Wow, I am better than... everyone
Dev 2: I use utility libs so I don't have to reinvent the wheel
Dev 3: I don't care what folks do, if you're good at CSS like me, you can work with anything
All three: Wow, I am better than... everyone
December 4, 2024 at 7:33 PM
Dev 1: I write my CSS from scratch so I can control how styles are done
Dev 2: I use utility libs so I don't have to reinvent the wheel
Dev 3: I don't care what folks do, if you're good at CSS like me, you can work with anything
All three: Wow, I am better than... everyone
Dev 2: I use utility libs so I don't have to reinvent the wheel
Dev 3: I don't care what folks do, if you're good at CSS like me, you can work with anything
All three: Wow, I am better than... everyone