Could stylesheets go tiddly in 2022?

[twMat]

Wouldn't this approach to stylesheets be superior to the monoliths we have now?

The stylesheet tiddlers really show a generated list of transclusions from individual tiddlers local stylesheets.

By "local" I mean that each regular tiddler can have a designated style field. This makes it much easier to style things because, well, the styling code is right there and there is no need to use a local <style> block.

In the stylesheet tiddler, the list of transclusions is rearrangeable with DnD to set precedence. The stylesheet tiddler can also have its own content, perhaps both before and after the generated list, so to define "base styles" and "top precedence styles" (at tiddler bottom), i.e beyond the aggregated content.

In edit mode, the stylesheet tiddler shows transclusions in edit-text widgets, i.e allows editing of the (remote) styles that really exist in the individual tiddlers.

There could be a separate stylesheet tiddler aggregating shadow stylesheets. Currently we must go dig in the plugin list to locate the stylesheets.

The tiddlers with the defined styles can have a stylecomments field that end up like /* comments */ in the generated stylesheet.

Here's the kicker:

Any such regular tiddler can also edit (i.e transclude) another tiddlers style field! Thus any style that the user deems relevant for the current tiddler can be (manually) included for easy manipulation in the current tiddler.

And the user can set up a custom stylesheet that filters out whatever tiddler style fields are relevant for that designated stylesheet! There could be one designated to "buttons" another to "main layout", however he want's to slice and dice - they are just transclusions anyway! I'm reminded of an old quote by a wise man:

The philosophy of tiddlers is that we maximise the possibilities for re-use by slicing information up into the smallest semantically meaningful units with rich modelling of relationships between them. Then we use aggregation and composition to weave the fragments together to present narrative stories.

Hey! ;-)

[Jermolene]

Hi @twMat

Currently we must go dig in the plugin list to locate the stylesheets.

I'm not sure I follow – surely there's one click access to all the stylesheets in control panel under Advanced -> Stylesheets?

I think the main advantage of the arrangement you describe is that it combines stylesheets with the tiddler to which they apply. But that's really only a help if there is a precise 1:1 relationship between styles and tiddlers, and breaks down if want wants styles that are shared between tiddlers.

[twMat]

@Jermolene - thank you for your reply!

I'm not sure I follow – surely there's one click access to all the stylesheets in control panel under Advanced -> Stylesheets?

You're right, my bad. I don't think I've ever used that route, I always go via the plugin because I kind of think "OK, this is a shadow in a plugin" :-)

I think the main advantage of the arrangement you describe is that it combines stylesheets with the tiddler to which they apply. But that's really only a help if there is a precise 1:1 relationship between styles and tiddlers, and breaks down if want wants styles that are shared between tiddlers.

Fair point. But I figure the styles have to be stored somewhere, be it in an arbitrary tiddler or in a separate stylesheet and if we want the possibility to remotely edit it then we need to use some tiddler title as the address. Currently we avoid the problem, not by using a universally good "address" but by not enabling remote edit at all. The baby is out with the bath water. But OK, one could imagine that adding a local style field really adds an addressable segment in a central stylesheet. Then another tiddler could transclude that segment into its style field. A 1:many relationship.

Regardless, what I'm really after is the direct access. Currently, one has to fiddle with style blocks and then move everything, including manually having to create a new stylesheet tiddler in the process with yet an arbitrary title. And if you want to later modify it, you have to locate that external stylesheet again. If you didn't cheat all together with inline styling to avoid the issue. This does not really encourage use of styling as much it could.

Are there other ideas to make styling (much) more accessible?

[twMat]

OK, I made following to show the concept:

https://stylefields.tiddlyhost.com/

It also invites for specialized stylesheets e.g a stylesheet dedicated to buttons, another for tables, etc (exemplified with a stylesheet I stole from @kookma ). I'm a proponent of direct access to things as one needs them and believe a "in-tiddler UI" should substantially simplify use of styles.

Any thoughts are welcome.

[kookma]

Hi Mat,
I see your note here
Feel free to use any part of Shiraz!

I like to whole idea! and it facilitate using css easier!

• does it respect the order of stylesheet? or it is designed to have independent separate stylesheet per tiddler? I mean if one define class x in a tiddler and then want to use it in another tiddler or add further styles, then does it work?

Sidenote:
Nowadays, using CSS properties (variables) is quite common and I see many frameworks/solutions are developing based on them!
I may propose to consider using CSS variables!

One problem with TW is --prop will be wikified in normal tiddlers (as –prop) and this prevents using CSS properties in normal tiddler, you have to change the tiddler type! I myself use pragma rule to disable wikifying -- in <style>..</style> blocks. I would wish if I could use them simpler in normal tiddler

I created a test tiddler with stylefield as below and it worked

\rules except dash

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

.nelacls{ 
 color: var(--blue);
}

Inside the test tiddler I had

<span class="nelacls">Hi Ted</span>

[twMat]

@kookma - thanks for letting me use your stylesheet. I only needed it temporarily and have now removed it as I just released a public version of Stylefields with some other example stylesheets. Still, I appreciate your permission.

I also expect this to work with CSS variables but I didn't test it. Yes, they're interesting even if we can achieve the same(?) things with wikitext... but then wikitext is not browser native of course.

[twMat]

Since this is a discussion (as opposed to e.g an Issue) I encourage anyone to come with ideas for how TW could make it easier to access and use the native stylesheets and CSS in general.

I suspect many just skip fooling around with CSS because e.g "the default buttons are still buttons"... but c'mon we can do better than that! Also, I have found that a LOT can actually be created using CSS. One cool aspect is that it is browser native so it also works in static tiddlers.