Inline styles remain inline styles. It's not CSS-in-JS.

roger. So when i type {:style "blah" } in reagent i'm just getting inline styles? I understand this a context switch. I mean, i see them as inline styles when things render, but the presence of the "css in js" ecosystem has me* confused then.

Assuming built-in elements - yes (although {:style "blah"} is invalid, of course).

thanks a lot. I think i have a better grasp of whats going on. Likely useful parts of css-in-js like cljss https://github.com/clj-commons/cljss then are for things that can't be declared as inline styles (keyframes, etc...). But with a tool like cljss you can manage all your application sate using cljs. The reason this has been on my mind is because every application i have worked on professional goes out of there way to use some sort css-in-js solution like https://cssinjs.org/?v=v10.9.0 which leads to a significant amount of indirection that i can't justify. It's not easier to read, it's harder to follow, things now have css class names and clojure variable names. it's a lot of punting the ball around without it going in any sort of goal i can see.

assuming you're using reagent to build a web app, the :style prop on a DOM element gets turned into the style prop of a React DOM element. docs are here https://reactjs.org/docs/dom-elements.html#style

reagent does not have any dependencies other than react

CSS-in-JS can be nice when you colocate your CSS and components together, e.g. they all live in the same file. we have an internal lib that exposes a simple defcss macro which allows you to define a CSS class in clojurescript code, and then use that class wherever. the name of the class will include the namespace and var, which makes it a little easier to go from inspecting HTML to where the class is defined in code

@U4YGF4NGM thanks. It wasn't obvious to me that the value to the reagent :style key was being turned into a prop, or possible compiled directly into a css style. I suppose i'm confused why it would be a react prop at all, as were not passing something to the component, it's a hardcoded value of the html that the component will be manipulating. On the topic of css-in-js, I agree in principle, i don't want to use css organization methods when i can just use clojures. The issue is that composition of classes at run time has to be done by string concatenation. Though maybe that's something that could be fixed so we could keep the hashmap mechanics.

React handles all DOM concerns for reagent. the component does not manipulate HTML. React turns your React element data into HTML in a complex process of diffing, to ensure that efficient DOM operations are done. In JS, you would probably use JSX syntax to write code that constructs elements. At compile time, the JSX compiler turns <div style={backgroundColor: "red", width: 300} /> into React.createElement("div", {backgroundColor: "red", width: 300}) and then at runtime, React uses that element object to create an actual DOM node and updates it using its diffing process. Reagent simply turns your hiccup syntax [:div {:style {:background-color "red" :width 300}] into React element objects at runtime.

would highly recommend reading the docs (or watching some videos) on how React works. it is essential if you're going beyond simple apps using reagent

> without any attempt to explain or justify I'd say that's because it's not React's job to explain all the parts of the Web it's tangentially related to. There has been and still are flame wars in the CSS land, and there are bazillions of benchmarks of various quality.

In the JS world, I believe there are solutions that let you work with styles as data, at run time. But I don't remember any particular libraries' names.

Actually, I think MUI works that way. It's not a CSS library but a whole UI framework, but it probably uses some CSS-in-JS library.

@U2FRKM4TW > I'd say that's because it's not React's job to explain all the parts of the Web it's tangentially related to In plain html + css, inline styles are faster then classes in many cases, so it's odd react would both comment and be wrong. I assume by the fact they are commenting that react does in fact play a role. That's what i'm trying to wrap my head around.