General Questions about Large / Complex Stylesheets

[Justin_H]

So I’ve had a few questions floating around my head for awhile now, regarding how to handle certain things like styles for tiddlers, stylesheets and structuring, etc. So I’ve put a few bullet points below of thing’s I haven’t been able to find a concrete answer on, in case anyone could shade a bit of light on them, so to speak.

• Should you keep all of your styles in a single sheet and structure it based on how your tiddlywiki is rendered, similar to what is done in the vanilla theme, or should you divide it up into multiple tiddlers?

• Why was the vanilla theme structured as it was? was it the final product of multiple individuals collaborating, or was it just a stylesheet that had been revised several times to a final state?

• What are some useful things to do when making a complex stylesheet / theme? Just asking for any interesting things you’ve put into yours that makes working with it easier, like values stored in fields, them tiddlers being transcluded in different parts, etc.

• What are some things that should be avoided? ie don’t modify core tiddlers, don’t store styles in <style> tags of your tiddlers, avoid using !important, etc.

• How do you create your own cascades? for instance, if I want to have acascade that takes a filter from a defaul tiddler unless another tiddler is set to list before it, how is that set up with tiddlers?

• How does the list field work for tiddlers? does it automatically add tiddlers that are tagged with them? I know the list-before and list-after are overriden by them, and list links draggable uses the list field, I think

I appreciate any and all insight given, as always

[pmario]

@Justin_H

Should you keep all of your styles in a single sheet and structure it based on how your tiddlywiki is rendered, similar to what is done in the vanilla theme, or should you divide it up into multiple tiddlers?

I think it depends on your personal preference. I personally like to have styles in 1 place. Except for styles, that I want to dynamically switch on or off. The easiest way to do this is remove the $:/tags/Stylesheet tiddler. I rename it to $:/tags/StylesheetXX so I can still find it easily. – But that’s my personal preference

@Justin_H

Why was the vanilla theme structured as it was? was it the final product of multiple individuals collaborating, or was it just a stylesheet that had been revised several times to a final state?

It mainly did organically grow to the size it has now. If you look at TW v5.1.0 in the archive you will see that it has about 1400 lines including all the whitespace. ~1200 loc (lines of code according to github)

TW v5.3.3 has about 3300 lines including whitespace. ~2700 loc (lines of code)

So over the years it has grown quite a bit and due to the “backwards compatibility” requirement it gets more and more complex to change something, without side effects.

@Justin_H

What are some things that should be avoided? ie don’t modify core tiddlers, don’t store styles in <style> tags of your tiddlers, avoid using !important, etc.

Yes. that’s pretty much it. Especially if you want to create stylesheets that others can still adjust themself.

@Justin_H

How does the list field work for tiddlers? does it automatically add tiddlers that are tagged with them? I know the list-before and list-after are overriden by them, and list links draggable uses the list field, I think

The list-field is automatically used to “sort” lists created with [tag[abc]] filters. If you add a new tiddler and tag it “abc”, it will not be added to the list field. You have to d&d sort it. Then new tiddlers will be added.

hope that helps
-mario

[CodaCoder]

@Justin_H

Should you keep all of your styles in a single sheet and structure it based on how your tiddlywiki is rendered, similar to what is done in the vanilla theme, or should you divide it up into multiple tiddlers?

Mostly the same as @pmario’s but I do it like this:

I have one tiddler tagged $:/tags/Stylesheet and I transclude everything tagged css. That gives me “one level” above to do odd little things (tryouts etc). I also use the same trick to toggle styles by removing $:/tags/Stylesheet from some dynamically styled elements.

@Justin_H

How do you create your own cascades?

In terms of CSS, I add @layer tiddlywiki-defaults to the TiddlyWiki core css ($:/themes/*). That helps you avoid needing !important. I’ve been doing that since Jan 2023. In this regard, TiddlyWiki could do better to allow the cascade to work as it is (not was) intended to work in ~2024.

I add style elements to my tiddlers all the time. I generate tiddlers with style elements embedded in them. No issues here. I will of course review and move them to dedicated css tiddlers “eventually”.

I’m also now using nested rules in my CSS. I like that added scoping power that brings. In TiddlyWiki, this is beneficial in some places…

p {
  p {
    /* remove extraneous margins */
  }
}

Thinking about it now, perhaps p:has(p) might be better – that would modify (damage) the parent p, not the child. Maybe I’ll compare them at some point.

@Justin_H

What are some useful things to do when making a complex stylesheet / theme?

Code. As in macros. But beware, using a macro to easily spit out chunks of css – if that’s a lengthy iterator, you’ll end up with TONS of css.

[Scott_Sauyet]

@Justin_H

Should you keep all of your styles in a single sheet and structure it based on how your tiddlywiki is rendered, similar to what is done in the vanilla theme, or should you divide it up into multiple tiddlers?

I keep a single master sheet, except while I’m building a section. Then it goes into its own stylesheet (for a template) or inline (for a tiddler). But I try to make sure that all my rules are tied to some wrapper class so that they don’t interfere with one another. When I’m pretty happy with that section, I fold this into my master sheet. However:

@CodaCoder

I have one tiddler tagged $:/tags/Stylesheet and I transclude everything tagged css. That gives me “one level” above to do odd little things (tryouts etc). I also use the same trick to toggle styles by removing $:/tags/Stylesheet from some dynamically styled elements.

This strikes me as such an improvement, I think I will switch to it straightaway. It would let me quickly copy work from one wiki to another, without any messy disentangling of my single overgrown stylesheet, and would allow us to quickly turn on and off sections by toggling the tags css/cssXX.

@CodaCoder

I’m also now using nested rules in my CSS. I like that added scoping power that brings. In TiddlyWiki, this is beneficial in some places…

Damn, I get away from regular web development for a measly few years, and they add in all sorts of features I always wanted! It’s great to know that this is now available. Thank you.

---

Edit: Just dropping this here as a demo of some of the techniques @CodaCoder suggested. I know I’m going to find this useful: StylesCodaStyle.json (970 Bytes)

[CodaCoder]

Thanks, Scott, but really, try adding @layer like I mentioned.

Here’s a screenshot of $:/themes/tiddlywiki/vanilla/base scrolled down a few inches…

[telumire]

@CodaCoder

Thinking about it now, perhaps p:has(p) might be better – that would modify (damage) the parent p, not the child. Maybe I’ll compare them at some point.

Regarding trimming margin, this feature will be very handy: margin-trim - CSS: Cascading Style Sheets | MDN (mozilla.org).

@CodaCoder

I’m also now using nested rules in my CSS.

Love this feature too. The specifity stays at 1, regardless of the complexity of your parent selector (edit: I was wrong, it’s actually behaving like a :is selector). I always use nesting selector tho (&), to avoid unexpected behavior.

[TiddlyTweeter]

@Justin_H

So I’ve had a few questions floating around my head for awhile now, regarding how to handle certain things like styles for tiddlers, stylesheets and structuring, etc.

My simple answer is …

FIRST understand the scope of CSS, How does it work? SCOPE in CSS is central, It is ACTIVE in any rendered scope it is included in,

SECOND understand THE RUSTON gave several ways for CSS to end up in shaping render in TW.

Meaning: just notice HOW CSS in TW is included—when & how.
One of it’s magics.

TT

[Springer]

@Justin_H

don’t store styles in <style> tags of your tiddlers

Just a quick note: I agree this is a bad idea for an “ad hoc” single-tiddler style (unless it’s just a custom-css-class-specific proof-of-concept, etc.). However, embedding a <style> inline within a non-$:/tags/Stylesheet tiddler can be useful as a certain kind of trick.

As long as a tiddler is rendered (in story river or sidebar), its <style> section is active (and, afaict, overrides all previously loaded stylesheets), and it affects all other tiddlers in addition to whatever’s in that tiddler outside the style section.

So, you can effectively get one tiddler to “unlock” the visibility or salience of stuff that has a particular class that’s normally hidden, etc. Use that tiddler in a permaview (so your recipient sees what’s otherwise hidden), or make it a faceless sidebar element active for one audience/purpose but not another, etc. (Of course, you’ll want to document carefully, with comments/notes to future self, if you have faceless elements!)

[TiddlyTweeter]

@Springer

afaict, overrides all previously loaded stylesheets

Right. I missed that point, CSS render order can sometimes be IMPLICIT and a tad hard to fathom.

TT

[Scott_Sauyet]

@CodaCoder

Really, try adding @layer like I mentioned.

I will, but that one will take me much more time to process. I’ve been using CSS since the NN4 days, and am very, very used to the standard cascade. It will take some time to start thinking in layers like this. I have some concerns with how they’ll interact, especially if plugins declare their own layers. Although I think I like the idea of adding this to the core, I am a bit afraid of what that would do when simpler user selectors win out over more targeted core ones. I will spend some time on this soon, though.

Thanks for all the new CSS info. I guess I really should pay attention. I was just so glad when FF finally supported :has, but I clearly have missed much else.

[Scott_Sauyet]

@Springer

As long as a tiddler is rendered (in story river or sidebar), its <style> section is active (and, afaict, overrides all previously loaded stylesheets), and it affects all other tiddlers in addition to whatever’s in that tiddler outside the style section.

That’s a very interesting trick, and would have solved several issues that I’ve overcome in different ways, or abandoned. There must be some potential headaches when two different tiddlers use this with conflicting rules, but there’s a great deal of power too!

[Justin_H]

@pmario

I think it depends on your personal preference. I personally like to have styles in 1 place. Except for styles, that I want to dynamically switch on or off. The easiest way to do this is remove the $:/tags/Stylesheet tiddler. I rename it to $:/tags/StylesheetXX so I can still find it easily. – But that’s my personal preference

Hm, right now I find it easiest, albeit a bit challenging to navigate through, to keep all my CSS in a single tiddler divided by what it affects, partly due to how sometimes I seemed to run into issues where tiddlers were not rendering because they would get overridden by different stylesheets…

@pmario

You have to d&d sort it. Then new tiddlers will be added.

I’m not sure I follow. what are you referring to with D&D’ing it? (like dungeons and dragons?)

I am curious if I can create my own cascade type mechanism for other elements of the TW UI, because I really like how you can just, use a new filter and list it before the default one to have it render.

@CodaCoder

I have one tiddler tagged $:/tags/Stylesheet and I transclude everything tagged css. That gives me “one level” above to do odd little things (tryouts etc). I also use the same trick to toggle styles by removing $:/tags/Stylesheet from some dynamically styled elements.

This is a very neat trick, I’m going to be stealing that for my little book of tiddlywiki tricks haha

@CodaCoder

@layer tiddlywiki-defaults

How does @layer work? I’ve never seen this before, is t newer CSS?

@CodaCoder

Thinking about it now, perhaps p:has(p) might be better

I’ve never used nested CSS like that, frankly I didn’t think it was possible to.

@TiddlyTweeter

SECOND understand THE RUSTON gave several ways for CSS to end up in shaping render in TW.

I’m afraid I am years away from understanding The Ruston. I can’t lie, I would have an absolute field day if I could spend a day learning all there is to know about TW from The Ruston (this is now my new favorite way to refer to Jeremy hahaha)

@Springer

As long as a tiddler is rendered (in story river or sidebar), its <style> section is active (and, afaict, overrides all previously loaded stylesheets), and it affects all other tiddlers in addition to whatever’s in that tiddler outside the style section.

Oh, That’s interesting, I didn’t know that was the case at all, I was under the impression it stayed loaded haphazardly in the entire wiki, due to some incorrect rendering issues I had experienced. Knowing that though, that could be fun to play with.

---

So, here is something I’d like insight on, is doing something like below unnecessary?
The reason I ask is because I have this at the top to continue to use the same styles as the vanilla theme, but everything after the \import lines should override whatever is imported, or atleast that was my intention.

\import $:/themes/tiddlywiki/vanilla/base
\import [prefix[$:/themes/wiki/base/macros/]] /* This is to import macros used in the stylesheet */

{{$:/themes/tiddlywiki/vanilla/reset}}

...

Also, I came back to a lot

[CodaCoder]

D&D → drag n drop

@Justin_H

How does @layer work? I’ve never seen this before, is t newer CSS?

https://caniuse.com/css-cascade-layers

@layer - CSS: Cascading Style Sheets | MDN

@Justin_H

I’ve never used nested CSS like that, frankly I didn’t think it was possible to.

Using CSS nesting - CSS: Cascading Style Sheets | MDN

@Justin_H

Also, I came back to a lot

… careful what you wish for

[CodaCoder]

@Justin_H

The Ruston (this is now my new favorite way to refer to Jeremy hahaha)

Lest ye all forget… I did, in that thread where TT asked about how to invent something like “a RUSTON” and what it might refer to…

Really
Useful
Software
To
Organize
Notes

[Justin_H]

@CodaCoder

… careful what you wish for

I HAD ACTUALLY TYPED THAT but decided against it, but that’s 100% accurate.

@CodaCoder

Lest ye all forget… I did, in that thread where TT asked about how to invent something like “a RUSTON” and what it might refer to…

Ah, I thought you were referring to JeremyRuston in this situation

[pmario]

@Justin_H

I’m not sure I follow. what are you referring to with D&D’ing it? (like dungeons and dragons?)

hihi, sorry – drag and drop

[TW_Tones]

It would be interesting to know how these alternate css methods would relate to independant windows with or without seperate templates as I raised here A new Flexbox Layout for TiddlyWiki - #16 by TW_Tones

• if designed appropriately you could have more than one css view of the same wiki at the same time.
• perhaps helpful in design and helping avoid errors or at least have the original view available.

[oeyoews]

I often write different plug-ins to support my own needs, but I find that I need to constantly write style files. Over time, these styles are rarely reused, and the style files are getting larger and larger, and I have to switch and maintain them among multiple style files. They are troublesome. So I wrote them all using tailwindcss, which completely relieved my mental burden of writing plugin code. (Some people may not like the way tailwindcss does)

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

[CodaCoder]

@Justin_H On the topic of CSS and waiting for future fun things to appear…

CSS attr()

The CSS attr() function seems to offer a somewhat simpler way to tie HTML attributes to CSS properties directly in the HTML. That is, for regular HTML elements and custom, imagine influencing behavior and display style directly as you type your HTML. Link

<!-- HTML -->
<span class="X" data-my-color="#bada55"> stuff </span>

/* css */
.X { background-color:attr(data-my-color); }

CSS element()

Then, the CSS element() function… words almost fail me. I just can’t wait. “Dashboard” builders and tinkerers are going to swoon over it. I made a post here a while back with a link to someone’s demo where s/he used to great effect. If I can find it, I’ll update this post. Link

Here you go: make sure you’re strapped in tight: Minimap — uiwtf

[Justin_H]

@Springer

As long as a tiddler is rendered (in story river or sidebar), its <style> section is active (and, afaict, overrides all previously loaded stylesheets), and it affects all other tiddlers in addition to whatever’s in that tiddler outside the style section.

So, interesting behavior I just stumbled upon. It would seem that, you may be able to use this to apply CSS to TW tiddlers in other browser tabs as well… I need to do a bit more tinkering but, I thought I would share this little tidbit.

EDIT:

Also, I am playing around with CSS a bit to try out the things discussed above, and I have a question regarding data-attr styles.

I have 3 tiddlers, A B and C, and A {{transcludes}} B’s text, and B transcludes C, which has the CSS within it (see below) while A is the only tiddler tagged as a stylesheet.

I have also tagged A with HelloThere, however, I’m not sure I understand how to use the snippet of CSS below correctly. Could someone explain what I may be doing incorrectly here?

[data-tiddler-title="A"] {
   border: solid 1px red;
   [data-tags*="HelloThere"] { 
      .tc-title { color: green; }
   }
}

I was unable to get it to work except for when it is not nested, so I think I am missing some key information.