CSS Unleashed

this is not your father's CSS

WIP. We'll see that, yes, we do still just code CSS, but we do so with the power of CLJS and reactive formulas, as well as the class attribute, if we like.

Matrix-powered CSS means three wins:

1. the full power of CLJS to cobble together our CSS;
2. individual formulas for individual CSS attributes, making code easy to follow; and
3. "co-location", meaning our CSS resides in the source with our component. Sorry, Virginia, "separation of concerns" is almost always a mistake.

Below we tick off the several ways CSS can be specified for mxWeb components, but it might be just as easy to read the source code where the same remarks are alongside actual code.

Background: in-line CSS capabilities in mxWeb

• the null capability: use the class DOM parameter to connect to predefined CSS;
• nearly null: just supply an in-line style as a string, e.g, "background:gray; border: thin dotted red";
• write a cell formula that reactively builds a style string based on other appstate;
• create a CLJS map {:color :red :padding "6px"} and convert to a style string with the style-string utility;
• build a CLJS in a cell formula;
• create a Matrix model of type mxweb.css/css and specify individual rules for individual style properties.