Ivan Bogachev

Насколько знаю, БЭМ юзает только яндекс.

БЭМ как методологию организации CSS используют все кому не лень, не только яндекс. В наших краях это наверное самый популярный подход. Про него говорят "не знаешь, что выбрать - бери БЭМ".

Есть альтернативные подходы к классам в CSS, например RSCSS или даже Atomic CSS, но они не имеют такой распространенности. Хотя познакомиться полезно - как и с разными языками, разные методологии расширяют видение происходящего. А уж что выбирать в конкретной ситуации - на этот вопрос вам никто не ответит. У всего есть свои плюсы и минусы.

P.S.: Видимо стоит привести пару цитат из первых загугленных статей с css-tricks и csswizardry (в соседнем ответе говорится, что он там пропагандируется), чтобы пояснить, почему я говорю в первую очередь про организацию CSS и намекнуть, что "весь мир заблуждается, что БЭМ — это про CSS и классы через чёрточку":
- BEM is a popular naming convention for classes in HTML and CSS
- BEM (Block Element Modifier) is a popular CSS class naming convention
- BEM – meaning block, element, modifier – is a front-end naming methodology
Народ во всех этих статьях пишет про методологию именования, а не про "БЭМ - это нечто большее".

Как будет быстрее и правильнее? Как вы верстаете?

Если проект предполагает продолжительное существование, то имеет смысл делить все на компоненты и верстать каждый по отдельности, класть их в отдельные файлы. Для каждого компонента это стили, скрипты и пример разметки. Разумеется, все общие данные вроде цветов или размеров отступов имеет смысл сразу выносить в отдельный конфиг. Полезно сразу использовать везде одну и ту же методологию по именованию всего. Какая будет - не важно, главное, чтобы везде одинаковая. Организовать можно по-разному, но суть в том, чтобы работать не со "страницами", а с "набором компонентов".

Потом имеет смысл сделать страницу, на которой будут все компоненты сайта или группы сайтов (часто бывает, что у одной компании несколько сайтов с одним дизайном) в одном месте с примерами разметки (можно сгенерировать автоматически, инструментов хватает). А потом или методом копипасты или с шаблонизатором (смотря какой проект) клепать страницы десятками и вообще ни о чем не думать. Все это не занимает так много времени, как некоторые думают, а в перспективе происходит экономия на поддержке... Хотя стоп, о чем это я, в нашем мире господствует подход х*як-х*як и в продакшен.

Две больших картинки с object-fit: cover. Одна - нормальная, вторая - только голова и лапа слона, а вокруг нее прозрачное ничего. Голова в центре, при адаптивном изменении пропорций всего этого она никуда не уедет. Картинки одинакового размера. Дальше три слоя с абсолютным позиционированием - нормальная картинка, слой с текстом и картинка с головой. Текст - в виде встроенной SVG, там на него можно будет кроссбраузерно наложить любые градиенты.

1. Блок с overflow: hidden, содержимое в 200% его высоты.
2. При наведении содержимому добавляется transform: translateY(-100%).

Скорость скролла используется как угловое ускорение для этих объектов. Знак зависит от направления скролла. При этом есть сила трения, которая постоянно уменьшает модуль скорости, тем самым тормозит и останавливает эти штуковины в конечном счете. Формулы из курса кинематики за 9 класс помогают сделать движения более натуральными, плавными и приятными глазу.

Конкретно у них это реализовано просто кучей квадратных дивов, которым меняется прозрачность при наведении мыши. Ну а спустя некоторый отрезок времени меняется обратно. И буквы в виде картинок (зачем - не понятно).

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

Подобные бордеры легко рисуются линейными градиентами на одном элементе (пример).

бежит линия (ломаная), добегает до блока - он появляется и бежит дальше вниз по лендингу

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

1. Нарисуйте веревку как прямоугольник (не линию с толщиной, а именно замкнутый контур)
   
2. Сделайте внутри SVG pattern с нужной картинкой (image)
   
3. Используйте свойство fill, чтобы залить прямоугольник этим паттерном
   

При возникновении трудностей - гуглите упомянутые термины.

Без vue, react и прочих библиотек. Интересует как писать js компоненты типа табы, модалки и т.п. Как реализовать их взаимодействие. Хочется посмотреть на примеры и реализации.

Если говорить о наборе компонентов интерфейса, особо не связанных между собой по данным (а в не-spa обычно это так и есть), то можете посмотреть мой велосипед. Там все просто, он сделан как раз для изучения. Убрав компоненты и утилиты получите почти готовый шаблон для сборки.

для многостраничных сайтов

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

Как такую тень сделать?

Использовать фильтр с feOffset и feGaussianBlur. Просто сдвинуть и размыть. Получится тень. Начать можно вот отсюда.

Есть конечно и feDropShadow, но по сути это является укороченным синтаксисом для первого варианта и не работает в IE.