AlexNew22

Привет!

cli - это интерфейс командной строки. Т.е. вместе с пакетом устанавливается интерфейс для взаимодействия с пакетом через консоль.

Так, например, выполнив команду на твоем скриншоте, можно будет обратиться к пакету pug

$ pug --help

Иначе устанавливается только пакет, без интерфейса взаимодействия. Что позволяет использовать его в коде, но не через консоль.

На learn.javascript, например, неплохо написали:

Стрелка => ничего не привязывает. У функции просто нет this.
При получении значения this – оно, как обычная переменная, берётся из внешнего лексического окружения.

В вашем примере с литералом объекта можно добавить для понимания:

const obj = {
  w() {
    console.log('w', this);
  },
  x: function () {
    console.log('x', this);
  },
  y: this,
  z: () => {
    console.log('z', this);
  },
};

obj.w(); // obj
obj.x(); // obj
console.log('y', obj.y); // Window
obj.z(); // Window

Запись литерала объекта не создаёт свой контекст: на момент записи this тот же, что и снаружи:

const a = this; // Window
const obj = {
  b: this, // тоже Window 
}

a === obj.b // true

Метод say лежит в прототипе экземпляра Sounds, а не в самом экземпляре.
Object.assign копирует только содержимое непосредственно объекта, не заглядывая в его прототип. Так мир устроен.

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

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

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

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

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

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

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