Why is it not recommended to use an empty string as a className in Vue?

When we use a ternary expression to set a class for a DOM element, using an empty string will result in an empty class with no value being rendered. To avoid this, you can use null instead of an empty string.

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

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

Compare the empty string '' and null

Continue to analyze the above 2 lines of code

Case 1: Using an empty string ''

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

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

data() {
  return {
    isBold: false
  }
}

At this time, the rendering result is as follows

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

If isBold is true, the rendering result is as follows

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

Case 2: Using null

Look at the rendering results using null

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

data() {
  return {
    isBold: false
  }
}

The rendering results are as follows

<div></div>
<!-- ✅ Very good no empty class>

If isBold is false, the rendering result is as follows

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

Case 3: Using undefined

undefined has the same effect as null

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

<div></div>
<!-- ✅ Very good no empty class>

About False value

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

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

Bind class using object

Using objects is 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 look at another situation

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

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

Case 1: isBold is false

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

This time, an empty class is returned.

<div class></div>

Case 2: isBold is null

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

There will be no empty class when it is null

<div></div>

Case 3: isBold is undefined

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

There will be no empty class when it is undefined

<div></div>

The above situation is not caused by &&, it is only used to make judgments and return values.

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

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

Is it wrong to have an empty class?

In the W#C standard, empty classes are also allowed.

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

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

HTML syntax does not prohibit the use of empty attributes.

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

Empty properties can easily lead to subtle errors

e.target.classList

e.className

img.src

...

but...
Empty id attributes are not allowed.

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

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

<!-- Correct -->
<div id="name">...</div>

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

This concludes this article on why it is not recommended to use an empty string as className in vue. For more information about using an empty string as className in vue, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!