Как назвать классы, если только один css стиль на три html файла?

Там же есть одинаковые элементы , мне надо им дать классы .как мне из назвать ?

Если они одинаковые, то в чем проблема?

Конкретизируйте как-то вопрос.
И почитайте про БЭМ, хотя бы как систему нейминга.

Как правильно писать стили для кнопки?

Semantic.Moscow, и, пожалуйста, перестаньте тегать меня в комментариях.
Хотите рекламировать устаревший способ с line-height равным высоте, про обнуление всех отступов для * и т.д. пишите напрямую ТС.

Как правильно писать стили для кнопки?

Semantic.Moscow,

флекс не поможет центрировать, если у вас высота 49px

А там рядом ничего не написано про 50 и куда и как его задать?

как по мне, так лучше указать line-height, который займёт всю высоту кнопки (запретить перенос!)

Если вам нравится, когда текст выпадает из кнопки - пожалуйста, запрещайте переносы.
И да, так делали 5 лет назад, когда не было флексов.
Можно ещё обрезать overflow. Отличная кнопка будет.

почему не паддинг?
ну, потому, что если шрифт вдруг не подгрузится или будет заменён резервным по какой-то причине браузером, то у нас не случится никакого сдвига из-за разницы в высоте глифов. (про font-stretch тоже не забываем!)

Ок.
Кнопка не прыгнет.
Прыгнет всё остальное.

ну и ошибка новичка - не предусмотреть text-decoration или :hover{font-weight:bold или что там могут напридумывать...

Это один из вариантов переполнения.
Флексы прекрасно с этим справляются.

или что там могут напридумывать...

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

Лучше рассматривать конкретный пример.

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

Как правильно писать стили для кнопки?

Semantic.Moscow, вы считаете бордеры для отступов универсальным решением?
Да, в затейливых дизайнерских случаях, можно использовать всякие костылики, но по возможности, лучше пользоваться свойствами, соответствующими своему смыслу. Свойство для внутренних отступов это padding. В случае выравнивания кнопок замена padding на border ничего не добавляет, а логику убирает.

Флекс не поможет центрировать?

Я где-то сказала, что способ делать кнопки один и поступать надо так и только так?

Как правильно писать стили для кнопки?

Semantic.Moscow,

лучше сразу обнулить всё - *{padding:0;margin:0

В своих проектах используйте, что нравится, только новичкам, пожалуйста, не советуйте.

и если размер шрифта чётный, то и размер lh ну никак нельзя указывать относительным.

Эммм, ну ок, если у дизайнера fz 14, а lh 21, вообще без разницы в каких единицах я его задам у себя в верстке (с точки зрения чет/нечет и симметричности)

угадаете, какой у меня в браузере установлен размер шрифта по умолчанию? (про неизвестный em)

Если для всех шрифтов размеры заданы в em, то не угадаю. Да и зачем бы мне...
И как раз таки line-height коэффициентом решает эту проблему.

если шрифт особенный и никак не хочет вставать ровно посередине,
это легко компенсируется свойствами бордера

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

проблема высосана из пальца.

Вообще не вижу проблемы.
И по-моему, вы очень сильно удалились от вопроса автора.

Как правильно писать стили для кнопки?

Semantic.Moscow, я выше написала способ, решающий эти проблемы.

Почему em нам неизвестен, я не очень поняла. Да и вообще о em речи не шло.

Могу добавить, что вертикальные отступы не обязаны быть симметричными. При некоторых шрифтах это будет выглядеть по уродски.
Это был лишь пример проблемы и вариант, что с ней делать.

Как правильно писать стили для кнопки?

Semantic.Moscow, можно
Любой четный размер шрифта и lh 1.5

Как правильно писать стили для кнопки?

Как обычно, нет универсального ответа.

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

Значит, мы не можем задать одновременно и высоту и ширину фиксированными.
Но можем задать фиксированным один из параметров или ограничить минимальными и/или максимальными значениями.
Например, кнопка на мобилках должна занимать всю доступную ширину формы. Значит, мы должны позволить ей растягиваться по высоте на столько, на сколько ей нужно.

Паддинги мы должны задать в любом случае, чтобы ничего никогда не прилипло к краям (конечно, ещё есть абсолюты, которые могут).

Иногда получается так, что шрифт + line-height + симметричные padding не дают макетную высоту кнопки. Например, получается 49px, а в макете 50.
Можно дополнительно задать мин высоту 50 и центрирование флексом.

Лучше рассматривать конкретный пример.

Какой сервер лучше использовать Xampp или Open Server?

1Aspect1,

и несовместимости с чем-нибудь

Для этого нужно указать, несовместимости с чем именно вас тревожат.

Как сверстать следующий блок?

Corepro, градиентами, псевдоэлементами, SVG... что-нибудь ещё

Какой сервер лучше использовать Xampp или Open Server?

Open Server вроде бы проще в управлении

Если вам проще, то в чем вопрос?

Как в SASS задать box-shadow с цветом?

Потому что деление

box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);

box-shadow: 0 0 0 0.2rem #{rgba(0 123 255 / 25%)}

Как сделать, чтобы div при добавление контента расширялся вверх а не вниз?

vertically-challenged,

ну чтобы работало как в Телеграме

При такой формулировке - вам на фриланс.

Покажите, что вы делали и что именно не получилось на codepen.io
На что похоже я показала в примерах выше. Но есть и альтернативные варианты.

Как сделать, чтобы div при добавление контента расширялся вверх а не вниз?

По мотивам этого https://codepen.io/AnnaSummer/pen/poLbKKa

С помощью чего лучше всего создать слайдер отзывов?

Посмотрите на swiper.js
Или выберите какой-то еще из готовых. Либо напишите свой, если там переключение только по булетам.
Зависит от того, что написано в ТЗ по поводу функциональности этого слайдера.

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

1. Псевдоэлементы или бордеры или градиенты или что-то ещё. Красоту - в стили, информацию - в разметку. Эти палочки это украшение - значит, стили.
2. Нет однозначного ответа, зависит от макета и поведения при адаптиве.

Как сверстать следующий блок?

Сверстать используя адаптивные единицы измерения и позиционирование от центра.
Аналоги:
https://codepen.io/AnnaSummer/pen/QWQOvzy
https://codepen.io/AnnaSummer/pen/eYVeWXR

Как при клике на картинку в сдвинутом слайдере отобразить её в центре экрана?

В данный момент картинка привязана к текущему расположению сдвинутого слайда.

Чем привязана? Как привязана? Картинка привязана или её обертка? И т.д.
Думаю, понятно к чему я веду? Делайте песочницу на codepen.io или аналоге, чтобы было видно, что у вас там происходит.

Как выровнять блоки по левому краю?

Проще всего заменить на гриды.

Флексами это делать неудобно. Либо на JS задавать ширину ::after через кастомные свойства либо дописывать пустые блоки.

Почему не работает z-index?

nonconformiste, послушайте, вы написали утверждение не соответствущее истине. И обозвали его базой.
Контекст наложения это часть спеки.

Ответом на вопрос это тоже не является.

Назвать спеку ересью...

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

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