ISML conditional CSS class declaration

Question

I'm new to SFCC and I was wondering what is the best practices with writing conditional CSS classes in the ISML template. I couldn't find anything in the documentation specifically for element parameters but I have seen some code which works but doesn't look right to me.

<div class="foo <isif condition="${bar}">baz</isif>"></div>

Is this the right way to conditionally add a CSS class?

This is the documentation I've found for isif https://documentation.b2c.commercecloud.salesforce.com/DOC1/index.jsp?topic=%2Fcom.demandware.dochelp%2FScriptProgramming%2FDemandwareJavaScriptExpressionsinISML.html

Answer 1

From my understanding you first need to write the isml condition and inside it the html div, something like this:

<isif condition="${bar}">
<div class="foo">baz</div>
</isif>">

I'm only a couple months new to SFF so forgive me if I'm wrong.

Answer 2

This variant is a little bit shorter

<div class="foo ${bar ? 'baz' : 'someting else'}></div>