CSS Direktiven

_.md

1. Basis CSS ist leicht Überschreibbar
2. Komponenten sind nie voneinander Abhänig

Basis CSS ist leicht Überschreibbar

Beispiel

❌ Don't

// base.sass

ul > li::before
  content: '▶'

// component/inline-menu.sass

.inline-menu > li:before
  content: ''

✅ Do

// component/vertical-menu.sass

.vertical-menu > li::before
  content: '▶'

Warum?

Das Anlegen von neuen Komponenten muss wenig CSS erfordern um Komplexität zu minimieren. Änderungen am basis css müssen selten sein weil Änderungen daran sich auf alle Komponenten auswirken.

Woran erkannt man das?

Sobald im Basis css ein langer Selektor steht oder eine Eigenschaft in einer anderen Komponente zurück gesetzt wird.

Komponenten sind nie voneinander Abhänig

Beispiel

❌ Don't

// component/wrapper.sass

.wrapper
  padding: 1em

// component/title.sass

.wrapper > .title
  margin-top: 0

✅ Do

// component/wrapper.sass

.wrapper
  &::before
    content: ''
    display: block
    margin-bottom: 1em

Warum?

Es ist unvorhersehbar in welcher Komponente eine andere Komponente angezeigt wird. Abhängigkeiten verschlechtern die nachvollziehbarkeit und vorhersehbarkeit.

Woran erkennt man das?

Wenn ein Namespace einer Komponente in einer anderen Komponente steht.

abhaengigketen.svg