Изучал на досуге верстку Gmail, и хочу поделиться с вами некоторыми наблюдениями.
1. Названия классов
Первое, что бросается в глаза, это нечеловеческие названия классов у элементов, например, xN0XZb
или z1IiMc
. Думаю, при выкладке в продакшн по названиям классов проходится обфускатор и скукоживает их до минимальной длины обеспечивающей уникальность.
2. Несемантическая верстка
Например, список папок сделан не ul>li
, а дивчиками (адепты семантической верстки содрогнулись от ужаса). Однако, учитывая что все генерится яваскриптом, не вижу в этом большой проблемы.
3. Спрайт с фоном
Картинка со всеми иконками содержит фиолетово-голубой паттерн-бэкграунд.
Очевидно, сделано это для того, чтобы сразу заметить съехавшее на пиксел позиционирование иконки. Такая самотестирующаяся верстка получается. Круто, но я бы не решился отдавать в продакшн такую картинку. Мало ли что :)
4. Скругленные уголки
Думаю, в какой-то момент (вероятно, когда делали Themes) чуваки заманались вырезать эти уголки и сделали сервис, который генерит картинки на лету.
http://mail.google.com/mail/rc?a=af&c=c3d9ff&w=4&h=4
http://mail.google.com/mail/rc?a=af&c=black&w=32&h=16
Параметры: c — цвет в RGB или словом, w — ширина (от 1 до 64), h — высота (от 1 до 64). Что означает параметр a=af я не осилил.
Smart folks, those Google people :)