Why is it not recommended to use empty strings as className in vue

When we set class for DOM elements with ternary expressions, using an empty string will cause an empty class without a value to be rendered. To avoid this, null can be used instead of an empty string.

<!-- ❌ -->
<div :class="isBold ? 'bold' : ''">
<!-- <div class> -->

<!-- ✅ -->
<div :class="isBold ? 'bold' : null">
<!-- <div> -->

Comparing empty strings '' and null

Continue to analyze the above two lines of code

Case 1: Use empty string ''

We use the ternary operator to decide whether to bind the element to class. When isBold is true, it will return bold. Otherwise, return ''

<div :class="isBold ? 'bold' : ''"></div>

data() {
  return {
    isBold: false
  }
}

At this time, the rendering result is as follows

<div class></div>
<!-- 😱 Emptyclass -->

If isBold is true, the rendering result is as follows

<div class="bold"></div>

Case 2: Use null

Check out the rendering results using null

<div :class="isBold ? 'bold' : null"></div>

data() {
  return {
    isBold: false
  }
}

The rendering result is as follows

<div></div>
<!-- ✅ very good No spaceclass>

If isBold is false, the rendering result is as follows

<div class="bold"></div>

Case 3: Use undefined

Undefined and null have the same effect

<div :class="isBold ? 'bold' : undefined"></div>

<div></div>
<!-- ✅ very good No spaceclass>

About False value

When the value of isBold is the following value, the ternary expression returns a false value.

false
undefined
null
NaN
0
"" or '' or `` (empty string)

Binding class using object form

Use the form of objects to be more readable

<div :class="{ bold: isBold }"></div>

But the best use of ternary expressions is when binding complex classes

<div :class="isActive ? 'underline bold' : null"></div>

Use && to bind class

Let's take a look at another situation

<div :class="isBold && 'bold'"></div>

&& is not only a logical operator, it can also return a value. As the above code, if isBold is true, it will return bold, but what if isBold is false?

Case 1: isBold is false

<div :class="isBold && 'bold'"></div>

Return to empty class at this time

<div class></div>

Case 2: isBold is null

<div :class="isBold && 'bold'"></div>

There will be no class when null

<div></div>

Case 3: isBold is undefined

<div :class="isBold && 'bold'"></div>

There will be no empty class when undefined

<div></div>

The above situation is not a problem with &&, it is just used to make judgments and return values.

So, if we want to avoid returning empty class when using &&, it is best to use null or undefined

But I would recommend that you use object or array binding syntax to set class

Is it necessary to be wrong to empty class?

In the W#C standard, empty class can also be used

<!-- No errors -->
<div class>...</div>

<!-- No errors -->
<div>...</div>

There is no requirement to use empty attributes if HTML syntax is used.

However, for the readability of the code, it is recommended that you do not use empty attributes, especially when you need to operate the DOM attributes to make judgments.

Empty attributes can easily cause undetectable errors

...

but...
The empty id attribute is not allowed

<!-- mistake -->
<div id>...</div>

<!-- mistake -->
<div id="">...</div>

<!-- correct -->
<div >...</div>

❌ Error: An ID must not be the empty string.

This is the article about why it is not recommended to use empty strings as className in vue. This is all about this. For more related vue empty strings as className content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!