Wie strukturiere ich ein CSS File?

Aufbau eines CSS Files

Wieso?

Eine einheitliche und saubere Struktur bei einem CSS File, sowie auch bei jedem anderen Code ist kein Hexenwerk, vereinfacht jedem das Lesen und sorgt für eine deutlich bessere Übersicht.
Bei Webseiten kann man sich zwischen dem Mobile- oder Desktop-First Ansatz entscheiden. Hier wird der Mobile-First Ansatz verwendet.

Struktur

• Definition der lokalen Variablen (in dem größten umschließenden "Container")

  Copy.container:local {
    --headline-font-size: 16px;
    --headline-line-height: 24px;
    
    --text-font-size: 14px;
    --text-line-height: 20px;
  }
  

• Definition der Media Query(s) mit entsprechenden Änderungen der Variablen. Die Breakpoints müssen hierbei durch das jeweilige Design selbst festgelegt werden. (768px ~ normales iPad)

  Copy@media(min-width: 768px) {
    .container:local {
      --headline-font-size: 20px;
      --headline-line-height: 28px;
    
      --text-font-size: 16px;
      --text-line-height: 24px;
    }
  }
  

• Definition der Selektoren

  Copy.headline {
    font-size: var(--headline-font-size);
    line-height: var(--headline-line-height);
    color: blue
  }
  
  .text {
    font-size: var(--text-font-size);
    line-height: var(--text-line-height);
    color: cornflowerBlue
  }
  

  (Don't judge the color, I'm not a designer)

Welche Werte sind Variablen und welche nicht?

Als Variablen werden nur Werte definiert, die sich auch tatsächlich mit der Bildschirmgröße ändern. (Wie es der Name auch schon sagt, lat. variabilis -> "sich verändern")
Im obigen Beispiel ändert sich der Wert der Farbe nicht mit der Textgröße, somit braucht er auch nicht lokal definiert werden.

Beispiel

JS/TS:

Copyexport const Example = ({headline, description}: exampleProps) => (
  <div className="container">
    <p className="headline">{headline}</p>
    <p className="description">{description}</p>
  </div>
)

interface exampleProps {
  headline: string
  description: string
}

CSS:

Copy.container:local {
  --container-padding: 40px 16px 32px;

  --headline-font-size: 24px;
  --headline-line-height: 32px;

  --description-margin-top: 20px;
  --description-font-size: 16px;
  --description-line-height: 24px;
}

@media(min-width: 768px) {
  .container:local {
    --container-padding: 64px 0 32px;

    --headline-font-size: 32px;
    --headline-line-height: 40px;

    --description-margin-top: 24px;
    --description-font-size: 20px;
    --description-line-height: 32px;
  }
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--container-padding);
}

.headline {
  font-size: var(--headline-font-size);
  line-height: var(--headline-line-height);
}

.description {
  font-size: var(--description-font-size);
  line-height: var(--description-line-height);
  max-width: 736px;
  text-align: center;
  margin-top: var(--description-margin-top);
}