Clojurians Log v2

Hello guys, quick question: If you were asked to make .cljc web components packaged as a library for both reagent and server-side hiccup. What would be your strategy, especially for handling styling/css? Any examples out there?

thanks!

@leontalbot Are you familiar with garden (https://github.com/noprompt/garden)?

I am a bit. Never used though

do you?

Yeah, I’ve used it quite a bit. I like it a lot and works nicely as a *.cljc library.

But, let’s talk about what you’re expecting the library to do on the front-end.

Is it necessary for reagent components to inline/embed styles?

Thanks @niamu for your help! Could the required component lib add css files to consuming project?

And if so, do you think it is a good idea?

I’m of the opinion that CSS should only ever be served from the server and shouldn’t live in the front-end at all. If you keep things separated that way, then everything is always server-side renderable which is advantageous and the only remaining concern as I see it is keeping track of which classes/IDs to use in your markup.

I don’t really have advice for managing the implicit relationship between the CSS markup and your HTML markup though. There are people who will recommend strategies like BEM (http://getbem.com) but it’s really just a collection of naming conventions that help make it easier to connect those implicit relationships.

ok. When you build library components you almost always add or modify css

Keeping in mind I haven’t actually built a component library, my off-hand strategy would be to have the library serve the components that are just React components without style information in them (just references to classes) and then separately serve CSS via Garden which would allow someone to only refer to the component styles that they are using.

That would allow easy theming possibilities later as you could swap out alternate styles as needed.

you can also avoid the naming problems altogether: https://johnpolacek.github.io/the-case-for-atomic-css/

I’ve been working on a utility class generator with garden but it’s nowhere near prime-time

I understand that having a separate project for css is a good option, but not sure for our needs (constant addition of small components that we want independant)

I suppose prefixing classes could avoid conflicts?

Yeah, perhaps investigating Atomic CSS is a good idea then since the coupling of style with markup is actually what you’re trying to achieve.

in addition to garden there’s also https://github.com/roman01la/cljss

which might be a good fit for what you’re trying to do

I have a side-project that’s got shared view code for three targets: web, electron, and react native

and once you start getting into react native, there is no “markup” to couple style to

and no such thing as style sheets

and once I embraced the idea that I could get rid of the indirection layer that “semantic classes” produced it became a lot easier

React Native compatibility is a strong argument.

it’s not so much line-by-line technical compatibility as it is mindset compatibility

For completeness, I’ll say the 2 main benefits of an external stylesheet as I see it is theming and deduplication of data. But an external stylesheet does have trade-offs long-term maintenance and raises the barrier to understanding how style is affecting a component.

I agree with @mattly that you’ll probably want to explore something akin to Atomic CSS for your purposes though.

cljss seams only for cljs

https://github.com/roman01la/cljss/issues/29

I also found this

https://github.com/thheller/shadow/wiki/shadow.markup

seems not largely used though?

Can you digress a bit more on this?

I think it’s like the difference between OOP and FP

“semantic” css classnames are a bit like OOP classes in that you’re typically naming something for what it is rather than what it does

and naming is really hard, and gets in the way of reusability

and composability

if you instead name something for what it does, that forces you to keep what it does small and specific

and therefore reusable and composable

similar to functions 😄