html 中的类中有太多空格会导致任何问题/性能问题吗？答案

【问题标题】：Does having too much whitespace in class in html cause any problems / performance issues?html 中的类中有太多空格会导致任何问题/性能问题吗？
【发布时间】：2020-03-30 16:37:29
【问题描述】：

我正在为 jsx 中的一个元素分配多个条件类。行太长，不可读，所以我把它分成多行。由于我使用的是模板文字，因此由于换行符导致的空格也是结果字符串的一部分。

模板：

<span
  className={`${classes.voucherStatus} 
              ${statusTypes.ok.includes(voucherStatus) ? classes.voucherSuccessMessage : ''} 
              ${statusTypes.error.includes(voucherStatus) ? classes.voucherErrorMessage : ''}`}
>
  {voucherStatus}
</span>

这看起来像呈现的 html：

我认为我的“解决方案”比others have suggested 更具可读性。

我的问题是：以我的方式创建课程有什么缺点吗？

【问题讨论】：

标签： reactjs formatting jsx classname template-literals

【解决方案1】：

我能想到的唯一缺点是如果您尝试使用属性选择器来访问类属性。

例如：

<span class="classOne      classTwo"></div>

/* doesn't work */
[class='classOne classTwo'] {

}

/* this works */
[class='classOne      classTwo'] {

}

【讨论】：