Best of CSS-Tricks — March 2025

1. 1
   Article

   CSS-Tricks·1y

   Web Components Demystified

   Explore the fundamentals of web components with Scott Jehl's course, 'Web Components Demystified'. Learn about the creation and behavior of custom HTML elements, usage of HTML templates, encapsulation with Shadow DOM, and lifecycle methods for web components. The content highlights the differences between web components and JavaScript framework components like React. Also discussed are best practices for styling, handling slots, and using custom properties within Shadow DOM.

   111

   1
2. 2
   Article

   CSS-Tricks·1y

   Functions in CSS?!

   CSS functions are being prototyped in Chrome Canary, providing new capabilities like arguments, default values, and returns. These functions allow reusable patterns with parameterized custom properties, making CSS more powerful and flexible. While still in early stages, functions can handle type-checking and lists, though early returns and some other functionalities are currently limited. The introduction of functions will significantly enhance the way CSS is written, although more improvements and broader support are needed.

   88

   4
3. 3
   Article

   CSS-Tricks·1y

   Quick Reminder That :is() and :where() Are Basically the Same With One Key Difference

   The post discusses the CSS :is() and :where() pseudo-selectors, highlighting their similarities and one key difference: specificity. The :is() selector can make compound selectors more readable but inherits the highest specificity of its arguments, whereas the :where() selector always has a specificity of zero, making it useful for avoiding specificity issues.

   11

   1