Большинство, конечно, не заметили, что под капотом страницы с результатами поиска уже несколько месяцев новая верстка.
Что же нового
Благодаря концепции независимых блоков, поддержка и разработка страницы с результатами поиска стали проще. Те, кто был на наших субботниках, посвященных верстке, или смотрел записи (1, 2), слушал наши доклады на других конференциях — знают, насколько это удобно.
Мы пошли дальше, развивая эту идею до концепции Абсолютно Независимых Блоков, что позволяет писать очень эффективный с точки зрения производительности CSS. Один элемент — одно правило.
Тут лирико-техническое отступление: дело в том, что браузеры читают CSS-правила справа-налево. Например, если у вас написано правило .b-my-block .title a {color: #f00;}, то браузер сначала выберет все элементы <a> на странице, потом выберет все <a>, у которых есть элемент-предок с классом title, потом только те <a>, у которых элемент-предок с классом title, у которого есть элемент-предок с классом b-my-block.
Поэтому мы приняли решение, и вся новая верстка в Яндексе делается с АНБ. Правило выше должно быть записано как: .b-my-block__title__a. Двойное подчеркивание — признак того, что это элемент блока. Подробнее в клубе Блок, Элемент, Модификатор.
Конечно, это раздувает HTML: теперь у всех элементов, у которых есть CSS-свойства, появляются классы, и чем глубже находится элемент, тем длиннее у него класс.
Однако если вы уже посмотрели код страницы, то заметили, что никаких длинных классов нет: мы сокращаем все уникальные длинные имена классов до буквенных сокращений вида <div class="ac">. Такая замена происходит на всех уровнях: статическая верстка, стили, шаблоны и скрипты.
Делаем мы это с помощью маленькой утилиты jeanny, специально написанной верстальщиком поиска.
При изменении или добавлении элементов на странице существующая таблица замен сохраняется. Таким образом, закешированные стили не затрагиваются.
Отдельно про стили. Мы разделили весь CSS на ядро, которое подключается внешним файлом и кешируется, и опциональные элементы: различные колдунщики, спецсниппеты. Стили таких элементов подключаются inline в HTML-код страницы.
В результате
- мы получили удобную в поддержке верстку, уменьшили в два раза размер CSS (было 22Кб, стало 12Кб),
- уменьшили время отрисовки страницы, особенно это заметно в IE6/7, где скорость увеличилась более чем на 100%.
Впереди много планов и экспериментов. Следите за новостями.
<verstka/>