Best practice for nesting order: div vs $let

#1

Which better:

<div><$let>...</$let></div>
or
<$let><div>...</div></$let>

(obviously assuming the inner doesn’t use something from the outer)

Both are fully functional AFAICT, but I’m wondering if there is any particular reason to choose one over the other?

Thanx!

#2

<div><$let>...</$let></div> is better because that some gadgets not support its child HTML elements.

#3

You mean that some wikitext widgets don’t allow internal html elements? Could you give an example? Is there even a list or some rule of thumb to know which? Or do you mean something else?

#4

It may have but I don’t know many gadgets. But use that method to write is a good habit.

#5

But my question is if it actually is a better habit/practice than the reversed? Is there any particular reason to choose one over the other?

#6

The above is theoretically faster in situations where the value of a variable changes and the contents of the $let widget need to re-rendered, as the div does not need to be recreated.

6 Likes
#7

Your knowledge is great! Liked!

1 Like
#8 
<div><$let>...</$let></div>

That’s better, like Saq said. But, be careful: Inside a loop, you only want to create things that vary based on the loop. IOW, don’t re-create things that are invariant during the loop:

<$let x=y>
  <$list...>
    <div><<x>> ... </div>
  </$list>
</$let>

Very contrived example but I think you get the issue: you don’t need to recreate x for each loop iteration (perhaps not even the div, depending on your requirements).

1 Like
#9

I echo what @CodaCoder illustrates in a loop by emphasising that to use div and other html elements you are effectively providing a display element, so you use them last. They alter the final output because they are not part of the structure or logic.

  • Personally I would use <br> not div