One of my favorite features of EmotionJS

neatEmotionTrick.js

// One of my favorite things about using Emotion for CSS-in-JS is the
// ability to put nested CSS selectors write into my components.
// Ignoring my use of `bs()` from my ShevyJS library (it just mathematically
// calculates spacing based on my vertical rhythm config), this is such
// a simple way to tell this div to space these links out if they're both
// present. I love it.

function MyComponent() {
  return (
    // ... lots of other code
    
    // Right here, neighboring links need some space!
    <div css={{ 'a + a': { marginLeft: bs(0.5) } }}>
      {justEnoughDevUrl && (
        <LinkButton href={justEnoughDevUrl}>
          View on JustEnoughDev
        </LinkButton>
      )}
      {eggheadUrl && (
        <LinkButton href={eggheadUrl + EGGHEAD_AFFILIATE_QUERY_PARAM}>
          View on egghead.io
        </LinkButton>
      )}
    </div>

    // ... more code here
  )
}

// :chefs_kiss: it just works perfectly. Such a nice API!