в
19:28
Руководство по стилям оформления 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>Руководство по стилям оформления.
- Используйте кодировку UTF-8 (без BOM). Для указания кодировки используйте:
<meta charset="utf-8">.
- Давайте пояснения к коду в комментариях, где только возможно.
- Указывайте в комментариях то, что нужно сделать (исправить) в будущем (TODO).
- Используйте синтаксис 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. Единственным исключением является символы со специальным значением, вроде левого уголка (<), амперсанта (&), пробела ( ) и т.п.
<!-- не рекомендуется -->
Символ для обозначения евро “&eur;”.<!-- рекомендуется -->
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-документе.
- Позаботьтесь о том, чтобы ваш 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-свойства в алфавитном порядке, игнорируя префиксы производителей.
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-правил комментариями.
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}
2 комментария:
Отправить комментарий