Summary - Component style

Build component styles with nesting.

Components with nesting

Nesting gathers every part of a component into one block. Inside .profile-card, the heading, paragraph, hover state and small-screen behavior sit together; the stylesheet mirrors the HTML.

In this summary we bring it all together: base styles, pseudo-classes, compound selectors and responsive behavior in one block.

Keep it shallow

Nesting is powerful, but as it deepens, selector specificity rises and reading gets harder. Going more than three levels deep is usually a bad idea; it keeps styles simpler.

A component's root, its children and its pseudo-classes are usually enough. If you need deeper nesting, it may signal that the HTML structure could be simplified.

Exercise Profile card styles

Add three nested blocks inside the .profile-card selector: an h2 selector with color: navy, an &:hover pseudo-class with background: #f5f5f5, and an &.featured compound selector with border: 2px solid navy.

Show example solution

Add three blocks inside .profile-card.
Example solution:
/* add sections inside .profile-card */
.profile-card {
  padding: 1rem;
  h2 {
    color: navy;
  }
  &:hover {
    background: #f5f5f5;
  }
  &.featured {
    border: 2px solid navy;
  }
}

Exercise Add a dark theme

Add a @media (prefers-color-scheme: dark) block inside the .profile-card selector with background: #111 and color: #eee.

Show example solution

Add a @media block inside .profile-card.
Example solution:
/* add dark theme inside .profile-card */
.profile-card {
  padding: 1rem;
  @media (prefers-color-scheme: dark) {
    background: #111;
    color: #eee;
  }
}

Test yourself

Match each concept to its snippet

Descendant

.card { p { } }
Pseudo-class

.card { &:hover { } }
Suffix

.btn { &-primary { } }
Compound class

.tab { &.active { } }

Complete the component

/* profile card */
.profile-card {
  padding: 1rem;
  ____ {
    color: navy;
  }
}

Show answer

/* profile card */
.profile-card {
  padding: 1rem;
  &:hover {
    color: navy;
  }
}

Next lesson: Challenge - BEM architecture

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies