Олег

Я обычно использую абстрактные названия: title--bright title--dark title--light

Можно делить не на технологии, а на блоки. У меня так:

app
    |__ pages
       |__ index.pug
       |__ category.pug

    |__ blocks
       |__ title
       |__ logo
       |__ button

А если про билд речь то:

app
    |__ styles
       |__ fonts
          |__ roboto.woff2
       |__ img
          |__ sprite.svg
          |__ bg.svg
       |__ main.css

    |__ scripts
       |__ main.js
       |__ jquery.min.js

    |__ static
       |__ logo
          |__ logo.svg

    index.html
    category.html

<ul class="slider">
  <li class="slider__item">
    <h1 class="slider__title">Заголовок слайда 1</h1>
    <p class="slider__text">Текстовое содержимое слайда 1</p>
  </li>
  <li class="slider__item">
    <h1 class="slider__title">Заголовок слайда 2</h1>
    <p class="slider__text">Текстовое содержимое слайда 2</p>
  </li>
  <li class="slider__item">
    <h1 class="slider__title">Заголовок слайда 3</h1>
    <p class="slider__text">Текстовое содержимое слайда 3</p>
  </li>
</ul>

Какой самый оптимальный вариант?

Самый оптимальный - скачать шрифт ttf, сконвертировать в формат woff и woff2 и подключить в CSS с помощью @font-face.

https://psdrepo.com/

Вот здесь можно покупать изображения со многих стоков по одной за 0.7$ шт.

Откройте themeforest, найдите сайт с паралаксом и посмотрите как работает. Единственное, не стоит делать background-attachment: fixed, лучше position: fixed не стоит делать анимацию через background-position, лучше transform.

Как поступить в этом моменте?

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

box-shadow: inset 0 0 0 2px red;

https://jsfiddle.net/r8yLhagp/2/
Лучше использовать CSS анимации, и лучше через transform.

- text = ' Lorem ipsum dolor <a href="link.html">sit amet</a>, consectetur adipisicing elit. ';

p!= text

a:hover {color: red;}
a:hover svg {fill: red;}