и там мне очень понравилась вложенность, везде ее лепил то-есть структура css у меня получилась такая же как и в html
Так делать не стоит ни в CSS ни в препроцессорах.
Большая вложенность приводит к повышению специфичности, а значит, к потенциальным проблемам при переопределениях.
БЭМ как раз заметно сокращает потребность во вложенностях.
Если у вас есть элемент .block__elem, то уже и так понятно, что он лежит в блоке .block и больше нигде.
Это #details-bouncy #details-bouncy-markers div, конечно жестоко. Вы попросили браузер найти сначала все div на странице, потом проверить лежат ли они в #details-bouncy-markers. Это уже не лучший ход. Так потом ещё нужно пойти выше по дереву и проверить, лежит ли это всё в #details-bouncy.
Вместо этого можно было бы задать одинаковый класс этим div и использовать простой селектор типа .class {}. Ну или в БЭМ версии .block__elem {}
Ну кроме того, что эти картинки вообще не контентные, а украшения. А украшения делают фонами и/или псевдоэлементами с помощью стилей.
так же я использовал очень много id что тоже не верно?
id для стилизации используют очень редко, во многих кодгайдах это просто запрещено. id нельзя переиспользовать на той же странице и опять таки повышение специфичности.
p.s.
1. Вы смотрели свой сайт при ширине окна больше макетной? Есть прелюбопытные моменты.
2. Высоту в верстке задают очень редко. Мы никогда не знаем сколько будет контента. Используйте отступы и/или мин макс высоту, если она зачем-то нужна.
3. Не забывайте проверять код валидатором.
4. <h2>O U R S E R V I C E S</h2>
В разметке текст хорошо бы писать так, чтобы его нормально могли прочитать экранные дикторы. Представьте, как может быть прочитан вот этот.
Для увеличения расстояния между буквами есть свойство letter-spacing.
5. Ну и т.д. про семантику, контентные картинки и украшения, лишние теги... Хватит пока.
А для гитхаба сделайте отдельный вопрос, не стоит мешать всё в кучу.
1. Используете aspect-ratio если позволяет ТЗ. Если нет, гуглите "css пропорции хак с паддингом".
В итоге делаете ваш блок квадратным.
2. Чтобы вписать картинку, используете object-fit.
Тут есть два пути: абсолютом или гридами.
Если они стоят по центру, то банальное texl-align: center спасет всех, кроме кнопки.
Ей можно display: block, width: fit-content и горизонтальные margin в auto.
Так делать не стоит ни в CSS ни в препроцессорах.
Большая вложенность приводит к повышению специфичности, а значит, к потенциальным проблемам при переопределениях.
БЭМ как раз заметно сокращает потребность во вложенностях.
Если у вас есть элемент .block__elem, то уже и так понятно, что он лежит в блоке .block и больше нигде.
Это
#details-bouncy #details-bouncy-markers div, конечно жестоко. Вы попросили браузер найти сначала все div на странице, потом проверить лежат ли они в #details-bouncy-markers. Это уже не лучший ход. Так потом ещё нужно пойти выше по дереву и проверить, лежит ли это всё в #details-bouncy.Вместо этого можно было бы задать одинаковый класс этим div и использовать простой селектор типа
.class {}. Ну или в БЭМ версии.block__elem {}Ну кроме того, что эти картинки вообще не контентные, а украшения. А украшения делают фонами и/или псевдоэлементами с помощью стилей.
id для стилизации используют очень редко, во многих кодгайдах это просто запрещено. id нельзя переиспользовать на той же странице и опять таки повышение специфичности.
p.s.
1. Вы смотрели свой сайт при ширине окна больше макетной? Есть прелюбопытные моменты.
2. Высоту в верстке задают очень редко. Мы никогда не знаем сколько будет контента. Используйте отступы и/или мин макс высоту, если она зачем-то нужна.
3. Не забывайте проверять код валидатором.
4.
<h2>O U R S E R V I C E S</h2>В разметке текст хорошо бы писать так, чтобы его нормально могли прочитать экранные дикторы. Представьте, как может быть прочитан вот этот.
Для увеличения расстояния между буквами есть свойство letter-spacing.
5. Ну и т.д. про семантику, контентные картинки и украшения, лишние теги... Хватит пока.
А для гитхаба сделайте отдельный вопрос, не стоит мешать всё в кучу.