Clojurians Log v2

Hey I’m wondering if there has been any unofficial best practice established for achieving pseudo selectors with garden inline at the component level (using reagent). So far from research it seems that the only way to do it is to use the :style tag in a parent div or component?

That’s correct. The only way to compose pseudo selectors in CSS is through an external stylesheet or styles within a style tag.

Something that would be cool to build is a macro that could be used within components that compiles style information to a single external file. I’ve been meaning to find time to experiment with this, but haven’t yet.

Right, basically like radium

that’d be great to have

I’m kind of hesitant to go down the road of building a large web app where <style> tags are being injected into the dom though, just “feels” wrong kind of

I know exactly what you mean. However, I can at least offer that it does work remarkably well.

And hopefully when such a macro exists, the refactoring and code cleanliness will be simple and straightforward.

have you been using <style scoped> to try and contain it a bit more and remove the need for class names to some extent on child elements ?

Yes, unfortunately the support for the scoped attribute is still limited so as a fallback I’ve been using gensym on classes for the root element of components to scope styles.

ah I see, I will have to look into that

thanks a lot for the info, it’s been really helpful

No problem. Let me know what kind of solution you go with. I’d be interested to hear what works well for you.

I’d like very much to roll inline styles as I feel thats moving more in the “right” direction and have seen a lot of compelling use cases with react

just trying to really get my ducks in a row and get a feel for how it’s going to look code wise before pitching it to my team

This may help you out a little, even though it is using Om.

(defn component
  [data owner]
  (reify
    om/IInitState
    (init-state [_]
      {:root (keyword (str (name :div)
                      (gensym ".unique")))})
    om/IWillMount
    (will-mount [_]
      (om/set-state! owner :style
                     (css [(om/get-state owner :root)])))
    om/IRenderState
    (render-state [_ {:keys [root style]}]
      (html
       [root
        [:style {:scoped "scoped"} style]
        ]))))

ah so they are using the unique identifier in conjunction with scoped

Yeah, I’ve done that so refactoring later when support for scoped is universal is simple.

yeah that’s smart, this doesn’t look too bad really

I like that I get to separate CSS almost entirely into the IWillMount section. Then styles that rely on state become embedded in the HTML elements in IRenderState. Which feels nice.

Style information becomes pretty explicit then.

I see, yeah I will have to try coding the equivalent in reagent with some sort of similar abstraction for pulling in the css def, maybe even just an import or declaring it in the component file above the component itself

Is there some reason in particular you’re storing style definitions in state?

It hasn’t yet come in handy, but my initial reason for that was so that I style information is something that you can query from the component itself. It makes editing a single component entirely self-contained.

ah i see

I’m still exploring as well, but this is what we’ve been building at my company so far and it has worked very well for us.

Oh really, well that’s great to hear, I’d definitely like to be able to do likewise, but there is some resistance on the team from those that are more accustomed to using less etc so it needs to be a compelling sell

Yeah, that’s tough. Before I switched to garden I was only ever writing pure CSS.

What sold me was the build tools for generating CSS with garden. I really didn’t like the build tools outside of Clojure for handling CSS so I just stuck to writing it on my own rather than relying on pre-compilers.

Having figwheel re-render component CSS alongside the HTML is extremely handy.