-
|
Сейчас у нас есть базовый шаблон, в который встраиваются блоки с контентом страниц, выглядит как <html class="base">
<head>
</head>
<body class="base__body">
<!-- вставляется контент -->
<div class="index">
<!-- вставляется контент -->
</div>
</body>
</html>Это увеличивает количество обёрток у блоков, и отходит от БЭМ, который предлагает использовать для таких случаев миксы. Этот элемент по БЭМ стоило бы сверстать так: <html class="base">
<head>
</head>
<body class="base__body index">
<!-- вставляется контент -->
</body>
</html>Чтобы реализовать такой подход мы можем воспользоваться средствами nunjucks и создать переменную, которая будет передавать нужный нам класс, тогда запись будет выглядеть таким образом базовый шаблон: <html class="base">
<head>
</head>
<body class="base__body {% if templateClass %}{{ templateClass }}{% endif %}">
<!-- вставляется контент -->
</body>
</html>шаблон страницы: ---
templateClass: index
---
<!-- вставляется контент -->Мы используем небольшое количество шаблонов:
Считаю, что такой вариант записи был бы более подходящим, к тому же он чаще используется в остальных основанных на 11ty проектах. Поскольку штука спорная, выносится на обсуждение. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
Начало обсуждения появилось тут. |
Beta Was this translation helpful? Give feedback.
-
БЭМ — это про блоки, элементы и модификаторы. Он же не БЭММ, правда? :) Миксы — это инструмент, который позволяет совместить на одном элементе свойства от разных блоков и элементов. Например, чтобы подмешать (смиксовать) к блоку какую-то геометрию от места, куда его вставляют. Нет такого правила в БЭМе, что всё нужно миксовать чтобы только не было обёрток. Зато есть правило, точнее, практика, что явное лучше неявного. Смотрите: Это базовый шаблон, который применяют все страницы: <!-- base.njk -->
<html class="base">
<head>
</head>
<body class="base__body {% if templateClass %}{{ templateClass }}{% endif %}">
<!-- вставляется контент -->
</body>
</html>Это шаблон конкретной страницы: <!-- index.njk -->
---
title: Главная
templateClass: index
tags: …
labels: …
---
<div class="index__header">
</div>В чём проблема:
На мой взгляд, размазывать структуру блока по разным шаблонам — это плохая практика. Она делает код неявным. Так будет лучше
<!-- base.njk -->
<html class="base">
<head>
</head>
<body class="base__body">
<!-- вставляется контент -->
</body>
</html>Это шаблон конкретной страницы: <!-- index.njk -->
---
title: Главная
tags: …
labels: …
---
<div class="index">
<div class="index__header">
</div>
</div> |
Beta Was this translation helpful? Give feedback.
-
|
Стопроцентно за вариант Вадима. Это и в одном месте, и декларативно, и логики никакой вокруг нет |
Beta Was this translation helpful? Give feedback.
-
|
Да, тут миксование ради меньшей вложенности — это «экономия на списках». Полезное из первого варианта можно вынести то, что если на какой-то странице может как-то отличаться дизайн элементов вне статьи (хэдер, футер, меню), то это можно будет сделать с помощью модификатора: <html class="base {% if templateClass %}base_route_{{ templateClass }}{% endif %}">
<head>
</head>
<body class="base__body">
<!-- вставляется контент -->
</body>
</html>.base_route_about .base__header {
margin-bottom: 30px;
} |
Beta Was this translation helpful? Give feedback.
-
Ну вот такие модификаторы, действительно, полезны и будут применяться по необходимости. |
Beta Was this translation helpful? Give feedback.
БЭМ — это про блоки, элементы и модификаторы. Он же не БЭММ, правда? :) Миксы — это инструмент, который позволяет совместить на одном элементе свойства от разных блоков и элементов. Например, чтобы подмешать (смиксовать) к блоку какую-то геометрию от места, куда его вставляют.
Нет такого правила в БЭМе, что всё нужно миксовать чтобы только не было обёрток. Зато есть правило, точнее, практика, что явное лучше неявного. Смотрите:
Это базовый шаблон, который применяют все страницы: