Группировка строк таблицы с суффиксом / префиксом класса в css / scss
Я делаю онлайн-табло с обновлением результатов для гонок на автомобилях / картингах, и мне нужно визуально сгруппировать строки в таблице табло.
Мой вопрос: можно ли добиться этого в чистом css / scss, используя селекторы префиксов / суффиксов?
Представление постоянно обновляется, и поэтому я не хочу выполнять много вычислений в клиенте.
Соответствующая часть разметки таблицы
<tr className = {trClassName}>
<td className = "posChange">
<i className = {iconClass} aria-hidden = "true" />
</td>
<td class = "group-{group}" />
<td className = "rnk">
<div>
<span>{driver.position}</span>
</div>
</td>
</tr>
Приложение написано на React и оформлено с использованием scss.
Я не уверен, почему вы предполагаете, что выполнение вычислений с помощью CSS будет менее ресурсоемким, чем выполнение группировки с помощью javascript. Любой подход приведет к выполнению вычислений на клиенте. Логику для подхода javascript, вероятно, будет проще написать, чем логику для подхода CSS. Попытка оптимизировать производительность с помощью CSS кажется преждевременной оптимизацией - напишите это на JS и посмотрите, как это работает. Скорее всего, это не то, что нужно оптимизировать.
Вы можете создать, как три разных класса, «сгруппированные», «сгруппированные - начало», «сгруппированные - конечные», а затем применить классы на основе логики вашего приложения. Я предполагаю, что вы можете использовать какой-то элемент с абсолютным позиционированием перед для создания визуальных эффектов, хотя я еще не продумал это.
Ответ: да, это так