Layout и Bem. Что к чему?

Question

. . @Anonymous24

Layout и Bem. Что к чему?

Помогите разобраться с, почти Бем`ом. И так, есть такой html код:

развернуть

<div class="Layout">

	<div class="Layout__row Layout__rowHeader">
		<div class="Layout__cellHeader">
			Пусть это HEADER
		</div>
	</div>

	<div class="Layout__row Layout__rowNavbar">
		<div class="Layout__cellNavbar">
			А это пусть NAVBAR
		</div>
	</div>

	<div class="Layout__row Layout__rowBody">

		<div class="Layout__cellBody">

			<main class="Layout__colMain">
				main
			</main>

			<aside class="Layout__colSide">
				side
			</aside>
		</div>
	</div>

	<div class="Layout__row Layout__rowFooter">
		<div class="Layout__cellFooter">
			Это FOOTER
		</div>
	</div>

</div>

К примеру, Layout__row и Layout__rowHeader - это один CSS файл layout.css.

Насколько правильно, если Layout__rowHeader вынести из layout.css в header.css?
Layout__row Layout__rowHeader
делать так:
Layout__row Header__row

Вообще, разделить на слои всё, это есть хорошо?

Насколько правильно так верстать: https://codepen.io/git2ss/full/jOMwKWz
Дайте критики, совета... Посмотрите на блоки в сайт баре (box`ы).

Вопрос задан более трёх лет назад
502 просмотра

5 комментариев

Подписаться 4 Простой 5 комментариев

G F @fomenkogregory

Такие названия классов выглядят как треш

Написано более трёх лет назад
. . @Anonymous24 Автор вопроса

G F, почему? Что не так. Мне кажется удобно ориентироваться в по коду...

Написано более трёх лет назад
G F @fomenkogregory

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

Написано более трёх лет назад
. . @Anonymous24 Автор вопроса

G F, так ради примера connect.vk.com
И в Bem такое есть.

Написано более трёх лет назад
NeKt0 @bubn0ff

Вася Булка, называть надо так, чтобы была понятна суть блока, а не его тег.

Написано более трёх лет назад

Решения вопроса 2

2 комментария

. . @Anonymous24 Автор вопроса

Если Layout__rowHeader «ближе» по стилизации к Header, его лучше вообще удалить, а стили перенести в header.css

Вот на этих моментах и проблемы. Получается, что к каждому классу в блоке необходимо писать дублировать css, тотже контейнер и ко всему этому, одинаковые медиа запросы. Больно большой app.css получается.

От БЭМа тут только классы «через чёрточку»

Да, но за-то как красиво...) Так плохо верстать, будут проблемы?

P.S просто сразу можно понять, что Header__row - это дополняет Layout отвечает за макет и лежит в Header.css... Почти Bem :D

Написано более трёх лет назад
Realetive @Realetive
Как раз наоборот — правильная композиция минимизирует дублирование кода.

Первое правило — блок должен быть максимально независимым от окружения, т. е. у него не должно быть внешней геометрии — в зависимости от контекста он занимает всю доступную ширину (если он блочный) или ширину контента (инлайн, инлайн-блочный контекст).

Судя по демке, у нас есть блок страницы (Layout), состоящий из нескольких элементов: шапки (Layout__Header), собственно, самого контента (Layout__Content), внутри которого основное содержимое (Layout__Main) и боковой панели (Layout__Aside) и подвала (Layout__Footer):

<body class="Layout"> <div class="Layout__Header"></div> <div class="Layout__Content"> <div class="Layout__Main"></div> <div class="Layout__Aside"></div> </div> <div class="Layout__Footer"></div> </body>

Их стили ничего не содержат, только раскладку — в них можно положить что угодно и это не сломает эту раскладку:

https://codepen.io/Realetive/pen/RwGZozZ

Можно заметить, что есть Layout__Content, который «что-то знает» про контентную ширину, которая одинаковая и для содержимого Layout__Header (внутри которого можно выделить самостоятельный блок Header), и Layout__Footer (с блоком Footer), и обёртки для Layout__Main + Layout__Aside:

<body class="Layout"> <div class="Layout__Header"> <div class="Header"> <div class="Header__Content Layout__Content"></div> </div> </div> <div class="Layout__Content"> <div class="Layout__Main"></div> <div class="Layout__Aside"></div> </div> <div class="Layout__Footer"> <div class="Footer"> <div class="Footer__Content Layout__Content"></div> </div> </div> </body>

https://codepen.io/Realetive/pen/poErRzY

Так плохо верстать, будут проблемы?

— Ну, если «для себя» — кто ж вам запретит, никаких проблем.
Написано более трёх лет назад

3 комментария

. . @Anonymous24 Автор вопроса

Благодарю за наглядный пример.
Я только, не могу понять оного, почему мой вариант хуже чем ваш...
И если следовать логике написания стилей как в header`e, то почему в
Вы написали layout__container, а не body__cell,
ещё
layout__col layout__col_main, вместо layout__col main.

В моем примере, классы дополняют друг-друга начиная от базиса layout. Если меняю контейнер, то меняется везде, а так придется каждый блок менять.
Что не так... Не пойму... Запутался блин...

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

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS
Вася Булка, что может быть общего между шапкой и подвалом? Практически ничего. Два совершенно самостоятельных блока. Значит отдельные классы, отдельные стили.
В лейауте в принципе можно выделить отдельно блок body

<div class="body"> <main class="body__col body__col_main"> main </main> <aside class="body__col body__col_side"> side </aside> </div>

Вполне допустимо. Особенно, если у вас планируется более трех-четырех разных вариантов с колонками.

про модули в сайдбаре вы правы.

<aside class="body__col body__col_side"> <div class="box news"></div> <div class="box banners"></div> <div class="box menu"></div> </aside>

Здесь box будет задавать модуль в целом, а news является отдельным блоком со своими стилями.

Для большего понимания загуглите про верстку независимыми блоками.
Написано более трёх лет назад
. . @Anonymous24 Автор вопроса

Сергей delphinpro, Я очень рад, что вы наглядно даёте ответ. Я ценю это. Спасибо.
Пойду тренироваться.

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 6 часов назад
- 58 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- 21 час назад
- 66 просмотров
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 30 просмотров
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 68 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 99 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 88 просмотров
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 87 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 103 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать универсальную HTML-ссылку на яндекс карты?
- 1 подписчик
- 17 дек.
- 251 просмотр
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Аппликация для фильтра заказов

22 дек. 2024, в 20:40

10000 руб./за проект

Расширение для Google Chrome

22 дек. 2024, в 20:34

3000 руб./за проект

Парсер-бот

22 дек. 2024, в 20:12

10000 руб./за проект

Такие названия классов выглядят как треш
G F, почему? Что не так. Мне кажется удобно ориентироваться в по коду...
Вася Булка, ну в css не принято использовать камел кейз. Можно конечно, но выглядит чужеродно, и на проектах я такого ни разу не видел. В основном пишут через кебаб.
G F, так ради примера connect.vk.com
И в Bem такое есть.
Вася Булка, называть надо так, чтобы была понятна суть блока, а не его тег.

Answer 1 · 2020-12-19 07:39:45

Насколько правильно, если Layout__rowHeader вынести из layout.css в header.css?
Layout__row Layout__rowHeader

— Ни на сколько. Если Layout__rowHeader «ближе» по стилизации к Header, его лучше вообще удалить, а стили перенести в header.css

Вообще, разделить на слои всё, это есть хорошо?

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

Насколько правильно так верстать: https://codepen.io/git2ss/full/jOMwKWz

От БЭМа тут только классы «через чёрточку»:
1) Header__row, Body__row и Footer__row объявлены вне своих блоков (элементы не должны существовать за пределами блока)

Answer 2 · 2020-12-19 10:16:13

<div class="layout">

  <div class="layout__row header">
    <div class="header__cell">
      Пусть это HEADER
    </div>
  </div>

  <div class="layout__row navbar">
    <div class="navbar__cell">
      А это пусть NAVBAR
    </div>
  </div>

  <!-- variant 1 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__col layout__col_main">
        main
      </main>
      <aside class="layout__col layout__col_side">
        side
      </aside>
    </div>
  </div>

  <!-- variant 2 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__main">
        main
      </main>
      <aside class="layout__side">
        side
      </aside>
    </div>
  </div>

  <div class="layout__row footer">
    <div class="footer__cell">
      Это FOOTER
    </div>
  </div>

</div>

Layout и Bem. Что к чему?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт