Cascade Layers

Frontend, 3. semester

Cascade Layers

Mål: Forstå og anvende principperne bag

Reset / Normalize

Jeres tur

The cascade

Lad den være åben

Tilføj en blå border på 4px til .my-input

Kig i DevTools for at finde fejlen

Quiz

p:not(#id) {
  color: green;
}

p.class {
  color: red;
}

<p class="class">text</p>

<p id="id">last text</p>
p.test a {
  color: green;
}

a:hover {
  color: deeppink;
}
<p class="test">
  <a href="#0">Hvilken farve?</p>
</p>

Quiz

The cascade

https://polypane.app/css-specificity-calculator/

Author styles

0,0,0

0,0,1

🤷‍♂️

Cascade layers

@layer reset {
  /* ... other reset rules */
  
  input[type="text"] {
    border: 1px solid gray;
  }
}

@layer components {
  /* ... other component rules */
  
  .my-input {
    border: 4px solid blue;
  }
}

order matters

Cascade layers

@layer reset, components, utilities;

@layer reset {
  /* ... other reset rules */
  
  input[type="text"] {
    border: 1px solid gray;
  }
}

@layer components {
  /* ... other component rules */
  
  .my-input {
    border: 4px solid blue;
  }
}

configure up front

1

2

3

Cascade layers

@layer reset, components, utilities;

@layer components {
  /* ... other component rules */
  
  .my-input {
    border: 4px solid blue;
  }
}

@layer reset {
  /* ... other reset rules */
  
  input[type="text"] {
    border: 1px solid gray;
  }
}

configure up front

1

2

3

Cascade layers

@layer reset, components, states;

@layer components {
  /* Buttons, inputs etc. */
}

@layer states {
  /* Make sure stats override, no matter specificity count */
  :disabled {
    background-color: #ddd;
    color: #999;
  }
  
  :focus-visible {
    outline: 2px solid var(--focus-color, currentColor);
    outline-offset: 2px;
  }
}

Cascade layers

@layer reset, theme, global, layout, components, utilities, states;

Cascade layers

@layer reset {
  ul[class] {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: start;
  }
}

@layer utilities {
  .space-top {
    margin-top: 2rem;
  }
}

eksempel

CSS Selectors

  1. Oversæt selectoren (Fronter)

  2. Gennemfør CSS Speedrun (Fronter)

  3. Vi kigger på det i plenum

Øvelser - 25 min

Recap and beyond

Nåede vi, hvad vi skulle?

  1. Forstå, hvordan Subgrid hjælper med komplekse layouts

  2. Anvende Container Queries for at lave responsive komponenter

  3. Forstå og anvende principperne bag Cascade Layers

  4. Øvelser, øvelser og flere øvelser for at opbygge praktisk erfaring