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

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

Обложка: Руководство по современному Веб-фронтенду
youtube.com/alfredocreates

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. Лучше использовать синтаксис функции с переменным количеством параметров, поскольку:

  1. У параметров есть имя, поэтому можно понять что именно ожидает функция на входе.
  2. Это настоящий массив, поэтому его удобно использовать.
// плохой стиль
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.»

Frontend Developer
Удалённо, от 60 000 до 120 000 ₽
Web-разработчик
Москва, от 50 000 ₽
.NET разработчик (middle)
Ярославль, можно удалённо, по итогам собеседования
Конферансье Telegram-каналов по теме IT
Москва, можно удалённо, от 20 000 до 50 000 ₽
Full Stack Web Developer (Middle+)
Москва, можно удалённо, от 70 000 до 200 000 ₽
Все вакансии
Разместить вакансию