m_ott’s avatarm_ott’s Twitter Archive—№ 20,158

    1. …in reply to @webrocker
      webrocker Yes, this would work most of the time. But here, it’s kind of a special case. 😬 I have a site with an existing CSS base. It uses Heydon’s lobotomized owl selector (* + *) to set a margin-top. Now, we need to include a React component into the site which comes with its own CSS.
      Permalink On twitter.com Twitter logo m_ott’s avatar ❤️ 1 Favorite 2022 Jun 29 Mood +3 🙂
  1. …in reply to @m_ott
    webrocker Of course, the CSS is written with a trillion of divs and single CSS classes like .a121341 .a12315 .a121316. 😘 Some classes add margins, many don’t. But they all then get a margin-top from the owl selector.
    On twitter.com Twitter logo m_ott’s avatar 2022 Jun 29 Mood +5 🙂
    1. …in reply to @m_ott
      webrocker Writing something like .app-container * + * { margin-top: 0 } doesn’t work, because it overwrites the margin for all the React CSS with single classes, too. So we used :where(.app-container * + *) to overwrite the margins within the component container with a specificity of 0.
      Permalink On twitter.com Twitter logo m_ott’s avatar ❤️ 1 Favorite 2022 Jun 29 Mood +2 🙂
      1. …in reply to @m_ott
        webrocker This way, the React classes can still overwrite this rule. Any rule I write for “dumb” Safari 13 will have an equal or higher specificity than the React classes, so I would need to reset the values for the smart browsers again – it’s complicated… 😂
        Permalink On twitter.com Twitter logo m_ott’s avatar ❤️ 1 Favorite 2022 Jun 29 Mood +2 🙂