Как думаете хорошая идея верстки макетов? Есть еще продолжение. Но хотел бы понял, не белебирда ли это?

Question

Как думаете хорошая идея верстки макетов? Есть еще продолжение. Но хотел бы понял, не белебирда ли это?

moloko121106@gmail.com Ученик (194), на голосовании 1 год назад

Методология ОЭП (название нормальнге не придумал еще(но не суть))

В моей методологии есть несколько сущностей:
1) Блок глобальной структуры(БГС)
2) Обертка
3) Элемент
4) Подэлемент

В разметке HTML(структура разметки)

( 1 уровень )Бгс - это дивы, которые делят макет на большие части, придавая семантику: header, main, footer, nav(в основном элемент). Ну вы поняли суть, кстати, див conteiner я также отношу к этой группе, как некое исключение.

( 2 уровень )Обертки - это дивы, которые "обертывают в себя"(содержат в себе) элементы или группы элементов. Они не имеют смысла, и используются для определения расположения (позиционируют) элементов или групп элементов как внутри, так и снаружи. Например, (внутри) грид и флэкс стили, (снаружи) марджин, паддинг, позишн.

( 3 уровень )Элементы - все теги, у которых родитель обертка (строго и без исключений). Они не имеют стили, связанные с их позицией. Они независимые и видимые для пользователя. Красочные и основные. Например: h1-h6, p, a, img... А также стоит выделить такие теги с особенностями: section, article, nav, form, aside, butten, див с текстом внутри, див с элементами внутри. Их особенность в том, что они, имходя из вышесказанного,являются элементами и содержат в себе другие элементы-подэлементы.

( 4,5,6.. уровень )Подэлементы - теги, которые содержаться в элементах. Например: "h2" в "section" или "ul" в "nav" или "a" в "butten". Их отличие от элементов в том, что они имеют стили-позиции.

В препроцессоое Scss (правила оформления) . . .

Answer 1

Кеель Просветленный (42287) 1 год назад

Дивы – это девки? :)

moloko121106@gmail.comУченик (194) 1 год назад

??

moloko121106@gmail.com Ученик (194) Div

Answer 2

AaacoB Aaac Мудрец (14214) 1 год назад

лень вникать...

Answer 3

Похоже на бред. Ты просто разделил ничем не примечательную верстку на уровни и назвал это методологией) я примерно так и верстаю

Лучше запомни как пишется container, button, вызывает нервный смешок...

Answer 4

Верстать нужно смысловыми блоками – да, но ваши примеры, прям какие-то очень странные: main, header, footer – какой-то бред, тк внутри main могут быть куча section, вот они как раз и должны быть смысловыми блоками. Container – никак не может быть только блоком, тк он без смысла, даже в виде исключения, доп. классом у блока –да, а сам по себе нет.

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

"Элементы - все теги, у которых родитель обертка (строго и без исключений)"

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

( 4,5,6.. уровень ) Подэлементы - теги, которые содержаться в элементах. Например: "h2" в "section" или "ul" в "nav" или "a" в "butten". Их отличие от элементов в том, что они имеют стили-позиции

Если это переиспользуемый элемент, и не важно на каком он уровне (4, 5, 6) – задавать такому элементу позиционирование – плохая идея, позиционировать всегда нужно уровнем выше, там где эти (под)элементы собираются вместе, что и делает их переиспользуемыми. А ваш пример "h2" в "section" – это вообще элемент, а не подэлемент.

И не называйте div-ами все подряд, div – это только обертки, те самые, которые без смысла, а все остальное – это не дивы)