How do you decide when to use CSS versus JavaScript for UI features?

CSS and JavaScript each have strengths. Using the right tool makes for better performance and maintainability.

CSS excels at visual presentation. Hover states, transitions, animations, and responsive layouts are CSS's domain. CSS animations run on the compositor thread, avoiding main thread blocking. Hardware acceleration makes them smooth.

Use CSS for: color changes, transforms (move, scale, rotate), opacity fades, transitions between states, layout changes on resize, hover/focus effects, show/hide with visibility or display toggling.

JavaScript is for behavior and complex interaction. Use it when you need to respond to user actions beyond :hover/:focus, coordinate multiple state changes, animate based on scroll position or user input, or manage complex timing sequences.

Modern CSS capabilities reduce JavaScript needs. CSS scroll-snap handles carousel-like scrolling. @container queries enable responsive components. :has() selector enables parent styling based on children. CSS variables with JavaScript offer a bridge—update a variable in JS, CSS handles the rest.

For complex animations, consider libraries like Framer Motion or GSAP that optimize performance while providing nice APIs. They handle the CSS/JS boundary intelligently.

Rule of thumb: if it's purely visual, try CSS first. If it involves state, logic, or responding to dynamic conditions, JavaScript. Many features need both—JavaScript manages state, CSS applies visual changes.