When to use SASS vs CSS-in-JS - Quick Revision & Key Differences

Recall & Review

beginner

What is SASS?

SASS is a CSS preprocessor that adds features like variables, nesting, and mixins to regular CSS. It helps write cleaner and reusable stylesheets.

beginner

What does CSS-in-JS mean?

CSS-in-JS means writing CSS styles directly inside JavaScript files, often scoped to components. It allows dynamic styling based on JavaScript logic.

intermediate

When is SASS a good choice?

Use SASS when you want to keep styles in separate files, need powerful CSS features, and prefer traditional stylesheet workflows.

intermediate

When should you consider CSS-in-JS?

Choose CSS-in-JS when working with JavaScript frameworks like React, want styles tightly coupled with components, or need dynamic styling.

intermediate

What is a key difference between SASS and CSS-in-JS?

SASS compiles to static CSS files before the site loads, while CSS-in-JS generates styles at runtime inside JavaScript, often scoped to components.

Which tool allows you to write CSS inside JavaScript files?

A SASS

B PostCSS

C CSS-in-JS

D LESS

CSS-in-JS means writing CSS styles directly inside JavaScript files.

When using SASS, styles are compiled into:

A Static CSS files

B JavaScript objects

C HTML elements

D JSON data

SASS compiles into static CSS files before the website loads.

Which scenario best fits CSS-in-JS?

A Large static website with separate CSS files

B React app needing dynamic component styles

C Simple HTML page with inline styles

D Server-side rendering without JavaScript

CSS-in-JS works well with React apps for dynamic styling.

SASS helps by adding which feature to CSS?

A HTML templates

B JavaScript logic

C Database queries

D Variables and nesting

SASS adds variables, nesting, and other features to CSS.

Which is a benefit of CSS-in-JS?

A Styles can change based on component state

B Styles are global by default

C Requires separate CSS files

D No JavaScript needed

CSS-in-JS allows styles to change dynamically with component state.

Explain when you would choose SASS over CSS-in-JS for a project.

Think about projects that don't rely heavily on JavaScript frameworks.

Describe the advantages of CSS-in-JS in modern web development.

Consider how styles and components work together in React or similar.