Руководство по современному Веб-фронтенду

HTML

Семантика

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

Постарайтесь понять назначение используемых вами элементов. Лучше не использовать элемент вообще, чем использовать его неправильно.

Краткость

Старайтесь писать меньше кода — используйте новые семантические элементы. Забудьте ваши старые XHTML привычки.

Общедоступность

Не стоит заниматься этим пунктом в последнюю очередь. Совсем не обязательно быть экспертом по WCAG (Web Content Accessibility Guidelines — Руководство по созданию доступного контента), чтобы улучшить свой сайт, можно начать с малого:

  • Научиться правильно и по назначению использовать свойство alt.
  • Для ссылок и кнопок использовать соответствующие семантические элементы HTML5 (а не зверства вроде <div class=button>).
  • Для передачи информации использовать  не только цвет.
  • Не стоит явно подписывать элементы веб-форм.

Язык

Хоть определение языка и кодировки не является обязательным, рекомендуется определять их и на уровне HTML-документа, даже если они передаются в HTTP-заголовках. Предпочитайте UTF-8 любым другим кодировкам.

Производительность

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

CSS

Точки с запятыми

Несмотря на то, что в CSS точка с запятой является разделительным символом, лучше используйте его как завершающий символ.

Боксовая модель

Такая модель, в идеале, должна быть одинаковой для всего документа. Глобальное объявление { box-sizing: border-box; } приемлемо, но для конкретных элементов страницы не стоит изменять их боксовую систему.

Поведение элементов

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

Кроме того, не  выводите элемент за пределы страницы.

 Позиционирование

В CSS существует множество способов позиционирования элементов, но постарайтесь ограничиться использованием списка свойств с такими значениями (в порядке приоритета):

Селекторы

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

Без необходимости не переопределяйте селекторы.

Спецификация элементов

Не нужно делать селекторы сложными для переопределения. Для этого уменьшите частоту использования спецификатора id и избегайте использования правила !important.

Переопределение

Переопределение стилей усложняет селекторы и отладку верстки. Избегайте его по возможности.

Наследование

Не дублируйте объявления стилей, которые могут быть пронаследованы.

Компактность

Старайтесь писать компактный код — используйте сокращенную форму записи.

Язык

Для ясности предпочитайте осмысленные английские названия.

Префиксы

Удаляйте устаревшие префиксы без зазрения совести. Если же вам необходимо их использовать, то вставляйте их перед именем стандартного свойства.

Анимация

Предпочитайте переходы анимациям. Анимацию стоит применять только для свойств элемента opacity и transform.

Единицы измерения

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

Цвета

Если вам необходима прозрачность, используйте rgba. В любом другом случае — используйте hex формат.

Отрисовка

Не загружайте ресурс, создать который можно средствами CSS.

Обходные приемы

Не используйте их.

JavaScript

Производительность

Предпочитайте правильный, выразительный, читабельный код производительному. В основном не JavaScript будет узким местом производительности вашей системы. Оптимизировать стоит такие моменты как сжатие изображений, перепостроение дерева DOM и доступ из сети. Если и выбирать совет из этого документа, то выбирайте этот.

Не храните состояние

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

Встроенные конструкции языка

Старайтесь как можно больше использовать встроенные методы.

Приведение типов

Если это обоснованно, используйте неявное преобразование типов. В любых других случаях избегайте этого.

Циклы

Не используйте циклы, поскольку они вынуждают вас использовать изменяемые объекты. Используйте методы объявленные в array.prototype.

Если же вы не можете использовать эти методы, либо их использование неприемлемо, используйте рекурсию.

Параметры функций

Не используйте объект arguments. Лучше использовать синтаксис функции с переменным количеством параметров, поскольку:

  1. У параметров есть имя, поэтому можно понять что именно ожидает функция на входе.
  2. Это настоящий массив, поэтому его удобно использовать.

Функция Apply

Забудьте о функции аpply(). Используйте оператор развертки вместо нее.

Функция Bind

Не используйте функцию bind(), существует более идиоматичный подход:

Функции высшего порядка

Используйте вложенные функции только в случае необходимости.

Композиция

Избегайте вложенности при вызове функций. Используйте композицию функций.

Кэширование

Кэшируйте тесты, большие структуры данных, а также результаты выполнения дорогостоящих операций.

Переменные

Используйте const вместо var, там где это возможно:

Условные операторы

Предпочитайте IIFE (вызываемое “по месту” функциональное выражение) конструкциям типа if,else if,if, else и switch выражениям.

Итерирование объектов

Где это возможно, не используйте for..in.

Объекты как пары “ключ/значение”

Обычно лучше использовать объект как пару “ключ/значение”, это решение более мощное, но существуют случаи, когда объекты правильнее использовать как экземпляры класса Object.

Каррирование

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

Читабельность

Не запутывайте ваш код, используя, с виду, “умные” конструкции.

Переиспользование кода

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

Зависимости

Сводите к минимуму зависимость от чужого кода. Не нужно добавлять в проект целую библиотеку ради пары строчек, которые можно написать самому.

Перевод статьи «Frontend Guidelines.»