Руководство по стилям оформления HTML и CSS от Google


Я всегда был за стандартизацию. Широкий выбор это конечно хорошо, но проблема совместимости оставляет желать лучшего. В результате нам приходится как-то подстраиваться, чтобы работало если и не везде, то в большинстве случаев. Вот почему руководство по стилям оформления HTML и CSS от Google привлекло моё внимание. В нём содержатся стандарты, которых придерживаются разработчики и программисты компании. Давайте хоть вкратце пройдёмся по этому руководству.

Общие правила стиля.
  • Не указывайте в URL адресах используемый протокол: http, https и т.п.
    <!-- не рекомендуется -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <!-- рекомендуется -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Общие правила форматирования.
  • Не используйте табуляцию и не совмещайте её с пробелами для отступов в коде.
  • Для имён элементов (названия тегов), атрибутов, значений атрибутов (за исключением CDATA текста) лучше использовать нижний регистр.
    <!-- не рекомендуется -->
    <IMG SRC="wmascar.png" ALT="Параллельный перенос" />
    <!-- рекомендуется -->
    <img src="wmascar.png" alt="Параллельный перенос" />
  • Не оставляйте лишних пробелов в конце строки.
    <!-- не рекомендуется -->
    <p>Руководство по стилям оформления.█
    <!-- рекомендуется -->
    <p>Руководство по стилям оформления.
Общие правила использования META-тегов.
  • Используйте кодировку UTF-8 (без BOM). Для указания кодировки используйте: <meta charset="utf-8">.
  • Давайте пояснения к коду в комментариях, где только возможно.
  • Указывайте в комментариях то, что нужно сделать (исправить) в будущем (TODO).
HTML правила стиля.
  • Используйте синтаксис HTML5. Для указания доктайпа используйте: <!DOCTYPE html>.
  • Позаботьтесь, чтобы ваш HTML-код был валидным. Используйте для этого W3C HTML validate.
  • Используйте HTML в соответствии с его назначением. Например, не стоит делать из DIV'а ссылку и т.п.
    <!-- не рекомендуется -->
    <div onclick="goToComments();">Comments<div>
    <!-- рекомендуется -->
    <a href="comments/">Comments<div>
  • Обеспечьте альтернативный контент для мультимедиа элементов. Например, для картинки укажите значение атрибута alt.
  • Отделите содержание от оформления. Шаблон должен содержать только HTML, обозначающих структуру элементов. Уберите пользовательские style атрибуты, код скриптов и т.д.
    <!-- не рекомендуется -->
    <!DOCTYPE html>
    <title>Неправильно</title>
    <link rel="stylesheet" href="base.css" media="screen">
    <link rel="stylesheet" href="grid.css" media="screen">
    <link rel="stylesheet" href="print.css" media="print">
    <h1 style="font-size: 1em;">Заголовк с пользовательским стилем</h1>
    <p>Текст <u>содержит разметку</u>
    <center>и позиционирование</center>
    <!-- рекомендуется -->
    <!DOCTYPE html>
    <title>Парвильно</title>
    <link rel="stylesheet" href="default.css">
    <h1>Заголовок</h1>
    <p>Параграф.
    <p>Ещё один параграф.
  • Не используйте мнемоники и коды символов в HTML. Единственным исключением является символы со специальным значением, вроде левого уголка (&lt;), амперсанта (&amp;), пробела (&nbsp;) и т.п.
    <!-- не рекомендуется -->
    Символ для обозначения евро &ldquo;&eur;&rdquo;.
    <!-- рекомендуется -->
    The currency symbol for the Euro is "€".
  • Уберите из HTML-кода необязательные теги. Благо HTML5 определяет, какие из тегов обязательны, а какие нет.
    <!-- не рекомендуется -->
    <!DOCTYPE html>
    <html>
      <head>
        <title>Spending money, spending bytes</title>
      </head>
      <body>
        <p>Sic.</p>
      </body>
    </html>
    <!-- рекомендуется -->
    <!DOCTYPE html>
    <title>Saving money, saving bytes</title>
    <p>Qed.
  • Не используйте атрибут type для подключения таблиц стилей и скриптов.
HTML правила форматирования.
  • Используйте пустую строку для отделения блоков, списков или таблиц друг от друга.
  • Используйте пробелы для отображения иерархии элементов в HTML-документе.
CSS правила стиля.
  • Позаботьтесь о том, чтобы ваш CSS был валидным. Используйте для этого W3C CSS validator.
  • Используйте значимые или обобщённые ID или class имена.
    /* не рекомендуется */
    #year-1901 {}
    .button-green {}
    /* рекомендуется */
    #gallery {}
    .video {}
  • Используйте максимально короткие ID и class имена, но не в ущерб информативности.
  • Избегайте совмещения элементов с ID и class именами.
    /* не рекомендуется */
    ul#example {}
    div.error {}
    /* рекомендуется */
    #example {}
    .error {}
  • Используйте сокращённые CSS-свойства, где это только возможно.
    /* не рекомендуется */
    border-top-style: none;
    font-family: palatino, georgia, serif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
    /* рекомендуется */
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;
  • Не указывайте единицы измерения для нулевого значения.
    margin: 0;
  • Не указывайте ведущих ноль в дробных значениях.
    font-size: .8em;
  • Не используйте кавычки для URL-значения.
    @import url(//www.google.com/css/go.css);
  • Используйте трёхзначное HEX значение цветов, где только возможно.
    /* не рекомендуется */
    color: $eebbcc;
    /* рекомендуется */
    color: #ebc;
  • Используйте префиксы в селекторах для более чёткого определения их предназначения.
    .adw-help {}
    #media-note {}
  • Разделяйте слова в ID или class именах символом минус (-).
    /* не рекомендуется */
    .demoimage {}
    .error_status {}
    /* рекомендуется */
    .demo-image {}
    .error-status {}
  • Избегайте необходимости использовать CSS-хаки для кросбраузерности.
CSS правила форматирования.
  • Сортируйте CSS-свойства в алфавитном порядке, игнорируя префиксы производителей.
    background: fuchsia;
    border: 1px solid;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: black;
    text-align: center;
    text-indent: 2em;
  • Используйте пустую строку для отделения блоков друг от друга.
  • Используйте пробелы для отображения иерархии элементов в CSS.
  • Используйте точку c запятой (;) в конце описания всех CSS-свойств.
    /* не рекомендуется */
    .test {
      display: block;
      hreight: 100px
    }
    /* рекомендуется */
    .test {
      display: block;
      hreight: 100px;
    }
  • Всегда используйте пробел перед значением свойства.
    /* не рекомендуется */
    display:block;
    /* рекомендуется */
    display: block;
  • Разделяйте перечисляемые селекторы переносом строки.
    /* не рекомендуется */
    h1, h2, h3 {}
    /* рекомендуется */
    h1,
    h2,
    h3 {}
  • Разделяйте CSS-правила пустой строкой.
    h1 {}

    h3 {}
Привила CSS комментирования.
  • Разделяйте группы CSS-правил комментариями.
    /* Header */

    #adw-header {}

    /* Footer */

    #adw-footer {}

    /* Gallery */

    .adw-gallery {}
Понятно, что всё это лишь рекомендации. Даже разработчики и программисты Google лишь придерживаются их, но далеко не всегда используют. Наглядным примером тому могут служить шаблоны на Blogger.com и других сервисах Google. Более того, я бы несколько расширил эти правила, упомянув увлечение структурированием, которые приводит к появлению такого числа мусора, что просто нет слов. В общем, есть у меня как претензии к этому руководству, так и восхищение попыткой внести хоть какой-то порядок в этот хаос.

Twitter Facebook ВКонтакте Одноклассники Google+

2 комментария:

Александр Кувшинников
Кость, а ты в url пишешь http? Или сразу начинаешь, как рекомендуют, с двойного слэша?
Константин Кирилюк
2Александр Кувшинников всё зависит от источника. Имхо лучше указывать http, зачем-то же он нужен... Однако, если у сайта есть еще и HTTPs, тогда лучше дать браузеру разбираться по какому протоколу обращаться.
Отправить комментарий