lambdaisland / ornament

Clojure Styled Components
Mozilla Public License 2.0
118 stars 13 forks source link

Best practice for using style tokens ad-hoc? #11

Closed GetBitOutdoors closed 3 months ago

GetBitOutdoors commented 2 years ago

Is there a best practice to approximate a tailwind kind of flow, using keywords as style-tokens in hiccup.

I want to avoid having to "name" every uniquely-styled chunk of html (component). Or "name" every permutation of a style rule, even if it's a one-off.

Can one use style tokens directly in hiccup-style declaration, without separately "naming" component?

Options?

Inlining style rules? Maybe a separate concern. Maybe a partial solution?

Example: Generating some bespoke html, from the REPL, that I want to paste into a hosted blog post, where I don't have access to stylesheet.

I understand that this would be a limited mode that could not render all styles (no pseudo-classes, etc).


Opt 2?

Declare a set of styles, and pre-render a set of css rules for common tokens... for liberal ad-hoc usage, ala tailwind.

Having to declare the styles, is almost akin to extra "naming", but maybe you only do it once.?

How could one invoke these tokens from hiccup?


Would all this be purely a Girouette concern, instead of Ornament's component context?

What is the most simple hiccup-style style-tokens story?

PS. Please tell me I'm over-thinking this :)

plexus commented 2 years ago

Part of the philosophy of Ornament is that we want to avoid this kind of inline styling because we've found over projects that the styling gets to dominate the markup too much, making the code hard to work on and maintain. Have a look at the examples here, you don't necessarily need to introduce a lot of new names, but adding some names can actually be a good thing. Think of it as comments for the next person looking at the code, plus it gives you visual hooks when looking at your web browser's inspector.

This is of course a particular choice that not everyone needs to like. If you like to have it all in one pile then just use plain functions that return hiccup together with Girouette. You will likely go a little slower with Ornament, but you can still be very productive this way, and you gain long term maintainability. It also makes the DOM structure itself more explicit and clear, so you are more likely to consider the semantics of the elements and the structure you are using (or at least, you should).

GetBitOutdoors commented 2 years ago

Ok, sounds reasonable. Thanks for the feedback.