Re: [ClojureScript] CSS in CLJS
I looked at garden but never used it. It seems like a direct alternative to
SCSS/Less, but nothing more.
The intent of shadow.markup (sorry, couldn't think of a better name yet) is
that I basically never want to write a single selector ever again. There are
several cases where this is still needed but way less than I usually do.
You get several things for free by combining the actual HTML Tag with its CSS.
This is a pretty good introduction to the topic of css-in-js and
styled-components for React
https://www.youtube.com/watch?v=19gqsBc_Cx0
My API is very much inspired by this library, although less strings and more
Clojure. There are many more implementations of this here:
https://github.com/search?q=topic%3Acss-in-js=Repositories
Let me try with some sample Clojure code. You'd write something like this to
generate a simple html snippet:
(ns my.site
(:require [hiccup.page :refer (html5))
(defn page-html [title body]
(html5
[:head]
[:body
[:div.box
[:h1.box__title "foo"]
[:div.box__content body]]]))
Here we invented tree css classnames that we need to remember here and
whereever we get the actual CSS from. This over time leads to this:
http://mrmrs.io/writing/2016/03/24/scalable-css/ at least it did for me in just
about every project ever. Garden does not do anything in this regard I think,
you still define things in two different places.
With shadow.markup you do this:
;; put all defstyled elements in a separate namespace in a .cljc, so you can
use it everywhere.
(ns my.html.box
(:require [shadow.markup.css :as css :refer (defstyled)]))
(defstyled box :div
[env]
{:padding 10
:border "1px solid green"})
(defstyled title :h1
[env]
{:color "red"})
(defstyled contents :div
[env]
{})
;; my/site.clj
(ns my.site
(:require [my.html.box :as box]
[hiccup.page :refer (html5))
(defn page-html [title body]
(html5
[:head]
[:body
(box/box {}
(box/title {} title)
(box/contents {} body)))
]))
You do not need to remember whether to use a :h1 or :div, you just directly use
the elements. Since everything in CLJ(S) is namespaced we get a safe naming
scheme for CSS classes for free as well. You just write normal CLJ(S) code, you
don't need to context switch and synchronize the class names back and forth.
Refactoring the defstyled name in Cursive will rename all of its uses as well
the CSS classnames. The CLJS version with :advanced gives you dead code removal
for free, so if you don't use an element it's CSS will be removed as well.
There are many more things but the basic idea is to bundle the CSS with the
HTML that uses it while still supporting all of CSS (ie. no inline styles) and
remaining pure Clojure.
HTH,
/thomas
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.
Re: [ClojureScript] CSS in CLJS
On Thu, Feb 02, 2017 at 02:36:43PM -0800, Thomas Heller wrote:
> Hello,
>
> I'm not sure how many of you are in this horrible situation where you have to
> write CSS for your React Components. I typically have to write way more than
> I'd like and always hated the way I wrote it. Until a few weeks ago.
>
> I wrote this thing and so far I really like it. Too early to tell whether
> this is actually a good idea but I already prefer it over pretty much
> everything else I have used in the past (CSS, SCSS, OOCSS, BEM, ...).
>
> Anyways here it goes:
>
> (ns my.fancy.component
> (:require [shadow.markup.css :as css :refer (defstyled)]))
>
> (defstyled title :h1
> [env]
> {:color "red"})
>
> (h1 {} "hello world")
>
> In Clojure this produces hello
> world. There are also ways to generate the appropriate CSS so the
> element is actually styled in your page. Not totally settled on the final API
> but it works well enough for now.
>
> In ClojureScript this produces a ReactElement and should work with React
> natively and most CLJS React Wrappers like OM (although I tried no other than
> my own). No extra CSS generation is required here, just include it in your
> page and it will be styled.
>
> More here: https://github.com/thheller/shadow/wiki/shadow.markup
>
> This is basically my take on the whole css-in-js thing that is happening in
> the JS world if anyone follows this. I wasn't happy with any of their
> implementations so I wrote this.
>
> If you'd like to use this try it with this:
>
> [thheller/shadow-client "1.0.180"]
>
> The Clojure part also requires hiccup, the CLJS parts require React via
> cljsjs.react.
>
> If anyone is actually interested in this I'd be happy to go over some more
> details. I just open-sourced this as I wanted to use it in another project
> and needed a place to put it. Consider this very ALPHA though, you have been
> warned. ;)
>
> Cheers,
> /thomas
>
Thomas,
Thanks for the library. For all of my projects which require CSS, I've bee
using garden [1] -- how does your shadow client compare and what would you list
as the pros/cons for using shadow over garden?
Regards,
Jeaye
1: https://github.com/noprompt/garden
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.
signature.asc
Description: PGP signature
[ClojureScript] CSS in CLJS
Hello,
I'm not sure how many of you are in this horrible situation where you have to
write CSS for your React Components. I typically have to write way more than
I'd like and always hated the way I wrote it. Until a few weeks ago.
I wrote this thing and so far I really like it. Too early to tell whether this
is actually a good idea but I already prefer it over pretty much everything
else I have used in the past (CSS, SCSS, OOCSS, BEM, ...).
Anyways here it goes:
(ns my.fancy.component
(:require [shadow.markup.css :as css :refer (defstyled)]))
(defstyled title :h1
[env]
{:color "red"})
(h1 {} "hello world")
In Clojure this produces hello
world. There are also ways to generate the appropriate CSS so the element
is actually styled in your page. Not totally settled on the final API but it
works well enough for now.
In ClojureScript this produces a ReactElement and should work with React
natively and most CLJS React Wrappers like OM (although I tried no other than
my own). No extra CSS generation is required here, just include it in your page
and it will be styled.
More here: https://github.com/thheller/shadow/wiki/shadow.markup
This is basically my take on the whole css-in-js thing that is happening in the
JS world if anyone follows this. I wasn't happy with any of their
implementations so I wrote this.
If you'd like to use this try it with this:
[thheller/shadow-client "1.0.180"]
The Clojure part also requires hiccup, the CLJS parts require React via
cljsjs.react.
If anyone is actually interested in this I'd be happy to go over some more
details. I just open-sourced this as I wanted to use it in another project and
needed a place to put it. Consider this very ALPHA though, you have been
warned. ;)
Cheers,
/thomas
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at https://groups.google.com/group/clojurescript.
