Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> HTML

Руководство от Google по работе с файлами HTML, CSS и GSS


Довольно часто приходится сталкиваться с так называемыми "стандартами" кодирования, подробно о том что это и за чем, написал статью Google. В ней подробно описано не только как правильно подключать стили или скрипты, но и о том как делать не стоит чтобы не пройти валидацию.

 

Введение

Все мы знаем, что компания Google является мировым гигантом в сфере информации, и очень здорово что она решила поделиться секретами оформления и форматирования документов HTML, CSS и GSS, а так же советами по повышению качества кода, что может облегчить работу и поддержу инфраструктуры и оказать посильную помощь поисковым роботам. Для минификации, компиляции а так же обфускации кода, google рекомендует использовать любые инструменты на ваш выбор, но при условии что общее качество кода будет сохранено.

Общие правила оформления

Протокол
При подключении библиотек со сторонних серверов, в ссылках на графические изображения или медиа-ресурсы такие как видео, файлы скриптов и стилей, не указывайте протокол в случае если они доступны по обоим протоколам (http:, https:). Отсутствие протокола, делает ссылку относительной, что опускает возможность смешивания ресурсов из разных протоколов, а так же незначительно, но всё же уменьшает размер файлов, что не заменимо в условиях использования большого количества подключаемых файлов.

Не рекомендуется:

  <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

Рекомендуется:

  <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

Не рекомендуется:

  .example {
    background: url(http://www.google.com/images/example);
  }

Рекомендуется:

  .example {
    background: url(//www.google.com/images/example);
  }

Общее форматирование

Отступы
Если вам необходимо сделать отступ, используйте два пробела.
Табуляцию следует так же опустить, лучше сделать больше пробелов, я использую четыре.

Рекомендуется:

  <ul>
    <li>Пять
    <li>Погулять
  </ul>

Рекомендуется:

  .example {
    color: blue;
  }

Регистр
Кодировать страницу нужно в нижнем регистре: относится к названиям элементов, названиям атрибутов, значениям атрибутов (кроме текста/CDATA), селекторам, свойствам и их значениям (кроме текста). 

Не рекомендуется: 

  <A HREF="/">Домой</A>

Рекомендуется:

  <img src="google.png" alt="Google">

Пробелы в конце строки
Любые пробелы в конце строки, убирайте, они усложняют использование diff и жизнь поисковым роботам, для них это лишняя работа. 

Не рекомендуется:

  <p>Что?_

Рекомендуется:

  <p>Вот так.

Общие мета правила

Кодировка
Используйте UTF-8 (без BOM). 
Создавая страничку в любом редакторе, удостоверьтесь, что по умолчанию используется кодировка UTF-8 без метки порядка байтов (BOM). Кодировку же на самой страничке HTML вы можете указать с помощью meta тега <meta charset="utf-8">, для CSS файлов, UTF-8 задана по умолчанию. 

(Узнать больше о кодировках, и о том, как их использовать вы можете здесь: наборы символов и кодировки в XHTML, HTML CSS

Комментарии
Комментарии не являются обязательными, но по возможности поясняйте свой код, где это необходимо. Используйте их так, что бы не ввести никого в заблуждение, особенно при работе в команде и в зависимости от сложности проекта, стиль комментирования может различаться для HTML и CSS кода. Комментарий должен описывать следующее: что делает тот или иной кусок кода/скрипта, за что отвечает, входные/выходные параметры.

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

Рекомендуется:

  {# TODO(Ivan Ivanov): Разобраться с центровкой #}
  <center>Тест</center>

Рекомендуется:

  <!-- TODO: Убрать необязательные теги -->
  <ul>
    <li>Огурцы</li>
    <li>Помидоры</li>
  </ul>

Правила оформления HTML
Тип документа
Используйте HTML5 вместо устаревших версий, рекомендуемый HTML синтаксис для всех html-документов <!DOCTYPE html>.  Если вы думаете, выбрать XHTM или HTML, выбирайте второй вариант с типом контента text/html, так как первый вариант application/xhtml+xml частично поддерживается браузерами, и возникают проблемы с возможностью оптимизации.

Валидность HTML
Старайтесь по возможности использовать только валидный HTML, кроме случаев, когда использование не позволяет достичь размера файла, необходимого для нужного уровня производительности. 
Для проверки валидности, используйте инструменты такие как W3C HTML validator, ведь валидность это измеримое качество кода, правильное его написание способствует изучению стандартов и требований, а так же ограничений стандартов и правильному использованию HTML элементов.

Не рекомендуется:

  <title>Проверка</title>
  <article>Просто проверка

Рекомендуется:

  <!DOCTYPE html>
  <meta charset="utf-8">
  <title>Проверка</title>
  <article>Просто проверка.</article>

Семантика
Используйте HTML правильно и по назначению: ссылка <a>, абзац <p> и так далее. Это улучшает восприятие кода, редактирование и поддержку в надлежащем виде.

Не рекомендуется:

  <div onclick="goToRecommendations();">All recommendations</div>

Рекомендуется:

  <a href="recommendations/">All recommendations</a>

Альтернатива для мультимедиа
Всегда указывайте альтернативное содержимое для мультимедиа используя при этом тег alt. Для чего? Некоторые люди при путешествии по интернету отключают отображение картинок для экономии трафика, люди с плохим зрением могут не понять что изображено например на рекламном баннере, кому-то просто сложно понять о чём говорится в аудио или видео. Для этих целей используется тег alt с обязательно содержательными текстом, чтобы в случае чего, человек смог понять то, что вы хотите донести до него в форме мультимедиа: для картинок это осмысленный текст, для аудио или видео это расшифровка текста и подписи если это важно.  

Не рекомендуется:

    <img src="spreadsheet.png">

Рекомендуется:

    <img src="spreadsheet.png" alt="Spreadsheet screenshot.">

Разделение ответственности
Разметка (HTML), стилевое оформление (CSS), программная часть (Скрипты) должны находиться в разных файлах, и интеграция между ними должна быть минимальной.
Раздельное существование вышеописанных структур помогает облегчить понимание и поддержку кода, ведь если свалить всё в кучу в один файл, он будет огромен и даже перемещаться по нему будет затруднительно, найти нужный кусок кода будет ещё сложнее, что приведет к большим временным затратам.
Убедитесь, что документы и шаблоны содержать только HTML, что HTML служит лишь для задания самой структуры документа, а код отвечающий за стилевое оформление, находится в отдельном файле стилей, так же код отвечающий за поведение (скрипты) находится в своём.

Не рекомендуется:

  <!DOCTYPE html>
  <title>HTML sucks</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;">HTML Отстой</h1>
  <p>Я об этом и раньше где-то читал, но теперь точно все ясно:
    <u>HTML - полная фигня!!1</u>
  <center>Не могу поверить, что для того чтобы изменить оформление,
  нужно каждый раз все переделывать заново. </center>

Рекомендуется:

  <!DOCTYPE html>
  <title>My first CSS-only redesign</title>
  <link rel="stylesheet" href="default.css">
  <h1>Мой новый CSS дизайн</h1>
  <p>Я читал об этом и раньше, но наконец-то сделал сам:
    Использую принцип разделения ответственности и не пихаю оформление в HTML
  <p>Как круто!

Ссылки-мнемоники
Не используйте ссылки-мнемоники. Нет никакого смысла писать нечто подобное &mdash;, &rdquo;, или &#x263a;, когда все коды по умолчанию используют кодировку (UTF-8). Есть и исключение из этого правила для служебных символов, как например «<» или «&», или же «невидимые» символы как например неразрывный пробел &nbsp;

Не рекомендуется:

  Валютный знак евро: &ldquo;&eur;&rdquo;.

Рекомендуется:

  Валютный знак евро: “€”.

Необязательные теги
Использование закрывающих (необязательных) символов не обязательно. Пригодиться это может для уменьшения размера файлов и лучшей читаемости (от автора: например я по привычке теги закрываю, это помогает мне увидеть начало и конец контента помещенного в элемент синтаксиса HTML) можно опускать необязательные теги, в спецификации HTML5 указаны такие теги.
(Может потребоваться некоторое время для того, чтобы этот подход начал использоваться повсеместно, потому что это сильно отличается от того, чему обычно учат веб-разработчиков. С точки зрения, согласованности, и простоты кода лучше всего опускать все необязательные теги, а не некоторые из них).

Не рекомендуется:

  <!DOCTYPE html>
  <html>
    <head>
      <title>Тратим байты - тратим деньги.</title>
    </head>
    <body>
      <p>Вот.</p>
    </body>
  </html>

Рекомендуется:

  <!DOCTYPE html>
  <title>Байты-деньги!</title>
  <p>Так-то

Атрибут 'type'
Не указывайте атрибут type при подключении стилей и скриптов в документ, потому что HTML5 использует text/css и text/javascript по умолчанию. Причём это будет работать даже в старых браузерах. 

Не рекомендуется:

  <link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">

Рекомендуется:

  <link rel="stylesheet" href="//www.google.com/css/maia.css">

Не рекомендуется:

  <script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>

Рекомендуется:

  <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

Правила форматирования HTML
Для каждого нового табличного, списочного или блочного элемента, вставляйте новую строчку, а для каждого дочернего элемента или вложенного, отступы, чем больше вложенность дочерних/вложенных элементов, тем больше отступов рекомендуется делать.

Рекомендуется:

  <blockquote>
    <p><em>Space</em>, the final frontier.</p>
  </blockquote>

Рекомендуется:

  <ul>
    <li>Маша
    <li>Глаша
    <li>Чебураша
  </ul>

Рекомендуется:

  <table>
    <thead>
      <tr>
        <th scope="col">Прибыль
        <th scope="col">Налоги
    <tbody>
      <tr>
        <td>$ 5.00
        <td>$ 4.50
  </table>

Правила оформления CSS
Старайтесь использовать валидный CSS код, кроме тех случаев когда вам нужно зависимый от какого-то браузера код или ошибок валидатора. Для проверки на валидность, используйте W3C CSS Валидатор.
Валидность – это измеряемое качество кода, при этом важное. Правильно написание валидного CSS кода, помогает избавиться от избыточного кода и обеспечивает правильное использование каскадных таблиц стилей.

Идентификаторы и названия классов
Используйте шаблонные или имеющие смысл имена классов и идентификаторы. 
Называйте идентификаторы и классы осознанными именами отражающими сущность класса, или шаблонными, вам будет понятно для чего он, когда вы продолжите работать с кодом через какое-то время, или если  передадите другому человеку, это избавит вас от временных затрат на переименование, а так же на вспоминание откуда этот кусок кода, и поиском его на странице.
Шаблонные имена — простой вариант именования элементов, которые не имеют специальных функций или которые ничем не отличаются от тех которые находятся рядом в большом количестве.

Не рекомендуется:

  /* Не рекомендуется: не имеет смысла */
  #yee-1901 {}
  
  /* Не рекомендуется: описание внешнего вида */
  .button-green {}
  .clear {}

Рекомендуется:

  /* Рекомендуется: точно и по делу */
  #gallery {}
  #login {}
  .video {}
  
  /* Рекомендуется: шаблонное имя */
  .aux {}
  .alt {}

Названия идентификаторов и классов
Используйте настолько длинные имена, насколько это нужно, но настолько короткие, на сколько возможно. Попробуйте сформулировать в чём именно заключается работа данного элемента, при это старайтесь быть кратки . Такое именование играет большую роль в облегчение понимания и повышением эффективности кода.

Не рекомендуется:

  /* Не рекомендуется */
  #navigation {}
  .atr {}

Рекомендуется:

  /* Рекомендуется */
  #nav {}
  .author {}

Селекторы типа
Старайтесь не использовать имена классов и идентификаторов с селекторами вроде элемента, кроме случаев, когда это необходимо (например с классами помощниками).
Не используйте названия элементов с именами классов и идентификаторами, это повышает производительность.

Не рекомендуется:

  /* Не рекомендуется */
  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;

0 и единицы измерения
В случае если ваше свойство имеет нулевое значение, единицы измерения указывать не нужно

Рекомендуется:

  margin: 0;
  padding: 0;

0 в целой части дроби
В случае если ваше свойство имеет дробное значение, как например 0,8 – ноль при этом писать не нужно

Рекомендуется:

  font-size: .8em;

Кавычки в ссылках

Не стоит использовать кавычки ("", '') с url(). 

Рекомендуется:

  @import url(//www.google.com/css/go.css);

Шестнадцатеричные названия цветов
Старайтесь использовать трехсимвольную шестнадцатеричную запись цвета где это возможно, она проще и занимает меньше места.

Не рекомендуется:

  /* Не рекомендуется */
  color: #eebbcc;

Рекомендуется:

  /* Рекомендуется */
  color: #ebc;

Префиксы
Не обязательным советом является использование уникальных префиксов в стилях. Это облегчит обслуживание сайта, а так же работу над проектом в большом коллективе. Используйте короткие уникальные названия с последующим дефисом. 
Использование пространств имен позволяет предотвратить конфликты имен и может облегчить обслуживание сайта. Например при поиске и замене. 

Рекомендуется:

  .adw-help {} /* AdWords */
  #maia-note {} /* Maia */

Разделители в классах и идентификаторах
Чтобы повысить удобство чтения и легкость понимания кода, разделяйте слова в идентификаторах и именах классов с помощью дефиса. Не используйте ничего, кроме дефиса, для соединения слов и сокращений в селекторах, чтобы повысить удобство чтения и легкость понимания кода. 

Не рекомендуется:

  /* Не рекомендуется: слова “demo” и “image” не разделены */
  .demoimage {}
  
  /* Не рекомендуется: используется подчеркивание вместо дефиса */
  .error_status {}

Рекомендуется:

  /* Рекомендуется */
  #video-id {}
  .ads-sample {}

Хаки
Старайтесь не использовать различные «хаки» которые помогают бороться с различиями в работе разных браузеров с помощью CSS-фильтров, или прочих обходных путей, избегайте использования информации о версии браузеров.
Все эти подходы могут быть рассмотрены лишь в качестве последнего средства, если вы хотите получить эффективную и легко поддерживаемую кодовую базу. Проще говоря, допущение хаков и определения браузера повредит проекту в долгосрочной перспективе, так как это означает, что проект идет по пути наименьшего сопротивления. Что облегчает использование хаков и позволяет использовать их все чаще и чаще, что в результате приведет к слишком частому их использованию. 

Правила форматирования CSS
Чтобы получить согласованные код, с которым легко работать, пишите стили CSS в алфавитном порядке. При упорядочивании игнорируйте браузерные префиксы, при этом если используются несколько  прифексов, они так же должны быть сортированы (например -moz должен быть перед --webkit) .

Рекомендуется:

  background: fuchsia;
  border: 1px solid;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: black;
  text-align: center;
  text-indent: 2em;

Отступы в блоках.
Для любого из блочных элементов всегда проставляйте отступы, например для правил внутри правил или объявлений, чтобы отобразить иерархию и облегчить понимание кода. 

Рекомендуется:

  @media screen, projection {
  
    html {
      background: #fff;
      color: #444;
    }
  
  }

После объявлений
После каждого написанного стиля со значением, ставьте обязательно точку с запятой. Это делается для согласованности кода, а так же для более быстрого добавления новых свойств.

Не рекомендуется:

  .test {
    display: block;
    height: 100px
  }

Рекомендуется:

  .test {
    display: block;
    height: 100px;
  }

После названий свойств
Всегда используйте один пробел после двоеточия (но не до) в объявлениях, для порядка в коде. 

Не рекомендуется:

  h3 {
    font-weight:bold;
  }

Рекомендуется:

  h3 {
    font-weight: bold;
  }

Отделение селектора и объявления
Рекомендуется отделять каждый новый селектор или объявления переносом строки.

Не рекомендуется:

  a:focus, a:active {
    position: relative; top: 1px;
  }

Рекомендуется:

  h1,
  h2,
  h3 {
    font-weight: normal;
    line-height: 1.2;
  }

Разделение правил
Каждое новое правило начинайте с новой строки.

Рекомендуется:

  html {
    background: #fff;
  }
  
  body {
    margin: auto;
    width: 50%;
  }

Мета правила CSS
По возможности объединяйте правила в логические группы, обозначайте их комментариями и разделяйте переносом строки. 

Рекомендуется:

  /* Header */
  
  #adw-header {}
  
  /* Footer */
  
  #adw-footer {}
  
  /* Gallery */
  
  .adw-gallery {}

Заключение
Идея этого руководства заключается в том, что бы помочь вам выработать свой собственный стиль кодирования, который не отличался бы от общепринятого и был понятным не только вам. Мы предлагаем единые правила оформления позволяющие писать код в одном стиле, но стиль кода, уже используемый в проекте, также важен. 
Если вы редактируете уже написанный, чей-то код, то старайтесь повторять стиль его оформления, например, если комментарии окружены скобочками или черточками, сделайте то же со своими комментариями. 
Если ваш код будет сильно отличаться от существующего, это может сбить читающего с ритма и затруднить чтение. Постарайтесь этого избежать.


Дата публикации: 20.01.2013
Опубликовал: Сергей Кашурин
Просмотров: 522
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.
25 поразительных анимаций CSS3, которые улучшат внешний вид вашего сайта
CSS3, сокращение от английского Cascading Style Sheets 3, третье поколение таблиц стилей, которые используются для визуального представления сайта, при минимальном размере кода. Этот последний многообещающий набор стандартов, состоит из большого числа функций и инструментов, которые позволяют улучшить и контролировать дизайн и увеличивать скорость загрузки сайта.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
автобус киев севастополь 2017
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
Мастер Кит NL02 недорого.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
разработка сайтов тверь
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: