General Questions about Large / Complex Stylesheets

[Brian_Radspinner]

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

I removed an extra set of curly brackets around the “.tc-title” style.

Put the “&” nesting selector directly before the [data-tags] style so that it looks at the same element as, rather than a child of tiddler A.

It will apply both styles to a tiddler with the Title “A” & the tag “HelloThere”

[TiddlyTweeter]

@Justin_H

@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

It is both.

1 — As the acronym for RUSTON (Really Useful Software To Organize Notes)
[IMHO that has as yet undriven mileage as an alternative name for TW???]

2 — Reference link to the Oxfordian Jeremy Ruston; our Ultimate Architect.

Just a comment
TT

[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.

Justin, I went back to your initial post.

I thought about it, read the replies (all mostly good), and pondered on it all.

TBH, CSS in TW is very free, very usable, and can very much determine what you end up with (visually & functionally).

It is one thing in TW where more detailed tutorials could really help. I think.

Tutorials that explain (1) the CSS “cascade” and, importantly, (2) the various (rich, useful) ways CSS is potentiated in TW.

Just a comment
TT

[Justin_H]

@Brian_Radspinner

Put the “&” nesting selector directly before the [data-tags] style so that it looks at the same element as, rather than a child of tiddler A.

It will apply both styles to a tiddler with the Title “A” & the tag “HelloThere”

Ohh, I understand what I did now. If there was a tiddler inside of tiddler A it would have applied to that tiddler. Thank you for the correction

@TiddlyTweeter

is one thing in TW where more detailed tutorials could really help. I think.

Tutorials that explain (1) the CSS “cascade” and, importantly, (2) the various (rich, useful) ways CSS is potentiated in TW.

Just a comment

With as extensive as CSS is, I’m not sure we could do it justice by making a full set of guide tiddlers. That is a herculian task in it of itself, let alone maintaining those and the documents explaining tiddlywiki.

However, going over commonly used CSS like for instance @media within the tiddlers that discuss features that use them where external links are included to the Mozilla Dev page or even the w3schools pages dicussing them could be an easier way of providing insight into CSS.

I would think that tiddlers that should be made regarding CSS should go over TiddlyWiki specific usecases, like how it was done with the data-tags, or better yet as previously mentioned, using the style html tags for unique behaviors.

These seem to be exclusive or atleast somewhat exclusive, usecases to tiddlywiki, if that makes sense.

[TiddlyTweeter]

@Justin_H

… CSS should go over TiddlyWiki specific usecases, like how it was done with the data-tags, or … using the style html tags for unique behaviors.

These seem to be exclusive or atleast somewhat exclusive, usecases to tiddlywiki …

Footnote: Right. But it is not “exclusive” … rather TW architecture really uses the power of CSS well in several ways. I think that may make it look more complex than it actually is. It is fully conformant to CSS standards. It just uses them!

Of course with TW one has to deal with the fact TW is a “Full On Standards Universal Machine” (meaning it’s architecture is open to all native HTML, Javascript, CSS & SVG easily).

Rant off, TT