Utility of Inline Styles

on YouTube ↗05m

" summary

Claim: inline custom properties become an HTML-to-CSS API, letting pages set values in style attributes and have stylesheet logic apply them via attribute selectors matching property definitions. Demonstration uses CSS variables, hover and media-state tricks, and fallback invalid values to toggle behavior. It works in modern browsers but is labeled experimental and shows measurable downsides: runtime variable calculation and slow attribute-selector matching can cause performance issues on large sites. Utility-first without class proliferation

AI-written summary · about

" chapters (9)

1. 0:00Intro
2. 0:27The Argument
3. 0:41Disclaimer
4. 1:02Element
5. 1:27CSS
6. 2:22Hover States
7. 2:54Media Queries
8. 3:21Potential Problems
9. 4:12Conclusion

" related talks

• 52mUtility First CSS Isn’t Inline StylesSarah Dayan · CSSDAY 2024
• 31mInline Styles: themes, media queries, contexts, & when it's best to use CSSMichael Chan · ReactEurope 2015
• 18mDemystifying CSS Custom PropertiesJean-francois Garreau, Audrey Garreau · DevFest du bout du monde 2019
• 38mDemystifying CSS Custom PropertiesJean-francois Garreau, Audrey Garreau · DevFest Paris 2019
• 44mCSS Variables: var(–subtitle)Lea verou · Web Unleashed 2016
• 46mGetting extra with CSS HoudiniUna Kravets · Frontend United 2019
• 28mStrategy Guide for CSS Custom PropertiesMike Riethmuller · CSSconf EU 2018
• 53mCSS Variables: var(--subtitle)Lea verou · CSSConf.Asia 2016