Максим Морев

Задача на текущий момент не решается на чистом CSS.
Можете вот это решение попробовать, либо попробовать нагуглить что-то другое по запросу "affix sidebar".

Жму руку дизайнеру, молодец, не как у всех.

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

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



Но когда заметил - понял, что так в принципе не выйдет сделать, на CSS нельзя "зафиксировать от трансформации" две стороны сразу.

Так что остаётся вариант с фоновой SVG-шкой, что по сути "фоновая картинка", либо вариант со вставкой этой SVG напрямую в кнопку (прям инлайном) и дальнейшие манипуляции с ней, если требуется адекватный ховер.

Делать лень, это нетрудно :)

Скорее всего, не указан ключ base в конфигурации и ресурсы пытаются загрузиться с адреса username.github.io/assets/... вместо username.github.io/package-name/assets/....

Вот тут пример того, как правильно.
Или поможет это, или давайте ссылку на репозиторий :)

Критерии "лучшести" какие?
В поддержке обычно проще и очевиднее иметь дубль с говорящим названием: `.block__text` и `.block__text-mobile`, например. Иногда, если контент отличается прям сильно и в нескольких элементах, вплоть до замены самой корневой сущности: `the-hero`, `.the-hero-mobile`, хотя это крайний случай, конечно.

Однако каждая такая скрытая нода по-прежнему парсится браузером и участвует в построении DOM, что влияет на производительность. Если их становится "много" в относительном выражении, рассматривайте вариант динамической замены.

* Это не модификаторы, а элементы

Длинными могут быть настолько, насколько это требуется, и в количестве любом, методология это не регламентирует.

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

уменьшат мне варианты названия других основных блоков на странице

Создавайте внутренние блоки с общим неймспейсом, в вашем случае основной компонент - `profile`, внутренние - `profile-info`, `profile-page`, и складывайте их так, чтобы связь родитель-ребёнок между блоками была очевидна.
Ну, да, в таком случае формально вы больше не сможете создать не-дочерний блок с неймспейсом `profile`, чтобы не запутаться, но тут нет других вариантов, и выбрать надо меньшее из зол.

С моей колокольни выбор между монстр-компонентом на тысячу строк и тремя-четырьмя поменьше вообще не стоит - однозначно следует выбирать компоненты поменьше, даже если вы оперируете только стилями.
Если пользуетесь фреймворками и в компонентах есть ещё и какая-то логика - то тем более.
Пересечения между такими глобальными категориями вообще не такой частый сценарий, как может показаться, да и названия всегда можно выбрать более узкие.

Я вот здесь отвечал на похожий по смыслу вопрос - посмотрите.
https://qna.habr.com/q/1129178#answer_2136844

Эта разметка абсолютно правильная в двух случаях:
1) Ваши `close` и `card` действительно нигде не переиспользуются;
2) Объём стилей блока `some-class` остаётся адекватным для восприятия.

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

Возьмём разметку посложнее (не надо в ней искать какого-то смысла, просто от фонаря что-то набрал для иллюстрации):

<div class="block">
  <!-- Header -->
  <div class="block__header">
    <h2 class="block__title">Title</h2>
    <div class="block__actions">
      <button type="button" class="block__action block__action--edit">
        <span class="block__action-icon"></span>
      </button>
    </div>
  </div>
  <!-- Content -->
  <div class="block__content">
    <p>...</p>
  </div>
  <!-- Footer -->
  <div class="block__footer">
    <div class="block__about">
      <div class="block__author"></div>
      <div class="block__date"></div>
    </div>
    <div class="block__awards">
      <div class="block__award">
        <div class="block__award-inner"></div>
        <div class="block__award-tooltip">
          <div class="block__award-tooltip-content"></div>
          <button type="button" class="block__award-tooltip-close"></button>
        </div>
      </div>
    </div>
  </div>
</div>

Положим, что весь контент этого блока уникальный и никак не переиспользуется.
Объём стилей `block` при такой структуре неизбежно станет некомфортным для восприятия, строк на 200-300.

В таком случае хорошо создать внутренний блок (или несколько) просто для того, чтобы размазать сложность.
`block-header`, `block-footer` или даже `block-footer-award`.

Самое главное здесь организовать файловую структуру / конфигурационный файл / чем вы там ещё собираете таким образом, чтобы было очевидно, что `block-footer` - это не самостоятельный блок, а внутренний блок `block`, нужный только для упрощения восприятия, и он не может / не должен использоваться в отрыве от него (в этом случае у него не должно быть в названии общего префикса с `block`, чтобы не создавать путаницу)

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

Подробнее об этом можно узнать здесь

Вот здесь, например, делал когда-то такую вещь (блок "Этапы создания корпоративного сайта").



Идея, вкратце:

1. Элементы размещаете просто в сетку с помощью inline-block/float/flex/grid - как привычнее.
   
2. Родителю задаёте относительное позиционирование, в него помещаете абсолютный элемент на всю ширину/высоту с небольшим запасом, на котором будете рисовать SVG.
   
3. Как нарисуется - на js считаете ключевые точки (координаты), через которые нужно провести линии.
   
4. Динамически рисуете SVG по вашим ключевым точкам.
   О том, какие варианты вообще есть, можно почитать на MDN, например.
   Выглядеть это будет примерно так:
   
   
   
   В вашем случае рекомендую использовать кривые Безье. Здесь мне нужно было сделать полукруг, поэтому я использовал дуги, у вас же просто статичная величина закругления.
   
5. На ресайз окна считаете ключевые точки заново и перерисовываете SVG.
   
6. Опционально заморачиваетесь и добавляете сверху ещё один путь, который по скроллу будет "заполняться"
   

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

Готовых вариантов тут в общем-то вы вряд ли найдёте, нужно взять и разработать.
У меня была идея оформить это в какую-то библиотеку, но как и все остальные идеи - и ныне лежит в туду-листе на 60+ пунктов. :)

Я бы в первую очередь куда-то в эту сторону посмотрел.



Со стрелкой правда непонятно что делать, возможно, это чуть ли не единственный случай, когда шрифтовая иконка будет оправдана, но нарисовать и скомпилировать придётся самостоятельно :)

Если бы не хватило - полез бы смотреть в сторону SVG-клипа.
Но в целом случай сложный, придётся заморочиться, чтобы сделать более-менее приятно глазу. :)

Архив смотреть лень, но по видео - вероятнее всего, это не баг, а динамический коллтрекинг.
Много сервисов предоставляют подобные штуки, статью взял первую попавшуюся из гугла - эталонным исполнением считать не стоит. :)

Потому что синтаксис комментариев в HTML выглядят иначе. Вот так:
<!-- Комментарий -->

Стилям оверлея допишите pointer-events: none; - можно будет взаимодействовать с картой.
А дизайнеру двойка, любой креатив не должен идти вразрез с юзабилити.

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

Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила

Чтобы уложить в голове, нужно нарочито утрировать и посмотреть как это работает:

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

document.getElementById("top_audio_player").dispatchEvent(new MouseEvent("mousedown"));
document.getElementById("top_audio_player").dispatchEvent(new MouseEvent("mousedown"));
setTimeout(() => {
  console.log(document.getElementsByClassName("audio_page_player_title_performer")[0].childNodes[0].innerHTML);
}, 500);