Оцените вёрстку по БЭМу?

Question

[Иван]

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

<div class="profile" id="menu1">
        <div class="page-photo">
            <div class="page-photo__avatar"></div>
            <button class="page-photo__add-friend" type="button" name="button" aria-label="Добавить в друзья">
                Добавить в друзья
            </button>
        </div>
        <div class="page-info-wrap">
            <form class="page-info-wrap__form-info" action="index.html" method="post">
                <input type="text" class="page-info-wrap__name" id="name" value=""
                       placeholder="Ваше имя?">
                <input type="text" class="page-info-wrap__city" id="my-city-id" value=""
                       placeholder="Ваше место проживания?">

                <div class="page-info-wrap__field-info">
                    <label for="family-status" class="page-info-wrap__description">Семейное положение </label>

                    <input type="text" class="page-info-wrap__contact"
                           id="family-status" name="" value="" placeholder="Семейное положение?">
                </div>
                <div class="page-info-wrap__field-info">
                    <label for="Number" class="page-info-wrap__description">Телефон </label>

                    <input type="number" class="page-info-wrap__contact"
                           id="Number" name="numb" value="" placeholder="Ваш номер телефона?">
                </div>
                <div class="page-info-wrap__field-info">
                    <label for="e-mail" class="page-info-wrap__description">E-mail </label>

                    <input type="email" class="page-info-wrap__contact"
                           id="e-mail" name="" value="" placeholder="Ваша почта?">
                </div>
                <div class="page-info-wrap__field-info page-info-wrap__hobbies-field">
                    <label for="hobbies" class="page-info-wrap__description">Интересы </label>

                    <input type="text" class="page-info-wrap__contact"
                           id="hobbies" name="" placeholder="Ваши интересы?" value="">
                    <button type="button" id="btn-add-hobbies" class="page-info-wrap__add-hobbies" name="button">
                        Добавить
                    </button>
                    <ul class="page-info-wrap__hobbies-list">
                    </ul>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

[Antonio Solo]

БЭМ это прежде всего идеология построения верстки. сам кусок кода выглядит вполне по БЭМ-овски, хотя "Б" и "Э" я вижу, а вот "М" не наблюдаю

Comments

[Иван]

но какой в итоге блок использовать в моём случае? для элементов указывать блок profile или же page-photo / page-info-wrap?

[Antonio Solo]

BenderIsGreat34, это вы строите сайт, вы определяете где у вас блоки а где элементы.

Answer 2

[lukoie]

В коде в БЭМ нету М. Это если у какого-то Элемента будет Модификатор. Например если некая кнопочка будет не просто дефолтной, но неактивной. Или какой-то пункт меню будет выделен как активный. Или картинка при наведении мышки будет с тенькой.
Потому нужно еще цсс добавить, чтобы было понятно всё ли бэмно тут. Но даже и то что есть - вполне вкладывается в эту методологию.

Comments

[Иван]

Модификаторов не должны быть. БЭМ в данном случае использую как красивый нейминг для классов. но какой в итоге блок использовать в моём случае? для элементов указывать блок profile или же page-photo / page-info-wrap?

[lukoie]

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