ReactJS Interview Prep - CSS Fundamentals (Part 5)

Question 1

What does BEM stand for in CSS methodology?

Accepted Answer

Correct Answer

Answer

Block, Element, Modifier

Answer

Browser, Engine, Markup

Answer

Base, Extension, Module

Answer

Border, Edge, Margin

Question 2

In the BEM class name `card__title--large`, what does `--large` represent?

Accepted Answer

Correct Answer

Answer

The Block

Answer

The Element

Answer

The Modifier

Answer

A pseudo-class

Question 3

What is the primary benefit of using a methodology like BEM or SMACSS?

Accepted Answer

Correct Answer

Answer

It automatically minifies the CSS file.

Answer

It drastically reduces CSS Specificity wars by keeping selectors flat (mostly single classes), making the codebase highly predictable and maintainable.

Answer

It allows you to use JavaScript logic directly inside CSS files.

Answer

It forces the browser to render the page faster on the GPU.

Question 4

How do you write a CSS Media Query that applies styles ONLY when the viewport is 768 pixels wide or larger (Mobile-First approach)?

Accepted Answer

Correct Answer

Answer

`@media (max-width: 768px) { ... }`

Answer

`@media (min-width: 768px) { ... }`

Answer

`@media (width: 768px) { ... }`

Answer

`@media screen and (mobile: false) { ... }`

Question 5

What does `@media (prefers-color-scheme: dark)` detect?

Accepted Answer

Correct Answer

Answer

If the ambient light sensor on the user's device detects a dark room.

Answer

If the user has chosen a dark theme at the operating system or browser level (e.g., macOS Dark Mode).

Answer

If the contrast ratio of the website is too low.

Answer

It forces the browser to invert all colors on the page.

Question 6

What does `@media (prefers-reduced-motion: reduce)` allow developers to do?

Accepted Answer

Correct Answer

Answer

It optimizes JavaScript bundle sizes.

Answer

It allows developers to disable or slow down non-essential animations (like parallax or wild transitions) for users who have indicated in their OS settings that such motion causes them vestibular discomfort or nausea.

Answer

It limits the frame rate of the browser to save battery.

Answer

It pauses background video playback.

Question 7

What is the function of the `@supports` rule in CSS (Feature Queries)?

Accepted Answer

Correct Answer

Answer

It imports polyfills for older browsers.

Answer

It allows you to conditionally apply CSS rules only if the user's browser natively supports a specific CSS property/value combination (e.g., `@supports (display: grid)`).

Answer

It checks if the user's device supports a mouse.

Answer

It verifies if the CSS syntax is valid.

Question 8

In SASS (SCSS), what does the `&` (ampersand) symbol do?

Accepted Answer

Correct Answer

Answer

It concatenates two strings together.

Answer

It references the parent selector, allowing you to easily nest pseudo-classes (e.g., `&:hover`) or BEM modifiers (e.g., `&--large`).

Answer

It defines a global variable.

Answer

It acts as a logical AND operator.

Question 9

What is the difference between a SASS `@mixin` and an `@extend`?

Accepted Answer

Correct Answer

Answer

They are identical.

Answer

`@mixin` copies the CSS block directly into the selector wherever it is included (like a function, accepting parameters). `@extend` groups selectors together in the compiled CSS to share the same rule block.

Answer

`@extend` accepts parameters, while `@mixin` does not.

Answer

`@mixin` is used for animations, `@extend` is for colors.

Question 10

How do you define a variable in SCSS?

Accepted Answer

Correct Answer

Answer

@color: blue;

Answer

--color: blue;

Answer

$color: blue;

Answer

var color = blue;

Question 11

What is the purpose of CSS Modules in a React environment?

Accepted Answer

Correct Answer

Answer

To compile CSS into WebAssembly.

Answer

To locally scope CSS class names automatically (by appending unique hashes) so that styles from `Button.module.css` don't accidentally leak and affect other components.

Answer

To strictly enforce the BEM methodology via a linter.

Answer

To allow injecting inline styles via JavaScript objects.

Question 12

Which CSS property allows you to control how an element responds to mouse/touch interactions, completely ignoring clicks if needed?

Accepted Answer

Correct Answer

Answer

`cursor: disabled;`

Answer

`pointer-events: none;`

Answer

`touch-action: none;`

Answer

`interaction: disabled;`

Question 13

What does `touch-action: manipulation;` accomplish on a button in mobile browsers?

Accepted Answer

Correct Answer

Answer

It forces the button to require a double-tap.

Answer

It removes the artificial 300ms delay that mobile browsers historically added to click events (waiting to see if the user intended to double-tap-zoom).

Answer

It enables drag-and-drop mechanics natively.

Answer

It disables multi-touch gestures globally.

Question 14

What does the `object-fit: cover;` property do when applied to an `<img>` tag?

Accepted Answer

Correct Answer

Answer

It stretches the image, distorting its aspect ratio to fit the exact width and height of its container.

Answer

It scales the image while preserving its aspect ratio, ensuring it completely covers the container (cropping edges if necessary) without distortion.

Answer

It scales the image to ensure the entire image is visible, leaving empty space (letterboxing) if the aspect ratios don't match.

Answer

It tiles the image as a repeating pattern.

Question 15

What does `object-fit: contain;` do?

Accepted Answer

Correct Answer

Answer

It crops the image to fit.

Answer

It scales the image as large as possible without cropping or distorting it, fitting it entirely within the container (often resulting in letterboxing).

Answer

It aligns the image to the center of the viewport.

Answer

It forces the image to inherit the color of its container.

Question 16

What is a 'CSS Reset' (or Normalize.css)?

Accepted Answer

Correct Answer

Answer

A JavaScript function that clears all inline styles on page load.

Answer

A base stylesheet that overrides inconsistent browser default styles (like varying margins on `<h1>`, list padding, or button borders) to provide a predictable, level playing field across all browsers.

Answer

A command line tool to delete unused CSS.

Answer

A media query that triggers when rotating a mobile device.

Question 17

Which property allows you to blend an element's background color with an image beneath it (similar to Photoshop blend modes)?

Accepted Answer

Correct Answer

Answer

`opacity`

Answer

`mix-blend-mode`

Answer

`filter`

Answer

`backdrop-filter`

Question 18

How does `backdrop-filter: blur(10px);` differ from `filter: blur(10px);`?

Accepted Answer

Correct Answer

Answer

They are identical.

Answer

`filter` blurs the element itself and all its children. `backdrop-filter` applies the blur effect to the area *behind* the element (creating a glassmorphism/frosted glass effect) without blurring the element's own text or borders.

Answer

`backdrop-filter` only works on images.

Answer

`backdrop-filter` is hardware accelerated, `filter` is not.

Question 19

What is the 'Mobile-First' approach in writing CSS?

Accepted Answer

Correct Answer

Answer

Writing CSS exclusively for mobile devices and ignoring desktop.

Answer

Writing base styles for small screens first (outside of any media query), and then using `min-width` media queries to progressively add complexity for tablets and desktops.

Answer

Using `max-width` media queries to scale down desktop designs.

Answer

Creating a separate `mobile.css` file.

Question 20

What does the `aspect-ratio` property achieve in modern CSS?

Accepted Answer

Correct Answer

Answer

It forces an image to retain its original resolution.

Answer

It allows you to explicitly set a preferred aspect ratio for a box (e.g., `aspect-ratio: 16 / 9;`), automatically calculating the height based on the width, replacing old "padding-top hack" techniques.

Answer

It calculates the physical aspect ratio of the user's monitor.

Answer

It aligns Flexbox items proportionally.

Question 21

What is a 'Utility-First' CSS framework (e.g., Tailwind CSS)?

Accepted Answer

Correct Answer

Answer

A framework that provides pre-built, complex components (like Bootstrap's `.navbar` or `.card`).

Answer

A methodology where you build designs using highly atomic, single-purpose classes (e.g., `flex`, `pt-4`, `text-center`, `bg-blue-500`) applied directly in the HTML/JSX.

Answer

A JavaScript library for generating dynamic styles.

Answer

A system for linting CSS syntax.

Question 22

What happens if a CSS Variable (`--main-color`) is requested using `var(--main-color)`, but it hasn't been defined?

Accepted Answer

Correct Answer

Answer

The browser throws a fatal error and stops rendering CSS.

Answer

The property is ignored and the browser falls back to its default or inherited value, unless a fallback value is provided in the function: `var(--main-color, blue)`.

Answer

The browser assigns a random color.

Answer

It applies the `!important` rule.

Question 23

Which selector targets an `<a>` element that a user has previously visited?

Accepted Answer

Correct Answer

Answer

`a:active`

Answer

`a:visited`

Answer

`a:focus`

Answer

`a:clicked`

Question 24

What does the `:focus-within` pseudo-class do?

Accepted Answer

Correct Answer

Answer

It selects an element only when the mouse is explicitly held down on it.

Answer

It applies styles to a parent element if ANY of its descendant children currently have focus.

Answer

It targets an input field when validation fails.

Answer

It creates a modal focus trap.

Question 25

What is the purpose of the `content-visibility` property?

Accepted Answer

Correct Answer

Answer

To hide content from screen readers without using `aria-hidden`.

Answer

To allow the browser to skip rendering work (layout and painting) for an element until it approaches the viewport, massively improving load performance for long pages.

Answer

To encrypt text until a user logs in.

Answer

To define the strict bounding box of an SVG.

Academy

ReactJS Interview Prep - CSS Fundamentals (Part 5)