Everyday CSS Lookups That Trip Experts

CSS veterans like panelists Lyra, Juan, and Chris still Google fundamentals they "should know by heart." Examples include list-style-type for list markers (e.g., bullet shapes), view transition pseudo-elements (::view-transition, ::view-transition-group, ::view-transition-old, ::view-transition-new with class or ident names), and background-attachment: local to prevent backgrounds from scrolling with content. They even reference their own articles for tricks like transitioning to auto height. Anchor positioning variants stump them too: position: anchor() vs. position-try-options. These lookups highlight that CSS's growing complexity means no one memorizes everything—use references for precision in production.

CSS vs. JS: Favor Declarative Styling Over Imperative Logic

Draw the line at what's declarative and simpler: CSS for styling states like hover, focus, or scroll position; JS only for non-stylable functionality. CSS now imports JS concepts—functions (calc(), custom properties), anchor positioning for tooltips (handles overflow/clipping without viewport detection), view transitions for page changes, and popover/dialog via <details>. Scroll-driven animations eliminate JS scroll listeners setting custom properties; use native scroll progress for relativity-based effects. Active/focus-visible states cover clicks/tabs without event handlers. Trade-off: New CSS shines in greenfield code but may conflict with legacy JS-heavy codebases. Result: Less code, free state handling (e.g., no if blocks for appear/disappear), faster performance.

New CSS Tools Reshaping Traditional Approaches

Panelists regret lacking modern features during past projects like CSS Clicker or co-host. Anchor positioning powers popovers affecting external elements; scroll-triggered animations (experimental) enable viewport-relative state changes without JS. View transitions simplify complex naming for smooth swaps. Browser interop is the hurdle—staggered releases demand CanIUse checks, unlike IE era. Pipeline feels endless: expect more JS-to-CSS migrations (e.g., carousels via CSS). Approach: Prototype with latest tools first; fallback to JS if unsupported. Outcome: Rethink patterns—e.g., no more manual tooltip shifts—unlocking powerful, maintainable UIs.