Interview Prep: Mid Level

These questions test your practical layout skills, understanding of CSS flow, and responsive design techniques. Expect these at mid-level (2-4 YOE) interviews.

Layout & Flow

1. What is the difference between `position: relative`, `absolute`, `fixed`, and `sticky`?

relative: The element stays in the normal document flow, but can be offset (using top, left, etc.) relative to its original position.
absolute: The element is removed from the normal document flow. It is positioned relative to its closest positioned ancestor (an ancestor with position other than static).
fixed: Removed from flow. Positioned relative to the viewport. It stays in the same place when the user scrolls.
sticky: Acts like relative until the element reaches a defined scroll threshold (e.g., top: 0), at which point it acts like fixed.

📖 Deep dive: Display & Position

2. Explain margin collapse. When does it happen?

When the top and bottom margins of two adjacent block-level elements touch, they collapse into a single margin. The size of the collapsed margin is equal to the largest of the two margins (they don't add together).

Example: Element A has margin-bottom: 20px. Element B right below it has margin-top: 30px. The gap between them is 30px, not 50px.

It does not happen:

On horizontal margins (left/right).
On flex or grid items.
If there is padding or a border separating the margins.

📖 Deep dive: The Box Model

3. Flexbox vs CSS Grid — When would you use which?

Flexbox is a one-dimensional layout system. It handles layouts in either a single row OR a single column. It excels at distributing space and aligning items (e.g., navbars, a row of buttons, centering an element).
CSS Grid is a two-dimensional layout system. It handles both rows AND columns simultaneously. It excels at overall page structure and complex grid layouts (e.g., a dashboard layout, a photo gallery).

General Rule: Use Grid for the overall layout framework, and Flexbox for aligning the content inside the specific grid areas.

4. How do you center a div perfectly in the middle of the screen?

Using Flexbox (the most common modern way):

.parent {
  display: flex;
  justify-content: center; /* Horizontally */
  align-items: center;     /* Vertically */
  min-height: 100vh;       /* Parent needs height to center vertically */
}

Using CSS Grid:

.parent {
  display: grid;
  place-items: center; /* Shorthand for justify-items and align-items */
  min-height: 100vh;
}

5. What does `flex: 1` actually mean?

flex: 1 is a shorthand for three properties:

flex-grow: 1 (The item is allowed to grow to take up available space)
flex-shrink: 1 (The item is allowed to shrink if there isn't enough space)
flex-basis: 0 or 0% (The initial size of the item before space distribution is 0)

Result: The item will take up an equal share of the available free space in the flex container.

📖 Deep dive: Flexbox

Selectors & Specificity

6. What are pseudo-classes and pseudo-elements?

Pseudo-classes target the state or position of an element. (Syntax: single colon :)
- Examples: :hover, :focus, :active, :first-child, :nth-child(even)
Pseudo-elements target a specific part of an element, or allow you to insert content. (Syntax: double colon ::)
- Examples: ::before (inserts content before), ::after (inserts content after), ::first-line, ::placeholder

7. Why should you avoid using `!important`?

!important overrides the normal specificity rules and the cascade. Using it makes your CSS extremely difficult to debug, maintain, and override in the future. It often leads to a "specificity war" where you have to use more !important declarations to fix issues caused by previous ones.

You should rely on class specificity and source order instead. !important should only be used as a last resort (e.g., to override inline styles generated by a third-party script).

Responsive & Modern CSS

8. What is the "Mobile-First" approach in CSS?

Mobile-first means you write the default, base CSS styles for mobile devices (small screens) without any media queries. Then, you use min-width media queries to progressively enhance the layout and add complexity for larger screens (tablets, desktops).

Why? Mobile layouts are typically simpler (stacked elements). It's easier to add complexity for larger screens than to write complex desktop CSS and try to "undo" it for mobile.

📖 Deep dive: Responsive Design

9. What are CSS Custom Properties (Variables)?

They allow you to define reusable values in your CSS.

:root {
  --primary-color: #2563eb;
}

.button {
  background-color: var(--primary-color);
}

Benefits:

DRY (Don't Repeat Yourself): Change a value in one place, and it updates everywhere.
Theming: Easily implement Dark Mode by overriding variables in a media query or class.
Runtime: Unlike Sass variables, CSS variables are accessible and changeable via JavaScript at runtime.

📖 Deep dive: CSS Variables & Utility Patterns

Use an <a> tag when the action navigates the user to a different URL or a different section of the same page.
Use a <button> when the action performs an action on the current page, such as opening a modal, submitting a form, or toggling a UI state via JavaScript.

12. What are data attributes (`data-*`)?

Data attributes allow you to store custom, invisible data on standard HTML elements. This data can then be easily accessed by JavaScript or used as a CSS hook.

<button data-user-id="123" data-role="admin">Delete</button>

// Accessed in JS via the dataset property:
const btn = document.querySelector('button');
console.log(btn.dataset.userId); // "123"