1️⃣
Разметка
  • 1. 1. Введение
  • 1. 2. Введение в HTML
  • 1. 3. Подходы к разметке
  • 1. 4. Работа со спецификацией
  • 1. 5. Проверка валидности
  • 1. 6. Часто используемые теги и типовые ошибки
  • 1. 7. Методика семантической разметки
    • 1. 7. 1. Определяем DOCTYPE
    • 1. 7. 2. Шаг 1. Выделяем крупные смысловые блоки на каждой странице сайта
    • 1. 7. 3. Шаг 2. Размечаем в блоках крупные смысловые разделы
    • 1. 7. 4. Шаг 3. Выделяем заголовок всего документа и заголовки смысловых разделов
    • 1. 7. 5. Шаг 4. Размечаем мелкие элементы в смысловых разделах
    • 1. 7. 6. Шаг 5. Размечаем фразовые элементы
  • 1. 8. Использование тега br
  • 1. 9. DOCTYPE
  • 1. 10. Как работает атрибут target
  • 1. 11. Правильное использование ссылок и кнопок
  • 1. 12. Как делать пустые ссылки?
  • 1. 13. Как правильно скрывать элементы?
  • 1. 14. Когда применять список терминов (dl)?
  • 1. 15. Как использовать ссылки mailto: и tel:
  • 1. 16. Именование сущностей
  • 1. 17. Разметка по БЭМ
    • 1. 17. 1. Введение
    • 1. 17. 2. Предыстория
    • 1. 17. 3. Частые проблемы из-за неправильной CSS-архитектуры проекта
    • 1. 17. 4. Основные понятия
    • 1. 17. 5. Свод правил БЭМ-а
    • 1. 17. 6. БЭМ для CMS
    • 1. 17. 7. Названия классов по БЭМ
    • 1. 17. 8. БЭМ — это про компоненты
    • 1. 17. 9. Темизация
    • 1. 17. 10. Плюсы и минусы БЭМ
    • 1. 17. 11. Алгоритм выделения блоков
    • 1. 17. 12. Типовые интерфейсные решения
    • 1. 17. 13. Блоки и элементы
    • 1. 17. 14. Миксы блоков и элементов
    • 1. 17. 15. Модификаторы блоков и элементов
    • 1. 17. 16. Типовые ошибки
  • Дополнительные материалы
Powered by GitBook
On this page
  1. 1. 17. Разметка по БЭМ

1. 17. 6. БЭМ для CMS

Несмотря на то, что каскад в БЭМ не приветствуется, для систем управления контентом всё же сделано исключение. Можно создать обёртку, к примеру, <div class="raw-content">, в которую попадёт разметка из визуального редактора.

<div class="raw-content">
  <h2>Разработка бренда селективной парфюмерии HH Project</h2>
  <img src="img/empty-img.svg" width="1200" height="60" alt="">
  <p class="lead">HH — новый бренд был создан в 2020 году парфюмером Vila Khonskaya.</p>
  <p>Ароматы HH представляют собой вибрирующее, звенящее напряжение, сдерживаемое каменным, вулканическим флаконом.</p>
</div>

А стили задавать, используя каскад:

.raw-content h2 {
  margin: 20px 0;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.5;
}

/* стили для абзаца с текстом лида, используем не только каскад, но и комбинацию тег + класс */
.raw-content p.lead {
  margin: 15px 0;
  font-size: 24px;
  line-height: 1.5;
}

.raw-content p {
  margin: 10px 0;
}
Previous1. 17. 5. Свод правил БЭМ-аNext1. 17. 7. Названия классов по БЭМ

Last updated 1 year ago