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

<svg xmlns="http://www.w3.org/2000/svg" width="460" height="311" viewBox="0, 0, 460, 311">
    <text transform="translate(224.515 87.046)">
        <tspan x="-44.43" y="1.534" font-family="HelveticaNeue-Bold" font-size="20">basis.css</tspan>
    </text>
    <path d="M224.515 10l19.958 20.104V60h-39.915V10h19.957" fill="#D0CFCE"/>
    <g stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
        <path d="M225.015 10.5l19.958 20.104V60.5h-39.915v-50h19.957"/>
        <path d="M225.015 10.5l-.042 20.104h13.189"/>
    </g>
    <text transform="translate(148.739 276.213)">
        <tspan x="-57.96" y="-5.5" font-family="HelveticaNeue-Bold" font-size="20">component/</tspan> <tspan x="-34.81" y="19.5" font-family="HelveticaNeue-Bold" font-size="20">foo.css</tspan>
    </text>
    <path d="M148.739 192.133l19.957 20.104v29.896h-39.915v-50h19.958" fill="#D0CFCE"/>
    <g stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
        <path d="M149.239 192.633l19.957 20.104v29.896h-39.915v-50h19.958"/>
        <path d="M149.239 192.633l-.043 20.104h13.189"/>
    </g>
    <text transform="translate(300.292 276.213)">
        <tspan x="-57.96" y="-5.5" font-family="HelveticaNeue-Bold" font-size="20">component/</tspan> <tspan x="-34.08" y="19.5" font-family="HelveticaNeue-Bold" font-size="20">bar.css</tspan>
    </text>
    <path d="M300.292 192.133l19.958 20.104v29.896h-39.915v-50h19.957" fill="#D0CFCE"/>
    <g stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
        <path d="M300.792 192.633l19.958 20.104v29.896h-39.915v-50h19.957"/>
        <path d="M300.792 192.633l-.042 20.104h13.189"/>
    </g>
    <g stroke="#F00" stroke-width="3">
        <path d="M152.539 183.636l31.19-67.437" fill="none"/>
        <path d="M187.541 117.962l.89-11.929-8.514 8.402z" fill="#F00"/>
    </g>
    <g stroke="#F00" stroke-width="3">
        <path d="M285.438 183.636l-31.19-67.437" fill="none"/>
        <path d="M258.06 114.435l-8.513-8.402.889 11.929z" fill="#F00"/>
    </g>
    <text transform="translate(371.125 146.426)">
        <tspan x="-68.5" y="7" font-family="HelveticaNeue-Bold" font-size="20" fill="#F00">Abhängikeiten</tspan>
    </text>
</svg>