The trick with CSS in TiddlyWiki?

24

Thanks eric I need to understand > and + before adding it to a design pattern

The design Pattern

So if using the <style> tags a good design pattern is in the tiddler do this;

<style>
.className {
   & someselector { someattributes }
   & someselector { someattributes }
}
</style>
  • And set the tiddlers class field to className

The styles will only apply if the tiddler containing the style tags is rendered (viewed) and one or more visible tiddlers have the class field = className

  • The CSS should not “bleed out” of this selected tiddlers or anywhere else.

Once you have a solution move the contents of the style tags to a tiddler tagged stylesheet, and alter the specificity if desired, or keep using class name.

Note: I recently proposed having wiki text symbols for a div where you can also apply a specific className to a bound part of a tiddler instead of a whole tiddler;

&&&.className

Everything in here has .className applied


&&&
  • This &&& is in contrast to @@ use @@ to search on tiddlywiki.com which is inline not block

&&& Generates

<div class="tc-div className"><p>Everything in here has .className applied</p></div>

Note: the following still needs clarification

The above is NOT redundant because although you can use;

@@.className
* Block content
* With one assigned class
@@

Will handle blocks but the class is applied to the first (or each?) tag;

<ul class="className"><li>Block content</li><li>With one assigned class</li></ul>

If you want to experiment I can provide the new wikiparser rule for &&& used above.