This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-05-23
Channels
- # aws (4)
- # beginners (14)
- # boot (7)
- # cider (75)
- # clara (87)
- # cljsrn (6)
- # clojure (115)
- # clojure-berlin (2)
- # clojure-dusseldorf (2)
- # clojure-gamedev (8)
- # clojure-italy (15)
- # clojure-russia (9)
- # clojure-spec (46)
- # clojure-uk (195)
- # clojurescript (24)
- # css (44)
- # datascript (19)
- # datomic (18)
- # emacs (6)
- # fulcro (57)
- # hoplon (1)
- # jobs (3)
- # jobs-discuss (37)
- # jobs-rus (3)
- # luminus (6)
- # lumo (28)
- # off-topic (24)
- # onyx (11)
- # planck (8)
- # re-frame (31)
- # remote-jobs (12)
- # rum (10)
- # schema (4)
- # shadow-cljs (28)
- # specter (24)
- # sql (3)
- # tools-deps (34)
- # vim (43)
- # yada (10)
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?
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
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.
I have a side-project that’s got shared view code for three targets: web, electron, and react native
and once I embraced the idea that I could get rid of the indirection layer that “semantic classes” produced it became a lot easier
Can you digress a bit more on this?
“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
if you instead name something for what it does, that forces you to keep what it does small and specific
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
I also found this
seems not largely used though?