When to use SASS vs CSS-in-JS - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

When is SASS more suitable than CSS-in-JS?

Which scenario best fits using SASS instead of CSS-in-JS?

A A React app where styles depend on component state and props.

B A large static website with minimal JavaScript and many global styles.

C A project requiring dynamic theming based on user interaction.

D A single-page app with styles tightly coupled to components.

💡 Hint

Think about when styles are mostly fixed and not tied to JavaScript logic.

SASS is great for large static sites with many global styles because it compiles to CSS before the site loads. CSS-in-JS shines when styles depend on JavaScript state or props.

🧠 Conceptual

intermediate

Why choose CSS-in-JS over SASS?

What is a key advantage of CSS-in-JS compared to SASS?

A It allows styles to change dynamically based on component state.

B It compiles styles into a single CSS file before runtime.

C It uses variables and nesting like SASS does.

D It requires no JavaScript to work.

💡 Hint

Consider how styles can respond to changes in your app.

CSS-in-JS lets you write styles that react to component state or props, enabling dynamic styling. SASS compiles static CSS before runtime.

📝 Syntax

advanced

Identify the CSS-in-JS syntax

Which code snippet correctly shows CSS-in-JS usage in a React component?

A button { background-color: blue; color: white; }

B $button-color: blue; .btn { background: $button-color; color: white; }

C const Button = styled.button`background: blue; color: white;`;

D <button style="background: blue; color: white;">Click</button>

💡 Hint

Look for template literals and styled components.

Option C uses the styled-components library syntax for CSS-in-JS in React. Option C is SASS syntax. Option C is plain CSS. Option C is inline HTML style.

❓ layout

advanced

How does SASS help with layout compared to CSS-in-JS?

Which statement about layout management with SASS vs CSS-in-JS is true?

A CSS-in-JS cannot use variables or mixins for layout.

B CSS-in-JS always produces smaller CSS files than SASS.

C SASS styles cannot be scoped to components.

D SASS allows reusable mixins and variables for consistent layout across many files.

💡 Hint

Think about how SASS features help reuse layout code.

SASS supports mixins and variables that help create consistent layouts reused across many files. CSS-in-JS can also use variables but mixins are a SASS feature. CSS-in-JS can scope styles to components, unlike global SASS styles.

❓ accessibility

expert

Accessibility considerations with CSS-in-JS vs SASS

Which accessibility practice is easier to enforce using CSS-in-JS compared to SASS?

A Dynamically adjusting focus styles based on component state.

B Writing semantic HTML tags.

C Using global CSS variables for color contrast.

D Adding ARIA attributes in CSS selectors.

💡 Hint

Think about how styles can respond to user interaction or state changes.

CSS-in-JS can dynamically change styles like focus outlines based on component state, improving accessibility. SASS compiles static CSS and cannot respond to runtime state changes. Semantic HTML and ARIA attributes are handled in HTML, not CSS.