Вещи в CSS, о которых мне никто никогда не говорил.

Jem -

Перевод статьи Things nobody ever taught me about CSS

Этот пост ни в коем случае не является критикой кого-либо, с кем я когда-либо работал, это лишь краткий список важных вещей, которые я узнал о CSS недавно, проводя собственные исследования.

Тот факт, что многим разработчикам кажется, что разработчики не особо заботятся о CSS, не является чем-то новым. Тем не менее, в сообществе многое из того, что мы узнаем, приходят из обмена знаниями со сверстниками, и в результате я иногда осознаю, что в CSS есть важные вещи, о которых мне никогда не рассказывали, потому что другие люди никогда не тратили больше времени на изучение.

Чтобы попытаться это исправить, я решил провести собственное исследование и составить небольшой список концепций, которые, на мой взгляд, интересны и полезны для лучшего понимания и написания CSS.

Этот список определенно не является исчерпывающим, он содержит только то, что я узнал за последние несколько дней, и хочу поделиться им.

Терминология

Как и в любом языке программирования, существуют определенные термины, используемые для описания концепций. CSS является языком программирования, он ничем не отличается, поэтому изучение терминологии важно, чтобы помочь в коммуникации или даже просто для вашего личного знания.

Селектор потомков (Descendant combinator)

Вы знаете этот маленький пробел между селекторами в вашем стиле? На самом деле у него есть имя - Селектор потомков (Descendant combinator).

Layout, paint and composite

Эти термины больше связаны с тем, как браузер отображает данные, но все же важно, так как некоторые свойства CSS будут влиять на различные этапы рендеринга.

  1. Layout (Макет)

Шаг макета - это вычисление того, сколько места занимает элемент, когда он находится на экране. Изменение свойства «layout» в CSS (например, width, height) означает, что браузер должен будет проверить все другие элементы и «перекомпоновать» страницу, то есть перерисовать затронутые области и собрать их вместе.

  1. Paint (Прорисовка)

Этот процесс заполняет пиксели для каждой визуальной части элементов (цвета, границы и т. д.). Рисование элементов обычно выполняется на нескольких слоях.

Изменение свойств «прорисовки» не влияет на макет страницы, поэтому браузер пропускает шаг макета, но по-прежнему выполняет прорисовку.

Прорисовка часто является самой дорогой частью цепочки.

  1. Composite (Компоновка)

Компоновка - это шаг, когда браузеру нужно рисовать слои в правильном порядке. Поскольку некоторые элементы могут перекрывать друг друга, этот шаг важен для обеспечения порядка отображения элементов.

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

Для получения подробной информации о том, что запускает изменение различных CSS свойств, посмотрите на CSS Triggers.

Производительность CSS

Селектор потомков может быть затратным

В зависимости от того, насколько большое у вас приложение, только использование селектора потомков без большей конкретности может быть очень затратным. Браузер собирается проверить каждый элемент-потомок на соответствие, потому что отношения не ограничены родительским и дочерним элементами.

Например:

Браузер собирается проверить все ссылки на странице, прежде чем переходить к тем, которые находятся внутри нашего #nav раздела.

Более эффективный способ сделать это - добавить определенный селектор  .navigation-link на каждый элемент <a> нашего #nav элемента.

Браузер читает селекторы справа налево

Я должен был знать это, потому что это звучит очень важно, но я не знал

При анализе CSS браузер резолвит селекторы CSS справа налево.

Если мы посмотрим на следующий пример:

Предпринятые шаги:

  • сматчить каждый <a> на странице.
  • найти все <a> содержащиеся в <li>.
  • использовать предыдущие совпадения и сузить до тех, которые содержатся в <ul>.
  • Наконец, отфильтровать вышеприведенные элементы до тех, которые содержатся в элементе с классом .container

Рассматривая эти шаги, мы видим, что чем конкретнее правый селектор, тем эффективнее браузер будет фильтровать и разрешать CSS свойства.

Чтобы улучшить производительность приведенного выше примера, мы могли бы заменить  .container ul li a чем-то вроде  .container-link-style самого тега <a>.

Избегайте изменения макета, где это возможно

Изменения некоторых CSS свойств потребуют обновления всего макета.

Например, такие свойства как width, height, top, left (называемые также «геометрическими свойствами»), требуют перерасчета макета и перерендерить отображение дерева для обновления.

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

Остерегайтесь сложности прорисовки

Некоторые свойства CSS (например, blur) дороже, чем другие, когда дело доходит до прорисовки. Подумайте о других, более эффективных способах достижения того же результата.

Дорогие CSS-свойства

Некоторые свойства CSS стоят дороже, чем другие. Это означает, что они занимают больше времени, чтобы отрисовать.

Некоторые из этих дорогих свойств включают в себя:

  • border-radius
  • box-shadow
  • filter
  • :nth-child
  • position: fixed

Это не означает, что вы не должны использовать их вообще, но важно понимать, что если элемент использует некоторые из этих свойств и будет рендериться сотни раз, это повлияет на производительность рендеринга.

Порядок

Порядок в файлах CSS имеет значение

Если мы посмотрим на CSS ниже:

А затем посмотрим на этот HTML-код:

Порядок селекторов в HTML не имеет значения, порядок селекторов в файле CSS - имеет.

Хороший способ оценить производительность вашего CSS - использовать инструменты разработчика вашего браузера.

Если вы используете Chrome или Firefox, вы можете открыть инструменты разработчика, перейти на вкладку «Производительность» и записать, что происходит при загрузке или взаимодействии с вашей страницей.

Ресурсы

Проводя некоторые исследования для этой статьи, я наткнулся на несколько действительно интересных инструментов, перечисленных ниже:

CSS Triggers  - сайт, на котором перечислены некоторые свойства CSS и влияние на производительность использования и изменения этих свойств в вашем приложении.

Uncss  - инструмент для удаления неиспользуемых стилей из CSS.

Css-explain - небольшой инструмент, объясняющий CSS-селекторы.

Fastdom  - инструмент для пакетных операций чтения/записи DOM, чтобы ускорить производительность макета.

На этом пока все! Надеюсь, это имеет смысл!

Спасибо за прочтение! 🙏

Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram, чтобы не пропустить самое интересное из мира Web!