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

Question

[speculant]

Здравствуйте, есть вот такой блок, правильно ли я его сверстал и что можно улучшить? правильно ли применил БЭМ?



Что делать с адаптивом? Сейчас у блока задана ширина 1100px и элементы расположены в процентах относительно этого числа, как лучше сверстать под другие размеры? определить несколько размеров (например 900px, 600px) и под них менять процентные размеры, или есть какой то другой способ? а для мобилок полностью менять композицию?

Comments

[Сергей delphinpro]

Упрощать в мобильном варианте. До списка в одну колонку.

Answer 1

[Magnus Keef]

Привет)

Вообще БЭМ это совокупность: организация структуры кода, как html, так и css. Так же организация папко-файлов)

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

Смотри, если вот этот блок
<div class="ingredients__number">05</div>
тебе понадобится на другой странице
то обязательно нужно его вкладывать в родительский блок:

<div class="ingredients">
<div class="ingredients__number">05</div>
</div>

И стили соответственно писать нужно будет

.ingredients {
position: relative
}
.ingredients ingredients__number {
position: fixed
}

И вот если ты всё остальное (стилизация и папки и файлы и их названия, структура) будешь соблюдать, тогда да - твой БЭМ правильный))

Что делать с адаптивом?

Посмотри сетку bootstrap а именно на каких они точках делают медиа запросы, и тоже используй эти точки и да, под них менять процентные размеры или флексы использовать или еще что-то, это уже творческая работа, смотря что проще, смотря какой макет, идея)))

В общем, удачи)

Comments

[Realetive]

И стили соответственно писать нужно будет

.ingredients {
position: relative
}
.ingredients .ingredients__number {
position: fixed
}

— Это неправильный пример, т. к. в каскде для .ingredients__number нет никакого смысла — согласно БЭМ элемент всегда будет вложен в блок .ingredients (а минификация вложенности — одна из ключевых особенностей БЭМ). Т. е. аналагочный результат будет и при

.ingredients {
  position: relative
}
.ingredients__number {
  position: fixed
}