Common CSS Interview Questions

Layout Challenges

Holy Grail Layout

/* Flexbox */
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 200px;
}

.content {
  flex: 1;
}

/* Grid */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  min-height: 100vh;
}

Sticky Footer

/* Flexbox */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* Grid */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Modern */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

Equal Height Columns

/* Flexbox */
.container {
  display: flex;
}

.column {
  flex: 1;
}

/* Grid */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Responsive Sidebar

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    display: none;
  }
}

Aspect Ratio Box

/* Modern */
.box {
  aspect-ratio: 16 / 9;
}

/* Fallback */
.box {
  width: 100%;
  padding-top: 56.25%; /* 9/16 * 100 */
  position: relative;
}

.box-content {
  position: absolute;
  inset: 0;
}

Centering Techniques

Flexbox (Recommended)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid

.container {
  display: grid;
  place-items: center;
}

Absolute + Transform

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Margin Auto (Flex/Grid)

.parent {
  display: flex;
}

.child {
  margin: auto;
}

Text Centering

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

Vertical Centering (Single Line)

.parent {
  line-height: 200px; /* Match height */
}

.child {
  display: inline-block;
  vertical-align: middle;
}

},
{
  "id": "css-optimization",
  "title": "CSS Optimization",
  "content": "## CSS Optimization

Reduce Specificity

/* Bad */
#header .nav ul li a { }

/* Good */
.nav-link { }

Use Shorthand

/* Bad */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Good */
margin: 10px 20px;

Avoid Redundancy

/* Bad */
.button { padding: 10px; }
.button-primary { padding: 10px; background: blue; }

/* Good */
.button { padding: 10px; }
.button-primary { background: blue; }

Use CSS Custom Properties

:root {
  --primary: #3b82f6;
  --spacing: 1rem;
}

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

Critical CSS

<style>
  /* Above-the-fold styles */
  .header { }
  .hero { }
</style>
<link rel="preload" href="styles.css" as="style">

Minimize Layout Thrashing

/* Bad: Triggers layout */
.width { width: 100px; }
.height { height: 100px; }
.top { top: 0; }

/* Good: GPU-accelerated */
.transform { transform: translateX(100px); }
.opacity { opacity: 0.5; }

Container Queries vs Media Queries

/* Container queries are better for components */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { display: flex; }
}