Вызывает ли слишком много пробелов в классе в html какие-либо проблемы/проблемы с производительностью?

Я назначаю несколько условных классов элементу в jsx. Строка становится слишком длинной, ее невозможно прочитать, поэтому я разбиваю ее на несколько строк. Поскольку я использую литерал шаблона, пробелы из-за разрывов строк также являются частью результирующей строки.

Шаблон:

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

Что будет выглядеть как обработанный html: введите здесь описание изображения

Я думаю, что мое «решение» более читабельно, чем те, что другие предложили.

Мой вопрос: есть ли недостатки, связанные с созданием класса так, как я это сделал?


reactjs jsx formatting classname template-literals
person handris    schedule 05.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Единственный недостаток, о котором я могу думать, заключается в том, что вы пытаетесь использовать селектор атрибутов для доступа к атрибуту класса.

Например:

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

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

}

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

}
person marey    schedule 05.12.2019