Project 16: Login Screen

CSS Stylist

Builds on these lessons

Architecture Itcss Architecture Smacss Architecture Cube Css Architecture Layers Strategy

Step 1 of 2

Project

Explicit Order with @layer

Declare @layer reset, base, components; up top to fix the layer order once, then put .login-card inside @layer components { ... }. Native cascade layers give you the same predictable "general rules lose to specific rules" ordering that methodologies like ITCSS built by hand with file order — now enforced by the browser itself.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

@layer reset, base, components;

@layer components {
  .login-card {
    max-width: 360px;
    margin: 0 auto;
    padding: 32px;
    border-radius: 8px;
  }
}

← Previous Next →