Best practice to use css in Tiddlywiki

[Mohammad]

CSS  tiddlers are an important part of Tiddlywiki to adjust look and feel of different elements. For some use cases (like plugins, webpages, blogs) you may need to set properties of many elements.

What is your best practice for such cases:

1. Using css variables like https://www.w3schools.com/css/css3_variables.asp

2. Using a Tiddlywiki dictionary tiddler and a few macros/transclusion

Note that this way one have some small parameter to set them manually and a large number of properties will be set dynamically, so the maintainability, hackability, scalability, ... all will be improved.

--Mohammad

[Mohammad]

More information

https://css-tricks.com/responsive-designs-and-css-custom-properties-defining-variables-and-breakpoints/

[Mohammad]

More information

https://blog.logrocket.com/how-to-create-better-themes-with-css-variables-5a3744105c74/

[bimlas]

The question arose in me, "Why use CSS variables if TiddlyWiki can handle them too?". Thinking through the question, the answer is pretty clear: it improves a lot in terms of performance if the TiddlyWiki variables are only used when assigning a value to a CSS variable, and using CSS variables everywhere else. This way we don’t have to run macros and filters unnecessarily.

Good idea!

[PMario]

Hi,

The problem is. IE doesn't support it. For 5.1.23 we did just add some code to the "range widget actions" functionality, to keep it compatible with IE.

So at the moment IE is still a thing for us.

-m

[Mohammad]

Bimlas,

I really like CSS variables and they give a lot of flexibility see https://blog.logrocket.com/how-to-create-better-themes-with-css-variables-5a3744105c74/

See default values, scope, overwriting, ...

But I have no experience to see what are the pros and cons of using CSS variables in Tiddlywiki. 

Just experimenting today I realized for example:

1. CSS variables only works in a CSS tiddler (e.g you have to set tiddler type to text/css)
2. CSS variables can be used in a mixed way with transclusion 

@PMario,

I think IE will be retired soon, as Microsoft has dropped its support in 2021, but it is believed some corporates computers may use IE for extended times and I think Tiddlywiki may drop supports several years later :-)

[Mohammad]

To correct my previous post

On Tuesday, December 8, 2020 at 12:53:01 PM UTC+3:30 Mohammad wrote:

Bimlas,

I really like CSS variables and they give a lot of flexibility see https://blog.logrocket.com/how-to-create-better-themes-with-css-variables-5a3744105c74/

See default values, scope, overwriting, ...

But I have no experience to see what are the pros and cons of using CSS variables in Tiddlywiki. 

Just experimenting today I realized for example:

1. CSS variables only works in a CSS tiddler (e.g you have to set tiddler type to text/css)

It seems using prama \rule one can use a tiddler without setting type: text/css for defining css variables

[clutterstack]

I've been using the TW <<colour>> macro extensively in my palette to reduce the number of different colours that need to be changed manually. I don't know if it's a best practice, but it's what I do at the moment. My wiki has so many filters elsewhere that it already needs optimising...

Chris