EN
Виталя Харисов
Виталя Харисов
13 апреля 2009
Read-only

Префикс 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;
    }
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
glrg
l-page__3
glrg
l-page__4
gcg
l-page__5
glc1
l-page__c1
16%
c2
l-page__c2
16%
c3
l-page__c3
16%
rg

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

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

glgcrg
glglcgrrg
glglc1gcc2grrg
glglc1gc1c2gc2c3grrg
#alexeyten
14 апреля 2009
Когда пишешь такие тексты, смайлики надо отключать :) А то вместо (l) получилось
#veged
14 апреля 2009
всё что не помещается в выразительность классов нужно определять другими классами -- отсюда следует, что задание фона таблицы и прочего нужно делать через дополнительный класс (полноценный или модификатор)
#sairi-na-tenshi
15 апреля 2009
а почему подчёркивание двойное? о_0
#petrouv
11 мая 2009
Мне кажется, что holster — это частный случай layout.
#belyan
23 сентября 2011

Не слишком удачная схема именования колонок на мой взгляд.

Логика соблюдается лишь в простых вариантах. В более сложных проследить логику уже сложно.

Почему центральная колонка вдруг получает номера c1, c2, c3, а не cl, cc, cr, что было бы логичным продолжением концепции?

Почему крайний левый и крайний правый отступ называются просто g, а не gl и gr?

Что будет, если между c2 и с3 отступ будет не нужен, gc1 нужно тогда переименовать в просто gc?

Есть более простые и логичные схемы.

Например, колонки называть по буквам алфавита слева направо (a, b, c ,,,), или по номерам (c1, c2, c3 ...).

Отступы между колонками по названию соседних колонок, например: b-c или 2_3 - отступ между 2 и 3 колонкой.

В принципе и твой вариант можно доработать до более правильного. Но слишком он трудночитаемый.

| gl | l | glr | r | gr |

| gl | l | glc | c | gcr | r |

| gl | l | glcl | cl | gclcr | cr | gcrr | r | gr |

| gl | l | glcl | cl | gclcc | cc | gcccr | cr | gcrr | r | gr |