"how do I" questions

[threepointone]

I expect the pure css folk (like myself) to ask simple, basic questions, regarding how they'd do what they already do easily in css, with xyz css-in-js solution. I'm just starting the same for glamor, but sharing the qn titles to get some feedback -

how do I -

• apply a style to a single element
• apply a style to a class of elements
• attribute selectors
• pseudo classes
• specificity
• apply style based on relationships with other elements
• font faces/keyframes/media queries

what am I missing? cheers.

[taion]

I think one that comes up is "how do I integrate with global CSS libraries like Bootstrap"... or to be a bit self-centered, how to do so in the context of React wrappers for those libraries (e.g. React-Bootstrap) that wrap up and encapsulate sub-components that a user might still want to target with CSS.

(Oof, real mouthful right there.)

[threepointone]

good one, agreed -

• how do I use < popular css framework > with < your stuff >

[taion]

Sure. Just wanted to highlight that this can be bit harder than it seems if you're using React wrappers for those libraries. React-Bootstrap has a bunch of components that look a bit like:

({ children, ...props }) => (
  <div {...props} className={classNames(props.className, 'parent')}>
    <div className="child">
      {children}
    </div>
  </div>
);

where sometimes you want to style the component with .child.

This is straightforward with normal CSS. Can be trickier in other contexts.

[taion]

And I'm fine with the answer being "fix the React-Bootstrap API" – just need to know how.

[threepointone]

Yeah. Frankly, while they look great and work in a pinch, I'm not fully sold on react-bootstrap/jsxstyle styling via components. Not sure I know the answer, but it makes some simple things hard, which makes me question the approach.

[taion]

Well, it's straightforward with CSS Modules (and I think glamor as well?) in that you just target the equivalent of :global(.child) in a selector.

IIRC we couldn't figure out how to do it with Aphrodite, though, so we ended up cutting a project that we initially built with Aphrodite over to CSS Modules.

[threepointone]

Yeah but it isn't that brittle/ dependent on implementation details? I agree, it works, but scary.

I'll add more to this point after thinking some more, feel like I'm missing something.

[taion]

It's worked okay for us so far in using CSS Modules with React-Bootstrap. For React-Bootstrap we consider the DOM representation part of the public API, so there are semver guarantees.

Not entirely ideal, but works okay for now.

[threepointone]

made some progress on a glamor version of this https://github.com/threepointone/glamor/blob/master/docs/howto.md