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

HTML

Семантика

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

<!-- плохой стиль -->
<div id="main">
  <div class="article">
    <div class="header">
      <h1>Blog post</h1>
      <p>Published: <span>21st Feb, 2015</span></p>
    </div>
    <p>…</p>
  </div>
</div>

<!-- хороший стиль -->
<main>
  <article>
    <header>
      <h1>Blog post</h1>
      <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
    </header>
    <p>…</p>
  </article>
</main>

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

<!-- плохой стиль -->
<h1>
  <figure>
    <img alt=Company src=logo.png>
  </figure>
</h1>

<!-- хороший стиль -->
<h1>
  <img alt=Company src=logo.png>
</h1>

Краткость

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

<!-- плохой стиль -->
<!doctype html>
<html lang=en>
  <head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
    <title>Contact</title>
    <link rel=stylesheet href=style.css type=text/css />
  </head>
  <body>
    <h1>Contact me</h1>
    <label>
      Email address:
      <input type=email placeholder=you@email.com required=required />
    </label>
    <script src=main.js type=text/javascript></script>
  </body>
</html>

<!-- хороший стиль-->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Contact</title>
  <link rel=stylesheet href=style.css>

  <h1>Contact me</h1>
  <label>
    Email address:
    <input type=email placeholder=you@email.com required>
  </label>
  <script src=main.js></script>
</html>

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

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

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

<!-- плохой стиль-->
<h1><img alt="Logo" src="logo.png"></h1>

<!-- хороший стиль -->
<h1><img alt="My Company, Inc." src="logo.png"></h1>

Язык

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

<!-- плохой стиль -->
<!doctype html>
<title>Hello, world.</title>

<!-- хороший стиль-->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Hello, world.</title>
</html>

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

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

<!-- плохой стиль -->
<!doctype html>
<meta charset=utf-8>
<script src=analytics.js></script>
<title>Hello, world.</title>
<p>...</p>

<!-- хороший стиль -->
<!doctype html>
<meta charset=utf-8>
<title>Hello, world.</title>
<p>...</p>
<script src=analytics.js></script>

CSS

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

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

/* плохой стиль */
div {
  color: red
}

/* хороший стиль */
div {
  color: red;
}

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

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

/* плохой стиль */
div {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* хороший стиль */
div {
  padding: 10px;
}

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

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

/* плохой стиль */
img {
  display: block;
}

/* хороший стиль */
img {
  vertical-align: middle;
}

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

/* плохой стиль */
div {
  width: 100px;
  position: absolute;
  right: 0;
}

/* хороший стиль */
div {
  width: 100px;
  margin-left: auto;
}

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

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

display: block;
display: flex;
position: relative;
position: sticky;
position: absolute;
position: fixed;

Селекторы

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

/* плохой стиль */
div:first-of-type :last-child > p ~ *

/* хороший стиль */
div:first-of-type .info

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

/* плохой стиль */
img[src$=svg], ul > li:first-child {
  opacity: 0;
}

/* хороший стиль */
[src$=svg], ul > :first-child {
  opacity: 0;
}

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

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

/* плохой стиль */
.bar {
  color: green !important;
}
.foo {
  color: red;
}

/* хороший стиль */
.foo.bar {
  color: green;
}
.foo {
  color: red;
}

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

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

/* плохой стиль */
li {
  visibility: hidden;
}
li:first-child {
  visibility: visible;
}

/* хороший стиль */
li + li {
  visibility: hidden;
}

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

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

/* плохой стиль */
div h1, div p {
  text-shadow: 0 1px 0 #fff;
}

/* хороший стиль */
div {
  text-shadow: 0 1px 0 #fff;
}

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

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

/* плохой стиль */
div {
  transition: all 1s;
  top: 50%;
  margin-top: -10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

/* хороший стиль */
div {
  transition: 1s;
  top: calc(50% - 10px);
  padding: 5px 10px 20px;
}

Язык

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

/* плохой стиль */
:nth-child(2n + 1) {
  transform: rotate(360deg);
}

/* хороший стиль */
:nth-child(odd) {
  transform: rotate(1turn);
}

Префиксы

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

/* плохой стиль */
div {
  transform: scale(2);
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
}

/* хороший стиль */
div {
  -webkit-transform: scale(2);
  transform: scale(2);
  transition: 1s;
}

Анимация

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

/* плохой стиль */
div:hover {
  animation: move 1s forwards;
}
@keyframes move {
  100% {
    margin-left: 100px;
  }
}

/* хороший стиль */
div:hover {
  transition: 1s;
  transform: translateX(100px);
}

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

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

/* плохой стиль */
div {
  margin: 0px;
  font-size: .9em;
  line-height: 22px;
  transition: 500ms;
}

/* хороший стиль */
div {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  transition: .5s;
}

Цвета

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

/* плохой стиль */
div {
  color: hsl(103, 54%, 43%);
}

/* хороший стиль */
div {
  color: #5a3;
}

Отрисовка

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

/* плохой стиль */
div::before {
  content: url(white-circle.svg);
}

/* хороший стиль */
div::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

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

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

/* плохой стиль */
div {
  // position: relative;
  transform: translateZ(0);
}

/* хороший стиль */
div {
  /* position: relative; */
  will-change: transform;
}

JavaScript

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

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

// плохой стиль (хотя намного быстрее по скорости)
const arr = [1, 2, 3, 4];
const len = arr.length;
var i = -1;
var result = [];
while (++i < len) {
  var n = arr[i];
  if (n % 2 > 0) continue;
  result.push(n * n);
}

// хороший стиль
const arr = [1, 2, 3, 4];
const isEven = n => n % 2 == 0;
const square = n => n * n;

const result = arr.filter(isEven).map(square);

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

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

// плохой стиль
const merge = (target, ...sources) => Object.assign(target, ...sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

// хороший стиль
const merge = (...sources) => Object.assign({}, ...sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

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

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

// плохой стиль
const toArray = obj => [].slice.call(obj);

// хороший стиль
const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

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

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

// плохой стиль
if (x === undefined || x === null) { ... }

// хороший стиль
if (x == undefined) { ... }

Циклы

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

// плохой стиль
const sum = arr => {
  var sum = 0;
  var i = -1;
  for (;arr[++i];) {
    sum += arr[i];
  }
  return sum;
};

sum([1, 2, 3]); // => 6

// хороший стиль
const sum = arr =>
  arr.reduce((x, y) => x + y);

sum([1, 2, 3]); // => 6

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

// плохой стиль
const createDivs = howMany => {
  while (howMany--) {
    document.body.insertAdjacentHTML("beforeend", "<div></div>");
  }
};
createDivs(5);

// плохой стиль
const createDivs = howMany =>
  [...Array(howMany)].forEach(() =>
    document.body.insertAdjacentHTML("beforeend", "<div></div>")
  );
createDivs(5);

// хороший стиль
const createDivs = howMany => {
  if (!howMany) return;
  document.body.insertAdjacentHTML("beforeend", "<div></div>");
  return createDivs(howMany - 1);
};
createDivs(5);

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

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

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

// плохой стиль
const sortNumbers = () =>
  Array.prototype.slice.call(arguments).sort();

// хороший стиль
const sortNumbers = (...numbers) => numbers.sort();

Функция `Apply`

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

const greet = (first, last) => `Hi ${first} ${last}`;
const person = ["John", "Doe"];

// плохой стиль
greet.apply(null, person);

// хороший стиль
greet(...person);

Функция `Bind`

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

// плохой стиль
["foo", "bar"].forEach(func.bind(this));

// хороший стиль
["foo", "bar"].forEach(func, this);
// плохой стиль
const person = {
  first: "John",
  last: "Doe",
  greet() {
    const full = function() {
      return `${this.first} ${this.last}`;
    }.bind(this);
    return `Hello ${full()}`;
  }
}

// хороший стиль
const person = {
  first: "John",
  last: "Doe",
  greet() {
    const full = () => `${this.first} ${this.last}`;
    return `Hello ${full()}`;
  }
}

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

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

// плохой стиль
[1, 2, 3].map(num => String(num));

// хороший стиль
[1, 2, 3].map(String);

Композиция

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

const plus1 = a => a + 1;
const mult2 = a => a * 2;

// плохой стиль
mult2(plus1(5)); // => 12

// хороший стиль
const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val);
const addThenMult = pipeline(plus1, mult2);
addThenMult(5); // => 12

Кэширование

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

// плохой стиль
const contains = (arr, value) =>
  Array.prototype.includes
    ? arr.includes(value)
    : arr.some(el => el === value);
contains(["foo", "bar"], "baz"); // => false

// хороший стиль
const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(["foo", "bar"], "baz"); // => false

Переменные

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

// плохой стиль
var obj = {};
obj["foo" + "bar"] = "baz";

// хороший стиль
const obj = {
  ["foo" + "bar"]: "baz"
};

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

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

// плохой стиль
var grade;
if (result < 50)
  grade = "bad";
else if (result < 90)
  grade = "good";
else
  grade = "excellent";

// хороший стиль
const grade = (() => {
  if (result < 50)
    return "bad";
  if (result < 90)
    return "good";
  return "excellent";
})();

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

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

const shared = { foo: "foo" };
const obj = Object.create(shared, {
  bar: {
    value: "bar",
    enumerable: true
  }
});

// плохой стиль
for (var prop in obj) {
  if (obj.hasOwnProperty(prop))
    console.log(prop);
}

// хороший стиль
Object.keys(obj).forEach(prop => console.log(prop));

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

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

// плохой стиль
const me = {
  name: "Ben",
  age: 30
};
var meSize = Object.keys(me).length;
meSize; // => 2
me.country = "Belgium";
meSize++;
meSize; // => 3
// хороший стиль
const me = Map();
me.set("name", "Ben");
me.set("age", 30);
me.size; // => 2
me.set("country", "Belgium");
me.size; // => 3

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

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

// плохой стиль
const sum = a => b => a + b;
sum(5)(3); // => 8

// хороший стиль
const sum = (a, b) => a + b;
sum(5, 3); // => 8

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

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

// плохой стиль
foo || doSomething();

// хороший стиль
if (!foo) doSomething();
// bad
void function() { /* IIFE */ }();

// хороший стиль
(function() { /* IIFE */ }());
// плохой стиль
const n = ~~3.14;

// хороший стиль
const n = Math.floor(3.14);

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

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

// плохой стиль
arr[arr.length - 1];

// хороший стиль
const first = arr => arr[0];
const last = arr => first(arr.slice(-1));
last(arr);
// плохой стиль
const product = (a, b) => a * b;
const triple = n => n * 3;

// хороший стиль
const product = (a, b) => a * b;
const triple = product.bind(null, 3);

Зависимости

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

// плохой стиль
var _ = require("underscore");
_.compact(["foo", 0]));
_.unique(["foo", "foo"]);
_.union(["foo"], ["bar"], ["foo"]);

// хороший стиль
const compact = arr => arr.filter(el => el);
const unique = arr => [...Set(arr)];
const union = (...arr) => unique([].concat(...arr));

compact(["foo", 0]);
unique(["foo", "foo"]);
union(["foo"], ["bar"], ["foo"]);

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

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

HTML

Семантика

Краткость

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

Язык

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

CSS

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

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

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

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

Селекторы

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

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

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

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

Язык

Префиксы

Анимация

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

Цвета

Отрисовка

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

JavaScript

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

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

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

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

Циклы

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

Функция Apply

Функция Bind

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

Композиция

Кэширование

Переменные

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

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

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

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

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

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

Зависимости

Вакансии в тему:

Также рекомендуем:

Спасибо!

Теперь редакторы в курсе.

Функция `Apply`

Функция `Bind`