Fork me on GitHub

hi I was looking at a webpage and it had certain classes that seem computer generated:

<div aria-label="Skip to secondary content" role="button" tabindex="0" class="css-18t94o4 css-1dbjc4n r-1niwhzg r-1n03560 r-sdzlij r-1phboty r-4iw3lz r-1xk2f4g r-109y4c4 r-2yi16 r-1qi8awa r-1ny4l3l r-1udh08x r-wwvuq4 r-u8s1d r-o7ynqc r-6416eg r-lrvibr r-92ng3h"><div dir="auto" class="css-901oao r-1awozwy r-9ilb82 r-6koalj r-18u37iz r-16y2uox r-1qd0xha r-a023e6 r-b88u0q r-1777fci r-rjixqe r-bcqeeo r-q4m81j r-qvutc0"><span class="css-901oao css-16my406 css-bfa6kz r-poiln3 r-a023e6 r-rjixqe r-bcqeeo r-qvutc0"></span></div></div>
I was wondering if the website uses some special tool to create these classes and why they choose to do it this way?


E.g. Material UI does a similar thing - you tell it what styles to use in which context and it will generate classes for those styles and assign them to the relevant elements. And I imagine that pretty much every CSS-in-JS solution does the same thing. The main reason is to avoid all the downsides of inline styles.

Lennart Buit07:09:22

yeah, this looks like tools like styled-components (those are prefixed with sc- tho) or emotion


what are some of the best solutions for doing this?


this is twitter btw


I’m wavering between grommet and rebass


@U2FRKM4TW material ui that has been rebranded as mui? I need to integrate with it in a current project.


> material ui that has been rebranded as mui? Yes.

🙏 1

Another reason (and the one that I believe is the real culprit behind an output with so many classes), is a minification step reduce the size of the CSS payload: if two or more elements share the same declaration, that declaration is pulled into its own class and then applied to both elements, so you end up with CSS that contains zero duplicate declarations. Say you have two or more elements with a color: red declaration, all would instead get, for example, a r-93ng3h class that only applies color: red.

Lennart Buit21:10:41

For Styled Components this is not true; In SC, styles are added via the CSSOM api’s. So no css rules are transmitted, only JS that produces css rules and dynamically appends them. Although, that is in the traditional CSR sense. If you do SSR, I don’t actually know whether it produces a stylesheet or not.

👍 1

I’m trying to do the demo in the following:


and this is what I have:

(defn theme []
    {:fonts {:body "Arial", "serif"
             :heading "Arial", "serif"}
     :fontSizes [12 16 18 20 24]
     :colors {:background "black"
              :primary "lightgreen"}}))


[:> ThemeProvider {:theme (theme)}
     [:div ;{:ref hero-ref}
      ;;[:a.invest-in-music {:href "/creators"} "Crowdsource Music"]
      ;;[:span.get-invested-in "Get Crowdsourced"]]
       [:> Heading 
        "Invest in royalty-generating creations. "]]
        [:> Link {:color :primary :m 3 :href ""} 
            "How Humboi Works"]
        [:> Link {:color :primary :m 3 :href "/i-have-a-creation"} "I have a creation"]]]
     [:a {:href ""} 
        [:img.discord-img {:src "../img/discord.png"}]]]


But I don’t see the theme applied in the Heading or Link. The color and font aren’t correct


any idea how to fix this?


@ps this is more of a #clojurescript question


that being said your :fonts map looks wrong


The library doesn’t work actually


:fonts {:body "Arial", 
        "serif" :heading
        "Arial", "serif"}


I don't think you want "serif" and "Arial" to be keys


Yeah that’s wrong


But ThemeProvifer doesn’t work there was GitHub issue


it looks like if you use emotion-theming it would work, according to that issue


the latest version of emotion seems to have broken something and the rebass devs haven't fixed it


I switched to grommet


emotion-theming doesn’t work either