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

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

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

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

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

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

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

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

1. В именование этих блоков мы сознательно вносим визуальную информацию: левый  / центральный (c) / правый (r).
2. Промежутки между раскладочными частями называем gap (g).
3. При раскладке из одного элемента именуем его центральным (l-page__c).
4. Из двух именуем левым (l-page__l) и правым (l-page__r).
5. Из трёх левым (l-page__l), центральным (l-page__c) и правым (l-page__r).
6. Больше трёх даём центральным индексы (l-page__c1, l-page__c2, l-page__c3, etc), левый и правый всегда в единственном числе.
7. Если нужно получить доступ к ячейке в конкретной строке раскладки, то вводим для строки классы 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;
   }

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

Иногда требуется внутренняя обёртка, чтобы сделать отступы внутри элемента раскладки и избежать проблемы боксовой модели при указании ширины и отступа. Для этого вкладывается 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-ячейку, ибо завтра туда обязательно захотят что-то положить.