Руководство по правильному форматированию html/css кода от Google

Пятница, 04 мая 2012 14:36

Google — замечательная компания. Несмотря на то, что это монополия, но это редкостная монополия, которая действительно думает о своих пользователях и участниках рынка, который она создала.

На днях я познакомился с полезнейшим для всех вебмастеров и оптимизаторов руководством по правильному форматированию html/css кода. В него вошли рекомендации специалистов Google о том, как в коде стоит оформлять все популярные элементы разметки веб-страницы, какие атрибуты использовать обязательно, а какие лучше опускать, как правильно оформлять правила в файлах стилей (.css), каких концепций стоит придерживаться при работе с кодом в общем, и многие другие.

Руководство состоит из следующих разделов:

  • Общие правила стиля
    • Протокол
  • Общие правила форматирования
    • Отступы
    • Капитализация
    • Лишние пробелы
  • Общие правила для мета-содержимого
    • Кодировка
    • Комментарии
    • Комментирование запланированных действий
  • Правила оформления HTML кода
    • Тип документа (doctype)
    • Валидность HTML
    • Семантика
    • Оформление мультимедиа-содержимого
    • Разделение различных типов содержимого друг от друга
    • Символьные сущности HTML
    • Необязательные теги
    • Атрибуты «type»
  • Правила форматирования HTML
    • Общее форматирование
  • Правила оформления CSS
    • Валидность CSS
    • Назначение имен для ID и классов
    • Стиль именования ID и классов
    • Селекторы типа
    • Сокращенные свойства
    • 0 и единицы измерения
    • 0 в начале чисел
    • Кавычки в URI
    • Шестнадцатеричное представление значений
    • Префиксы
    • Использование разделителей в ID и именах классов
    • Хаки
  • Правила форматирования CSS
    • Порядок декларации свойств
    • Отступы при блочном оформлении содержимого
    • Конец декларации
    • Конец имени свойства
    • Разделение селектора и декларации
    • Разделение правил
  • Правила для мета-содержимого в CSS
    • Раздел комментариев

Мне как html-кодеру и SEO-оптимизатору по совместительству было крайне интересно почитать данное руководство. К моему большому удивлению я открыл для себя много нового. В частности я не представлял, что:

  • для форматирования кода рекомендуется использовать два пробела вместо  давно привычной табуляции (большинство редакторов, кстати, поддерживают автозамену табуляции на любое число пробелов). Признаться честно, даже с учетом моего многолетнего опыта я сразу потерялся от этой рекомендации :) . Затем чуть погуглил, и оказалось, что на Хабре, как обычно, развели целый холивар на эту тему, а сама проблема с использованием табов заключается в том, что в различных редакторах табы, имея различный по умолчанию размер, не одинакого отображают форматирование кода, в то время как повсеместное использование пробелов — единственный способ добавиться одинаковости представления кода вне зависимости от ситуации. На самом же деле проблема оказалась надуманно, и там же на Хабре её и разрулили в сторону использования таки табуляции для indentation и пробелов для alignment. В общем, кому интересно: http://habrahabr.ru/post/118208/;
  • в адресах картинок и других подключаемых к странице файлов рекомендуется вообще не указывать протокол (http/https), если только это не случай, когда важные файлы доступны только по одному из них (либо по http, либо по https);
  • если на сайте повсеместно используется UTF-8 (сам текстовый редактор, файлы сайта и БД), то нет смысла использовать HTML сущности (—, – и т.п.), а можно сразу копировать и вставлять реальное представление вроде “€”, если только это не касается специфических случаев, как например оформление тегов (<, >) и аналогичных;
  • Google уже рекомендует использовать чисто HTML5 вместо такого привычного xHTML, т.к. второй не поддерживает инфраструктуру документа (вспоминаем теги articles, aside и аналогичные из HTML5) и, соответственно, дает нам меньше простора для оптимизации наших страниц.
  • в HTML5 многие теги (даже такие важные как html, body, head) могут быть опущены, и Google рекомендует пользоваться этим при желании;

Честно говоря, многие из рекомендаций, приведенных в руководстве, идут в разрез с идеологией сжатия кода и передачи клиенту документа как можно меньшего размера. Так, например, для сжатия размера css-файла большинство автоматических инструментов вроде того же CleanCSS.com предложат нам удалить «лишние» пробелы, где это возможно, удалить точку с запятой «;» для последнего свойства селектора и проделать другие аналогичные действия, которые реально позволяют сжать размер файла за счет допустимых потерь читабельности. Google в своем руководстве как бы советует этого не делать, но в то же время сообщает, что уменьшение времени загрузки страницы положительно сказывается на пользовательском опыте :) . Вот такие вот противоречия.

Поэтому всегда пользуйтесь советами с умом и помните, что у всего есть свой контекст.

http://blogto4ka.ru

RSS комментариев

8 комментариев Комментировать

  1. wlad2 пишет:

    04 мая 2012 в 23:39 Reply to this comment

    1

    занятное чтиво... про пробелы прихавал

  2. Вячеслав пишет:

    06 мая 2012 в 10:36 Reply to this comment

    2

    Кстати, по поводу рекомендаций Google. Вы не подскажите, что значит:

    «Примите обоснованные меры, чтобы не допустить влияния рекламы на рейтинг вашего сайта в поисковых системах. Например, объявления Google AdSense и ссылки DoubleClick следует исключить из сканирования, указав их в файле robots.txt»?

    Как исключить из сканирования объявления Google AdSense через robots.txt?

  3. nikolas_ sharp пишет:

    07 мая 2012 в 13:31 Reply to this comment

    3

    @Вячеслав, насколько знаю, исключить через robots.txt можно только страницы целиком. Возможно есть неточности с переводом. Было бы проще разобраться, дай вы ссылку на приведенный кусок из рекомендаций.

  4. Вячеслав пишет:

    07 мая 2012 в 14:51 Reply to this comment

    4

    @nikolas_ sharp: Да запросто. :)

    _http://support.google.com/webmasters/bin/answer.py?hl=ru&answer=35769#2 (пятый пункт)

  5. nikolas_ sharp пишет:

    07 мая 2012 в 14:57 Reply to this comment

    5

    @Вячеслав, ссылка не пашет.

  6. Вячеслав пишет:

    07 мая 2012 в 17:03 Reply to this comment

    6

    @nikolas_ sharp: Странно, у меня все работает. Давайте попробуем так:

    _http://www.google.com/appserve/mkt/lFJQVG1LHWDNyQ

    раздел «Технические рекомендации».

  7. nikolas_ sharp пишет:

    07 мая 2012 в 19:33 Reply to this comment

    7

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

    Речь идет на самом деле о точности статистики сайта. В частности о случае, если, например, сайт какой-либо компании имеет страницы, участие в общей конверсии которых настолько мало, что был смысл разместить на них Google Adsense или аналогичную партнерку DoubleClick.com. При этом нам все еще важна точность статистики по этому сайту (показатель отказов, среднее время и т.п.), и мы не хотим, чтобы в ней учитывались посетители, попадающие на вышеуказанные страницы и уходящие с них по ссылкам Adsense или DoubleClick, и поэтому исключаем их из поиска, таким образом «не допуская влияния рекламы на рейтинг нашего сайта в поисковых системах».

    Предположение конечно двоякое, но это единственное, что я смог придумать по этому поводу... Возможно у них в руководстве просто неверная формулировка. Думаю, резонно было бы обратиться за разъяснением в их поддержку. Если обратитесь — отпишите и здесь, пожалуйста. Мне бы и самому было очень интересно понять, что же имеется в виду :) .

  8. Вячеслав пишет:

    07 мая 2012 в 22:26 Reply to this comment

    8

    @nikolas_ sharp: Пришлось покопаться в интернете. В общем, насколько я понял, этот вопрос возник не сегодня (хотя раньше я этого не замечал) и, по мнению большинства — это некорректный перевод и речь там должна идти об их собственном файле robots.txt. Поэтому советуют просто забыть об этом.

    В общем, как всегда, нет слов, одни выражения. :)

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