Стандарты оформления кода
Правила написания кода, которых я придерживаюсь.
Оформление HTML
Придерживаться стандарта HTML5 и использовать кодировку UTF-8 без BOM. Для CSS такая кодировка устанавливается по-умолчанию.
<!DOCTYPE html> и <meta charset="utf-8">- Отступы - в файлах используется только двойной пробел. Не используется табуляция.
- Регистр - нужно стараться приводить все к нижнему регистру. Это касается и имен файлов, в том числе изображений.
- Пути файлов - указывать относительные пути файлов. Если файл загружается со стороннего сервера, то опускать протокол http: или https:
Например:
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
Аналогично в css:@import url(//fonts.googleapis.com/css?family=Sunflower:300); - Подключение шрифтов - лучше добавить подключение шрифтов через тег <link ...> в секции <headl>. Это снижает вероятность ошибки при использовании CSS минификации. Некоторые Gulp плагины, например, gulp-group-css-media-queries, могут неправильно обрабатывать ссылки в импортах, принимая точку с запятой за окончание правила.
Стили подключаются в теге <head>, скрипты перед закрывающимся тегом </body>. Атрибут type не указывается для CSS и JS. Инлайн стили можно оставить только в том случае, если они изменяются js-скриптами в процессе взаимодействия с сайтом. Но желательно заменить инлайн стили на атомарные классы, например "font-weight-bold" или "text-center"
Особенности HTML5
Теги <html>, <head>, <body> могут быть пропущены, если непосредственно до/после не нужно написать комментарий.
Тег <li> можно не закрывать, если за ним сразу следует другой тег <li> или закрывающийся тег списка </ol> или </ul>.
Подготовка изображений
У изображений, заданных через тег img всегда присутствует alt. Если изображение используется в декоративных целях атрибут оставляют пустым, но он все равно должен присутствовать в теге.
Для Логотипа компании в alt нужно прописывать название компании без слов "логотип", "Logo" и пр., так как это может быть использовано поисковым роботом для формирования сниппетов.
Указывать размеры изображения там, где это возможно. Для небольших проектов, где не используется определение плотности пикселей экрана, изображения необходимо готовить в размер, с плотностью пикселей 144dpi и указывать фактический размер в атрибутах тега. Например: <img src="photo.png" alt="Описание" width="360" height="240">. Фактически такое изображение будет иметь размер 720х480 px и будут хорошо смотреться на HiRES экранах и Retina.
Оформление CSS
- В именах классов использовать дефис или camelCase для разделения названий.
- Избегать тегов в CSS-коде
- Использовать сокращенные записи
- Не указывать единицы измерения для нулевых значений
- Не использовать кавычки в url:
@import url(//www.google.com/css/go.css); - Ставить точку с запятой даже если в блоке одно свойство
.test { display: block; } - Использовать пробел после двоеточия
CSS-код на продакшн загружается объединенным в один файл и минифицированным.