Блок, Элемент, Модификатор (БЭМ)

Новая верстка страницы результатов поиска

Fri, 19 Feb 2010 19:30:55 +0300

Новая верстка страницы результатов поиска

Библиотека блоков

Wed, 03 Feb 2010 00:44:04 +0300

Сырой список основных блоков библиотеки.

Чтобы не пересекаться с имеюшимся кодом, скорее всего будет добавлен префикс bem ко всем компонентам, т.е. не b-text, а b-bem-text или bem-text.

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

b-link: Ссылка.

Глобально цвет ссылок не задаётся, чтобы оставить возможность использовать браузерный дефолт в случае необходимости. Цвета ссылок задаются через модификаторы.

Ссылка может быть pseudo (или модификатор b-link или как отдельный блок b-pseudo-link, пока непонятно, у нас сейчас используется второй вариант, но, кажется, первый лучше), т.е. действие происходит на странице без её перезагрузки (в Яндексе такие ссылки выделяются точечным подчёркиванием вместо text-decoration: underline).
b-icon: Пиктограмма.

Поддержка как одной картинки, так и спрайта. Поддержка fliter в MSIE6 (хотя фильтры зло-зло-зло, может быть и не будет поддержки PNG-24 в MSIE6).
b-input: Поле ввода.

Решение проблемы 100% растянутого поля ввода. Добавление хинта.
b-text: Статический текст.

Оформление для абзацев, списков, etc.
b-search: Поисковая форма.

Использует b-input. Есть пример, уточнение поиска, ссылка на расширеный поиск.
b-auth: Форма аутентификации.

Используется b-input.
Кнопка Войти недоступна, если не введены имя или пароль.
Обработка формы как с перезагрузкой страницы, так и без.
Показ капчи.
b-menu: Меню.

Горизонтальный или вертикальный набор ссылок.
b-popup: Popup (как это по-русски будет?).

У попапа должна быть подложка, которая позволяет перекрыть всё что угодно на странице. Например, играющий flash-ролик.

Подложка в т.ч. может быть растянута на весь viewport, «паранжа».

С реализацией этого блока сейчас есть проблемы, напишу про него отдельный пост.
b-dropdown: Выпадушка.

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

Собирается из b-pseudo-link и b-popup. Может содержать в себе b-menu, если нужен набор ссылок, как на скриншотах выше. А может содержать в себе и форму, например.

Это минимальный набор блоков из которых строятся остальные блоки и страницы сайтов. Для первой версии кажется достаточно.

Новости одной строкой

Tue, 02 Feb 2010 23:32:43 +0300

Разработанный нами подход к вёрстке независимымыми блоками мы с Вегед'ом навали БЭМ (Блок, Элемент, Модификатор) или BEM (Block, Element, Modifier).

Разработка будет идти на github'е. Отдельным проектом опишем сам подход, отдельным reusable библиотеку блоков (про это следующий пост), отдельно утилиты для облегчения работы с кодом.

Всё что написано в клубе в той или иной мере устарело и будет переписано чуть более чем полностью.

Мысли без порядка:

префикс l- зло, вместо него испольузется элемент layout внутри блока
префикс h- не нужен
префиксы вообще не нужны (алилуя!)
добавились модификаторы у элементов
global reset зло, он не будет использоваться в библиотеке блоков
каскад в CSS тоже зло, будет использован по минимуму
оптимизируем скорость разработки и скорость работы кода в продакшене
стили для MSIE7- хочется писать в том же файле, что и основные, например, через @media ie6 {…}

Стили с JS и без

Tue, 19 Jan 2010 23:28:36 +0300

Насколько я понял система сейчас такая: грузится страница и после загрузки (DOMReady), если у юзер-агента включен JS, скрипт в body пишет id="js" (до этого "nojs"), ну и тогда к странице применяются стили и фишки, которые видят почти все. Вопрос: почему нельзя использовать для этих же целей тег <noscript> и подключать внутри него стили без js. Да, понимаю что кармически грузить два файла со стилями - это ай-яй-яй, но всё-таки, мне кажется, это лучше, чем неисчезающие label'ы над инпутами (реализация аттрибута placeholder из HTML5), на каком-нибудь Яндекс.Мэпсе, которые не исчезают, потому что страница долго грузится или просто канал медленный, и это из мелочей, что я на вскидку вспомню. Есть ли минусы, кроме вышеуказанного, у этого подхода, или этот минус решающий в этом вопросе?

Премодерация, чистка

Tue, 22 Dec 2009 23:05:26 +0300

Я включил обратно премодерацию клуба и удалю все записи, которые не относятся непосредственно к теме клуба.

Вопрос "знатокам"

Tue, 22 Dec 2009 14:28:54 +0300

Если ли смысл ориентироваться на комьюнити?

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

Если да, то нам надо писать следуя своду достаточно жестких правил, причем, они сильно шире правил уже описанных. Вот например у нас есть свой b-round и у Виталия есть свой b-round, конфликт названий, если использовать неймспейсы hh-b-round, то в рамках проекта вроде как необоснованно раздувается html. И таких ситуации много.

Если забить на комьюнити, и использовать только идею, что мы сейчас и делаем, обмен "опытом" какой-то скудный.

Предлагаю универсальное решение для иконок в ссылках

Mon, 21 Dec 2009 20:27:19 +0300

Замечаю довольно часто, что не все верстальщики любят делать иконку частью ссылки и выравнивать ее относительно текста, однако пользователю приятно наводить курсор на иконку и видеть активность ссылки.

У меня в одном проекте было очень много иконок разных размеров, как самих иконок, так и шрифта, в результате чего я решил изобрести велосипед и сделать универсальное решение которым делюсь.

.b-icons {
    position: relative;

    padding-left: 0 0 0 1em; /* отступ на свое усмотрение */

    display: inline-block; /* костыль для Opera, в противном случае при ресайзе окна браузера в инлайновых элементах иконки поплывут */

    zoom: 1; /* неизбежность для ie6, по учению фреймворка вообще можно вынести в отдельный CSS */
}
.b-icons i {
    position: absolute;
    top: 50%;
    left: 0;

    display: block;
    overflow: hidden;
}

HTML:

<a href="#" class="b-icons b-icons_main"><i></i>главная</a>

далее индивидуальный код для иконок, хотя если у вас используются все иконки с одинаковыми свойствами ширины, высоты и фона, их можно перенести в код выше или создать отдельный класс например b-icons_16x16, кроме background-position

.b-icons_main i {
    width: 16px;
    height: 16px;
    margin-top: -8px; /* половина высоты иконки */

    background: url(/images/sprite.gif) 0 -20px;
}

p.s. сейчас посмотрел как реализованы иконки на главной странице Яндекса, очень похожее решение, но я предлагаю немного другой способ, как универсально выровнять иконку относительно текста, а не конкретное решение реализации иконок. В Яндексе используются спрайты с png-24, ниже немного усложненный вариант для того чтобы можно было в ie6 применить альфа фильтр.

.b-icons i s {
    display: block;
}

.b-icons_main i {
    width: 16px;
    height: 16px;
    margin-top: -8px;

    display: block;
    overflow: hidden;
}
.b-icons_main i s {

    width: 250px; /* обязательно указать полный размер картинки */
    height: 250px; /* обязательно указать полный размер картинки */
    margin: -12px 0 0 -24px; /* уже позиционирование в спрайте не через background-position, а марджином */

    background: url(/images/sprite.png); /* в отдельном CSS для ie6 можно прописать альфа фильтр */
}

HTML:

<a href="#" class="b-icons b-icons_main"><i><s></s></i>главная</a>

единственный косяк с которым я так и не справился — это если изменить font-size в самой ссылке, выравнивание работать не будет, нужно менять размер шрифта в дереве выше.

предлагаю это решение включить в фреймворк

А не пора ли начать?..

Sat, 12 Dec 2009 00:48:48 +0300

Жизнь в клубе совсем затихла. Все ждут очередных статей от Виталия.

Друзья! Не кажется ли вам, что все основные принципы будущего фреймворка уже подробно описаны и рассмотрены на примерах здесь и в субботниках. Мы уже знаем зачем, мы уже знает как.

А не пора ли начать думать над идеями блоков, которые будут полезны не только в конкретном специфичном проекте, но и в других (те самые reuseble), совместно разрабатывать и тестировать их, создавать материальную основу фреймворка.

А быть может уже делиться своими наработками, как это сделал Виталий на примерах b-round, b-icon, g-png?

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

1 http-запрос за стилями

Tue, 10 Nov 2009 20:26:01 +0300

Вот просмотрел 2 раза Ваши видео о теории и о практике фреймворка своими руками, но всё равно не понял одной вещи.

Вопрос: запрашивая файл стилей, откуда cgi-скрипт (который, судя по видео, собирает кирпичики в дом) берёт названия нужных ему (точнее даже конкретной странице) кирпичиков, из которых потом выдирает содержимое и заталкавает в один файл? Какой порядок в создании большого стилевого файла?

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

Спасибо!

Универсальный css-класс для блоков с круглыми уголками

Mon, 19 Oct 2009 02:17:26 +0300

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

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

изпользование символа • вместо графики, что позволяет менять радиус скругления и цвет уголков из css
все размеры указанны в em, для кроссплатформенности и кроссбраузерности
возможность делать блоки как с фоном так и просто с рамкой например 2px
не используется ни графика, ни JS, ни expression
используются отдельные стили для IE7 и ниже

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

Отличие моего метода от аналогов в том что он не только отлично работает во всех браузерах под Windows(IE6+, Opera, FF2+, Safari3+, Chrome), но и под MacOS и Linux.

С удовольствием продемонстрирую это на примере.

Очень интересно ваше мнение, коллеги, особенно Виталия Харисова.

Fri, 18 Sep 2009 15:48:03 +0300

Здравствуйте.

Не так давно начал использовать в своей работе принципы, описанные в данном фреймворке и решил поделиться идеей, которую использую.

Блоки, имена которых используются для выбора через ява-скриптовые фреймворки (jQuery и т.п.) я предваряю префиксом js-

В скриптах получается что-то вроде $(".js-mp3").bind("click", function() { ...

Сначала я использовал для этого префикс модификатора m- но потом решил что неправильно использовать префикс, имеющий отношение к CSS в JS. Вот такая мысль.

Скругленные уголки

Tue, 08 Sep 2009 11:33:36 +0300

Привет всем, в рамках фреймворка, хотелось бы узнать о решении насущей задачи в текущих случаях и их сочетаниях:

однородный и не очень фон
с бордюром
с тенью или с другими графическими рюшечками ( думаю это к фреймвоку не относится )

Проблема: скорость селекторов

Mon, 10 Aug 2009 23:51:36 +0300

Браузеры рассматривают селекторы cправа налево. Например, при нахождении элемента <a> в дереве документа будут выбраны все селекторы с a или * на конце и будет осуществлён просмотр вверх по дереву в поисках элементов входящих в селектор до тех пор пока не будут найдены подходящие элементы, не станет понятно, что селектор не применим или не будет достигнут конец документа.

Т.е. в случае селекторов .b-services li a и .b-user a (Tag Rules) оба они будут испробованы для каждой ссылки на странице.

Источники, подтверждающие это:

Наглядный пример: 30 тысяч div'ов на странице, селекторы заканчиваются на .text (рефлоу 5 секунд) и на div (рефлоу 37 секунд, осторожно! браузер замерзает, а потом оттаивает).

Чем больше Tag Rules на странице, тем медленнее страница отрисовывается. Для того, чтобы вёрстка была масштабируемой, чтобы на одних и тех же подходах можно было сделать и «Home Page для кота» и почту Яндекса надо найти универсальное решение, которое подходит на все случаи жизни.

Такое решение, на мой взгляд, это использование абсолютно-независимых блоков для вёрстки всех-всех блоков на странице и отказ от global reset. В этом случае каждый элемент блока получает свой уникальный класс и селекторы отрабатывают максимально быстро.

Открытым вопросом пока остаётся влияют ли на скорость применения селекторов наличие селекторов которые ничего не матчат, надо написать тесты.

Другие проблемы вёрстки и их решения в следующих выпусках нашего журнала. Оставайтесь на проводе.

Monkey Joe

Fri, 17 Jul 2009 23:01:48 +0300

Фрейворк будет называться Monkey Joe. Слоган: «Monkey Joe will do the monkey job for you».

Браузер как виртуальная машина

Tue, 07 Jul 2009 22:57:12 +0300

Виталя Харисов поделился ссылкой

Браузер как виртуальная машина

Я хотел эту запись в клуб написать.

Таймаут

Thu, 14 May 2009 11:03:25 +0300

Я не забил на клуб, но беру таймаут на некоторое время. Мы дорабатываем концепцию. Оставайтесь на линии.

Структура блока на файловой системе

Wed, 15 Apr 2009 19:09:53 +0300

«Много маленьких файлов лучше, чем мало больших» © Сергей Бережной

Блоки в отдельной директории

В корне проекта создаётся директория block, в неё складываются все блоки, используемые на проекте. Во фреймворке аналогично делается директория block, в которой лежат блоки фреймворка.

Каждому блоку по директории

Под каждый блок создаём директорию с именем блока. Блок описывается минимум одним файлом: b-blah.css

block/
    b-round/
        b-round.css

В этом случае пример HTML-разметки приводится в комментарии в начале файла.

Пример вёрстки блока удобнее класть рядом с его стилями:

block/
    b-round/
        b-round.css
        b-round.html

Дополнительные стили

Дополнительные стили выносим в отдельные файлы

block/
    b-blah/
        b-blah.optional-styles.css

Дополнительные стили: ie

Если для блока есть исправления под MSIE7- добавляем файл b-blah.ie.css.

block/
    b-round/
        b-round.css
        b-round.ie.css

Внутри этого файла пишем стили для MSIE по следующим правилам

.b-round { … } /* Все MSIE */
* html .b-round { … } /* MSIE 6 */
[class].b-round { … } /* MSIE 7 */

Дополнительные стили: reset

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

Ситуации когда это надо

блок используется на проекте который написан без использования глобального reset (старый проект)
на проекте невозможно использовать глобальный reset из-за того, что в нем используется любой HTML, который написал пользователь (хороший пример HTML-письма, которые показываются в webmail)

Для сброса стилей в умолчальное состояние добавляем файл b-blah.reset.css (и/или b-blah.reset.ie.css в случае необходимости)

block/
    b-round/
        b-round.css
        b-round.reset.css

Альтернативно есть мысли отказаться от global reset и всегда использовать local reset. Есть подозрения (пока не проверенные), что * { margin: 0 } замедляет работу брузера. Надо делать тесты.

Вложенные элементы

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

Под такие стили заводим отдельную директорию с именем вложенного элемента, файлы называем b-имя-блока.элемент.css.

На самом деле можно стили для всех вложенных элементов раскладывать по папкам. Это упорядочивает структуру блока в голове и на файловой системе и сразу показывает из каких элементов состоит блок.

block/
    b-popup/
        shadow/
            b-popup.shadow.css
            b-popup.shadow.ie.css

В b-popup.shadow.css пишем

/* Popup: Тень (begin) */ /**/
    .b-popup .shadow
    {
        width: 100%;
    }
 
    .b-popup .shadow .form
    {
        margin: -14px -7px -7px;
    }
 
    .b-popup .shadow .l, .b-popup .shadow .r,
    .b-popup .shadow .lt, .b-popup .shadow .rt,
    .b-popup .shadow .lb, .b-popup .shadow .rb
    {
        font: 0/0 a;
 
        width: 14px;
        height: 14px;
 
        background: url(b-popup.shadow.png);
    }
 
    ...
/* Popup: Тень (end) */ /**/

Обратите внимание, что на файловой системе .b-popup.shadow.css, а в файле .b-popup .shadow. Логично и удобно для запоминания.

Если у блока есть необязательная разметка, стили для неё всегда выносим точно так же в отдельные файлы и отдельную директорию.

Модификации классом

Модификации классом и внутри контекстного блока выносятся в отдельную директорию с именем _тип-модификации, в которой лежат файлы b-blah_модификатор.css (.ie и .reset в случае необходимости).

block/
    b-round/
        _radius/
            b-round_2.css
            b-round_3.css
            ...
        _border/
            b-round_3a3a3a.css
            b-round_3a3a3a.ie.css
            b-round_ff0000.css
            b-round_ff0000.ie.css
            ...
        b-round.css
        b-round.ie.css
        b-round.html

Блоку можно задавать только один модификатор определённого типа. Почему? Мы используем xml-описание блока, где модификаторы указываются атрибутами, а двух атрибутов с одним именем быть не может.

<yacf:b-round yacf:radius="2" yacf:border="ff0000"></yacf:b-round>

Об xml-описании блоков в другой раз.

Модификации внутри конкретного блока

Модификации внутри конкретного блока делаются по аналогии с вложенными элементами. Создаём папку модифицируемого блока внутри папки родительского блока.

block/
    b-dropdown/
        b-pseudo-link/
            b-dropdown.b-pseudo-link.css

Сводим всё вместе на примере

В поисковых сервисах Яндекса в шапке есть поисковая форма, блок b-head-search. Этот хороший пример всего, что было сказано про структуру выше.

Поиск Яндекса

У него есть основные стили, которые используются во всех поисковых шапках

block/
    b-head-search/
        b-head-search.css
        b-head-search.ie.css

Есть модификация с двумя полями ввода

block/
    b-head-search/
        _type/
            b-head-search_double.css

Маршруты на Картах

И есть опциональная разметка, например, ссылка на расширенный поиск:

block/
    b-head-search/
        advanced/
            b-head-search.advanced.css

На Картинках есть, на Маркете нет.

или пример:

block/
    b-head-search/
        sample/
            b-head-search.sample.css
            b-head-search.sample.ie.css
            b-head-search.sample.reset.css

На Маркете есть, на Поиске нет.

Неудобно создавать все эти файлы и директории!

Неудобно, но мы работаем над этим. Хотим в IDEA добавить поддержку создания блока, элементов и модификаторов. А так же (sic! sic!) переименования блока (вот это реальная проблема, если делать это руками надо переименовать кучу файлов в случае развесистого блока).

Модификация блоков, префикс m-

Wed, 15 Apr 2009 01:37:50 +0300

Один и тот же блок может выглядеть по разному в зависимости от дизайна, местопложения на странице или на разных проектах. Изменение внешнего вида или поведения блока будем называть модификацией. Существует три вида модификации: дополнительным классом, от контекста и файлом.

Дополнительным классом

Самый простой тип модификации. Добавляем блоку дополнительный класс и изменение внешнего вида блока описываем в рамках этого класса.

Модификатор записывается через подчёркивание после имени блока: b-имя-блока_модификатор.

<div class="b-message">
    Normal font-size
</div>

.b-message
{
    font-size: 100%;
}

<div class="b-message b-message_small">
    Small font-size
</div>

.b-message_small
{
    font-size: 85%;
}

У одного блока может быть одновременно несколько модификаторов.

<div class="b-message b-message_small b-message_error">
    Error message
</div>

.b-message_error
{
    color: red;
}

Модификация блока может требовать экстра-разметку внутри блока. Например, в сообщении об ошибке добавляется иконка с восклицательным знаком.

<div class="b-message b-message_small b-message_error">
    <i class="icon"></i>Error message
</div>

.b-message_error
{
    color: red;
}
 
.b-message_error .icon
{
    background: url(...);
}

От контекста

Блок будучи помещён в особое окружение может менять свой внешний вид. Например, надо менять цвет текста вложенного блока с зелёного на красный, если он помещён в блок с синим фоном с красными буквами. Это модификация от контекста.

Внутри конкретного блока

Блок помещается в другой блок и должен изменить свой внешний вид.

<div class="b-dropdown">
    <a class="b-pseudo-link">или</a>
</div>

.b-dropdown .b-pseudo-link
{
    margin-right: 8px;
}

Внутри контекстного блока

Иногда бывает надо сделать контекстную модификацию блока без привязки к какому-то конкретному блоку. Например, поменять цветовую схему группе блоков (скины). Для этого вводим специальный блок с префиксом m-, который задаёт контекст, а в стилях конкретных блоков пляшем от этого контекста.

<body class="m-theme_red">
    <div class="b-logo"></div>
    <div class="b-service-name"></div>
</body>

Причём не обязательно задавать контекстный класс для body, контекстным блоком можно оборачивать в любом месте страницы, создавая таким образом локальный контекст в нужном месте.

Имя контекстного блока строится так: m-тип-модификации_модификация

Тоже самое можно записать через модификацию классом:

<body>
    <div class="b-logo b-logo_red"></div>
    <div class="b-service-name b-service-name_red"></div>
</body>

Если не экономить байтики, можно для любой модификации классом предусматривать одновременно и контекстную модификацию и использовать тот вариант, который наиболее удобен в каждом конкретном случае.

.b-message_error, .m-type_error .b-message
{
    color: red;
}

Модификация файлами

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

Например, все шапки Яндекса состоят из двух частей: общая часть, реализующая взаимное расположение элементов, лежит в одном месте, а конкретика проекта (цвета, как правило) в другом.

Префикс g-

Tue, 14 Apr 2009 19:52:13 +0300

Префикс g- (global) используется для создания глобальных модификаторов, которые при добавлении их к любому блоку как-то меняют его поведение.

Необходимость в глобальных модификаторах небольшая, мы за несколько лет разработки выделили всего четыре штуки.

g-png

Поддержка PNG-24 в MSIE. Добавляется элементу, в котором лежит картинка.

Есть мысли вообще отказаться от g-png и вешать expression прямо на img, в котором проверять расширение картинки и выставлять фильтр при необходимости.

g-line

Easy Clearing. Добавляется элементу, в котором все другие элементы плывут. Использует :after для нормальных браузеров и hasLayout для MSIE.

g-hidden

Скрывает элемент, к которому он добавлен, через display: none.

g-js

Блок «оживляемый» скриптом. Скрипт выбирает все такие элементы, берёт параметры из onclick и вызывает соответствующий этому блоку обработчик.

g-round

Если бы было реализовано универсальное и работающее решение для скругления углов любого блока, которое можно выразить простым добавленим класса к блоку, это был бы g-round. У меня такого нет.

Префикс l-

Tue, 14 Apr 2009 02:17:34 +0300

Префикс l- (layout) используется для явного выделения блоков, которые используются для раскладки других блоков и ни для чего более. В стилях l-блока должны использоваться только правила для расположения (position, display, margin, padding, width, etc), но не для формления (font, background, border, etc).

Пока открытым остаётся вопрос, как же быть если ячейке раскладочной таблицы надо задать фон. Это какбэ идеологически не верно, но какбэ надо. Неверно, но надо. Неверно. Но надо.

Раскладка таблицами

Раскладку можно делать разными способами (position, float, таблицы). Мы для себя приняли раскладку таблицами, как единственно работающую без оговорок в современных браузерах. Всё, что написано ниже про именование классов применимо к любому способу раскладки, не обязательно использовать табличный.

Любое содержимое

Содержимое раскладочных блоков может быть любым, поэтому раскладочные блоки всегда неискажающие.

Единая схема именования

В ходе нескольких лет разработки мы пришли к следующей схеме именования раскладочных блоков (на примере раскладки страницы, l-page):

В именование этих блоков мы сознательно вносим визуальную информацию: левый (l) / центральный (c) / правый (r).
Промежутки между раскладочными частями называем gap (g).
При раскладке из одного элемента именуем его центральным (l-page__c).
Из двух именуем левым (l-page__l) и правым (l-page__r).
Из трёх левым (l-page__l), центральным (l-page__c) и правым (l-page__r).
Больше трёх даём центральным индексы (l-page__c1, l-page__c2, l-page__c3, etc), левый и правый всегда в единственном числе.
Если нужно получить доступ к ячейке в конкретной строке раскладки, то вводим для строки классы c номером в порядке появления строки сверху вниз
```
<tr class="l-page__1"></tr>
<tr class="l-page__2"></tr>
<tr class="l-page__3"></tr>
```
И в стилях уточняем селектор для искомой ячейки
```
.l-page__1 .l-page__c
{
    padding-bottom: 1em;
}
```

l-page
l-page__1	g l-page__g 2%	l l-page__l 24%	c l-page__c 48%			r l-page__r 24%	g l-page__g 2%
l-page__2	g	l				r	g
l-page__3	g	l	r				g
l-page__4	g	c					g
l-page__5	g	l	c1 l-page__c1 16%	c2 l-page__c2 16%	c3 l-page__c3 16%	r	g

Внутренние обёртки

Иногда требуется внутренняя обёртка, чтобы сделать отступы внутри элемента раскладки и избежать проблемы боксовой модели при указании ширины и отступа. Для этого вкладывается inner-элемент, который именуется по имени ячейки + постфикс -i и уже ему задаётся отступ.

<td class="l-page__l">
    <div class="l-page__l-i"></div>
</td>

.l-page__l
{
    width: 16%;
}

.l-page__l-i
{
    margin-right: 20px;
}

Внутренние отступы

Яндексовая макетная сетка содержит отступы слева и справа по 2% (или 20px, для чего в ячейку добавляем распорку 20px шириной), им мы даём класс .l-page__g.

Внутренние gap-ячейки именуем по той же схеме, что и колонки:

если gap-ячейка находится между левой (.l-page__l) и правой (.l-page__r), то она именуется центральной (.l-page__gc)
если если несколько gap-ячеек находятся между левой (.l-page__l) и правой (.l-page__r), то они именуются .l-page__gc1, .l-page__gc2 и так далее
если gap-ячейка стоит после .l-page__l, то она именуется .l-page__gl
если gap-ячейка стоит перед .l-page__r, то она именуется .l-page__gr

Если в дизайне есть большие отступы слева или справа от центральной колонки, то лучше делать их не через gap, а через обычную layout-ячейку, ибо завтра туда обязательно захотят что-то положить.

gc1

gc2