Fork me on GitHub
#css
<
2018-05-23
>
leontalbot19:05:42

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?

leontalbot20:05:02

I am a bit. Never used though

niamu20:05:20

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

niamu20:05:50

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

niamu20:05:08

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

leontalbot20:05:03

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

leontalbot20:05:21

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

niamu20:05:26

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.

niamu20:05:55

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.

leontalbot20:05:14

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

niamu20:05:15

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.

niamu20:05:47

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

mattly20:05:13

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

mattly20:05:14

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

leontalbot20:05:01

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)

leontalbot20:05:44

I suppose prefixing classes could avoid conflicts?

niamu20:05:48

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.

mattly20:05:21

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

theeternalpulse02:05:01

This is interesting, I think I'm going to switch to this, I had to do some manual hoisting of local css objects to a header tag that's not very convenient or sutstaniable. This has exactly what I need.

mattly20:05:37

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

mattly20:05:00

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

mattly20:05:15

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

mattly20:05:26

and no such thing as style sheets

mattly20:05:08

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

felipebarros21:05:12

Can you digress a bit more on this?

mattly22:05:28

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

mattly22:05:05

“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

mattly22:05:54

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

mattly22:05:59

and composability

mattly22:05:41

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

mattly22:05:52

and therefore reusable and composable

mattly22:05:57

similar to functions 😄

niamu20:05:47

React Native compatibility is a strong argument.

👍 4
mattly21:05:20

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

niamu21:05:49

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.

👍 4
niamu21:05:45

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

leontalbot21:05:05

cljss seams only for cljs

leontalbot21:05:35

I also found this

leontalbot21:05:46

seems not largely used though?