Иван!

В целом уже неважно, на пороге большие изменения, см. «OKLCH в CSS: почему мы ушли от RGB и HSL». Недавно появился новый формат записи цвета с целым набором преимуществ, его вот‑вот уже можно будет использовать во всех браузерах.

Верный признак хорошего кода — можно без его выполнения понять результат его выполнения. В случае с ХТМЛ и ЦСС — понять вид страницы без заглядывания в браузер

Но пока будущее ещё не наступило… Главный плюс РГБА, по сравнению с шестнадцетеричной (хекс‑записью), — РГБА заметно нагляднее, нужно меньше напрягать мозг.

Верный признак хорошего кода — можно без его выполнения понять результат его выполнения. В случае с ХТМЛ и ЦСС — понять вид страницы без заглядывания в браузер

Понять и представить примерный цвет РГБА сможет даже далёкий от разработки человек. В хекс‑записи это сможет сделать далеко не каждый — где там вообще цвет, а где прозрачность?

Чем понятнее сама запись, тем проще видеть связи нескольких записей. В РГБА сходу виден принцип формирования одних цветов из других. С хекс‑записью придётся сильнее напрячь мозг. Что за цвет e2 и почему 50% прозрачности записывается как 80?

.link {
  color: rgb(226, 0, 22);
  text-decoration-color: rgba(226, 0, 22, 0.5);
}
  
.link:hover {
  color: rgb(6, 85, 128);
  text-decoration-color: rgba(6, 85, 128, 0.5);
}
  
.link:visited {
  color: rgb(85, 26, 139);
  text-decoration-color: rgba(85, 26, 139, 0.5);
}
.link {
  color: #e20016;
  text-decoration-color: #e2001680;
}
  
.link:hover {
  color: #065580;
  text-decoration-color: #06558080;
}
  
.link:visited {
  color: #065580;
  text-decoration-color: #06558080;
}



А ещё в РГБА можно использовать переменные:

.link {
  text-decoration-color: rgba(226, 0, 22, var(--underline-opacity, 0.5));
}
  
.link:hover {
  --underline-opacity: 1;
}

В целом хекс‑запись прозрачности — как будто усложнение на пустом месте.

Разработчик ничего не получает, но вынужден по чуть‑чуть тратить свой самый ценный ресурс — внимание — на бесполезную когнитивную нагрузку. А чем больше внимания разработчик тратит на бесполезное, тем меньше его остаётся для полезных задач. Понимание этого помогает выбрать не только форму записи цвета, но и технологический стек, архитектуру и патерны, и даже частоту регулярных встреч с коллегами :‑)

P. S. Приглашаю уважаемых советчиков поделиться своими мыслями по теме в коментах. Особенно хочется услышать противоположное мнение — почему хекс круто, а РГБА отстой?

P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы