231101.md

Moin Jason! Als Input wenn du heut in das Styling der Site einsteigst, sind mir noch ein paar Punkte eingefallen:

emotion bietet verschiedene Ansätze Styles in react zu schreiben, wobei manche performanter sind als andere. Grundsätzlich ist es empfohlen Styles “dry” und statisch zu halten, damit sie nicht bei jedem Render neu geparst, serialisiert und angewendet werden. In den Docs wird das u.a. hier beschrieben:

https://emotion.sh/docs/best-practices

Dynamische styles, die z.b. abhängig von Props einer Komponente sind, können z.B. easy und performant über classes oder data-attributes abgebildet werden.

Dynamic styles (nicht so performant):

<div css={myDynamicStyle(prop1, prop2)} />

const myDynamicStyle = (prop1, prop2 ) => css`
  color: ${prop1 === 'a' ? 'red' : 'blue' };
`

Option A) classes:

<div css={myStaticStyle} className={`${prop1 === 'a' ? 'propA' : ''}`} />


const myStaticStyle = css`
  color: blue;

  &.propA {
    color: red;
  }
`

Option B) data-attribuites:

<div css={myStaticStyle} data-prop1={prop1} />

const myStaticStyle = css`
  color: blue;

  &[data-prop1="a"] {
    color: red;
  }
`

Auf diese Weise könnte man auch super mit css variables und media queries arbeiten:, ohne die responsive Logik in JS navchbauen zu müssen: Mal ein schnelles Beispiel:

function Box({borderRadius = 1}) {
  return <div data-borderRadius={borderRadius} css={styles} />
}


const styles = css`
  --borderRadius: 1rem;
  
  border-radius: var(--borderRadius);
  
  &[data-borderRadius="2"] {
    --borderRadius: 2rem;
  }
  
  &[data-borderRadius="3"] {
    --borderRadius: 3rem;
  }  

  @media (max-width: 800px) {
    --borderRadius: 0.5rem;

    &[data-borderRadius="2"] {
      --borderRadius: 1rem;
    }

    &[data-borderRadius="3"] {
      --borderRadius: 2rem;
    }  
  }

`

Um styles zu mergen, z.B. für Base Styles von genereischen Komponenten wie Buttons hab ich ganz gute Erfahrung mit einem eigenen Prop für additional Styles.

// Button.jsx
function Button({additionalCss = css``}) {
  return <button css={[baseStyles, additionalCss]} />
}

const baseStyles = css`
  color: red;
`

// Parent.jsx
function Parent() {
  return <Button additionalCss={myCustomButtonStyles} />
 }

const myCustomButtonStyles = css`
  color: blue;
`