Sign in to track progress and bookmarks.
How should we style components? Should it be in the JS file (Styled Components), in a separate CSS file (Modules), or in the HTML attributes (Tailwind)? There is no "Best" way, only Trade-offs.
Write raw CSS classes directly in your HTML. Pros: Insanely fast development, zero-config responsive states, and no "Dead CSS" because Tailwind purges unused classes. Cons: HTML can become messy and unreadable.
Style your components using Template Literals in JS. Pros: Dynamic styling based on props (e.g., color={props.primary ? 'red' : 'blue'}) and perfect encapsulation. Cons: Runtime performance overhead and larger JS bundle size.
Q: "If you were building a high-performance e-commerce site, which styling strategy would you pick?"
Architect Answer: "I would pick **TailwindCSS** or **CSS Modules**. For e-commerce, the largest bottleneck is 'Time to Interactive.' CSS-in-JS libraries require a JS runtime to parse and inject styles, which delays physical rendering. Tailwind generates a tiny static CSS file that the browser can cache and apply instantly, providing the best possible Core Web Vitals for the user."
Quizzes linked to this course—pass to earn certificates.
On this page
1. TailwindCSS (Utility First) 2. CSS-in-JS (Styled Components / Emotion) 4. Interview Mastery