Почему стали? От лени и нежелания думать своим мозгом.
Популярны они сталит благодаря продвижению Гуглом, Яндексом и иже с ними всяких "стандартов написания кода". При том, что и Яндекс и Гугл в этом плане очень далеки от идеала.
Эти фреймворки хороши для сквозной разработки крупных проектов, когда все участники хорошо знакомы с данными методами, давно сотрудничают и т.п. Т.е. для тех же крупных компаний. При том, что в большинстве крупных компаний всё-таки имеются собственные стандарты.
Ну а остальные уже, как обезьяны, подхватили. И требуют БЭМ, SASS, Angular для статичного одностраничника. Начинаешь выяснять для чего заказчику всё это надо - "а мне так наш дизайнер посоветовал"... Или когда берёшься доделывать чужой проект с кучей недоделанных хвостов в SASS - то ещё удовольствие и "оптимизация написания кода" - тупо вручную текстовым поиском приходится по фалам искать потерявшиеся переменные.
Сама настройка, выработка общих стандартов и синтаксиса для этих фреймворков - занимает кучу времени.
Так что по большому счёту вы ничего не пропустили. Браузеры все равно не понимают SASS и иже с ним))
Пишите как вам удобнее. Если клиент настаивает - попробуйте выяснить причины такой настойчивости. Если случай клинический - шлите лесом!

function truncateString(str, num) { // функция принимает два аргумента - саму строку и ограничение длины строки

  if (str.length > num) { // если длина строки больше ограничения
    return str.slice(0, num) + "..."; // обрезаем строку до ограничения, в конце добавляем многоточие (sic!) и возвращаем 
  } else { // в противном случае
    return str; // возвращаем исходную строку
  }
}

Вторая функция делает всё то же самое, только записана в одну строчку - https://developer.mozilla.org/ru/docs/Web/JavaScri...

PF Din Text Compressed Pro Medium очень похож