Насколько хороша эта верстка?

Question

[Nustocogna]

Макет - https://www.figma.com/file/zR1XfguUZ5wWWOy6ah30Xq/...
Верстка не писксел-перфект и не на заказ, пытался придерживаться БЭМ; без адаптива
Вот, она небольшая - https://codesandbox.io/s/floral-leftpad-5wzsuj?fil...
Правильно ли я придерживался методологии БЭМ? Где я ошибся и что стоит переделать (в общем)?

Comments

[wadowad]

Попробуйте протестировать на маленьких расширениях ;)

[Nustocogna]

wadowad, приведите примеры, пожалуйтса, я новичок и не совсем разбираюсь

[Антон Литвиненко]

Слово хороша в данном случае не особо применимо, но все как-то начинали и делали ошибки. Удачи

Answer 1

[Виталий Першин]

Никакого reset.css , максимум normalize и то переделать так, чтобы не повышать специфичность
Ни в коем случае не применять стили ко всем элементам body * , мало того что ко всем элементам, так еще и вложенный селектор повышающий специфичность.
По разметке более-менее, но вот кнопка это ужас какой-то:

<div class="button__wrapper">
                    <div class="button capab__more">
                        <a href="#">
                            <button class="button__btn">All Services</button>
                        </a>
                    </div>
                </div>

Да и вообще вы все теги "a" как-то недооцениваете, в первую очередь надо описывать их, навешивать на них классы и стили, равно как и button, а не делать кнопки из оберток этих тегов, это не тот случай

input__input у вас не вызывает сомнения?, тут было бы более уместно задать например вместо news-signup__form отдельный блок form, а еще лучше subscribe, а там уже и subscribe__input, subscribe__field, subscribe__button да что угодно и будет это красиво и просто.
Тоже самое с соц сетями, это отдельный блок должен быть, можно просто social и микс если надо footer__social
Вообще с футером тоже большие проблемы footer-main / footer-part / footer-part-company / footer-part-links / footer-part-contact это безумие какое-то, вы либо делайте отдельные блоки без привязки к футер, либо делайте их элементами футера

Comments

[Nustocogna]

Никакого reset.css

О, такого я точно не ожидал услышать. Три месяца его использую его и думал, что так надо. Но ок, понял

Но вот кнопка это ужас какой-то

Вообще с футером тоже большие проблемы

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

А в остальном, спасибо вам большое! Я пересмотрю свои ошибки, постараюсь дальше не допускать подобные

[Виталий Першин]

Nustocogna,

О, такого я точно не ожидал услышать. Три месяца его использую его и думал, что так надо. Но ок, понял

Это очень старый подход от которого больше проблем чем пользы. Вообще достаточно для body обнулить внутренние и внешние отступы, но если добавить normalize, то у вас будет общий стиль для всех браузеров, это намного красивее обнуления/ресета в том случае если какой-то из элементов не будет должным образом оформлен.

На счет футера у меня всегда были проблемы

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

А в остальном, спасибо вам большое! Я пересмотрю свои ошибки, постараюсь дальше не допускать подобные

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