Руководство по стилю HTML-CSS для фронтенда

Содержание

Золотое правило

Проект всегда должен следовать одному и тому же набору стандартов кодирования!

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

HTML

Синтаксис

Используйте два пробела вместо табов — это единственный способ гарантировать единообразный вывод во всех средах.
Вложенные элементы должны иметь один отступ (то есть два пробела).
Для определений атрибутов всегда используйте двойные кавычки, никогда — одинарные.
Не добавляйте завершающий слэш к самозакрывающимся элементам —спецификация HTML5явно указывает, что это необязательно.
Не пропускайте необязательные закрывающие теги (например,</li>или</body>）。

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png.html" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

⟦0¦HTML5 doctype

Добавляйте объявление стандартного режима в качестве первой строки каждой HTML-страницы, чтобы обеспечить единообразное отображение в каждом браузере.

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Атрибут языка

⟦0¦Согласно спецификации HTML5:

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

Подробнее оlangоб атрибуте можно узнать изэтой спецификацииподробнее.

Здесь приведенатаблица языковых кодов.。

<html lang="zh-CN">
  <!-- ... -->
</html>

Режим совместимости IE

⟦0¦IE поддерживает использование определённого<meta>Тег <meta>, чтобы определить, какую версию IE следует использовать для отображения текущей страницы. Если нет строгих особых требований, лучше всего установить его врежим edgeтем самым указывая IE использовать последний поддерживаемый им режим.

Прочитайте эту статью на Stack Overflow, чтобы получить больше полезной информации.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Кодировка символов

Явно объявляя кодировку символов, вы можете гарантировать, что браузеры смогут быстро и легко определить, как отображать содержимое страницы. Преимущество состоит в том, что это позволяет избежать необходимости использовать знаки символьных сущностей в HTML, оставаясь тем самым согласованным с кодировкой документа (обычно UTF-8).

<head>
  <meta charset="UTF-8">
</head>

Подключение файлов CSS и JavaScript

Согласно спецификации HTML5, при подключении файлов CSS и JavaScript обычно не нужно указыватьtypeатрибут type, потому чтоtext/cssиtext/javascriptони являются их соответствующими значениями по умолчанию.

Ссылки на спецификацию HTML5

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css.html">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js.html"></script>

Прагматизм

По возможности следуйте стандартам и семантике HTML, но не жертвуйте практичностью. Всегда старайтесь использовать как можно меньше тегов и поддерживать минимальную сложность.

Порядок атрибутов

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

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

class используется для идентификации многократно используемых компонентов, поэтому его следует ставить первым. id используется для идентификации конкретных компонентов, и его следует использовать с осторожностью (например, для внутристраничных закладок), поэтому он ставится вторым.

<a class="..." id="..." data-modal="toggle" href="../index.html">
  Example link
</a>

<input class="form-control" type="text">

<img src="....html" alt="...">

Булевы атрибуты

Логические атрибуты можно объявлять без значения. Спецификация XHTML требует значения, а спецификация HTML5 — нет.

Для получения дополнительной информации обратитесь к разделуWhatWG о логических атрибутах：

Логический атрибут элемента является истинным, если у него есть значение, и ложным, если значения нет.

Есливам абсолютнонеобходимо присвоить значение, обратитесь к спецификации WhatWG:

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

Проще говоря, просто не присваивайте значение.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

Сократите количество тегов

При написании HTML-кода старайтесь избегать ненужных родительских элементов. Часто это требует итераций и рефакторинга. См. пример ниже:

<!-- Not so great -->
<span class="avatar">
  <img src="....html">
</span>

<!-- Better -->
<img class="avatar" src="....html">

Теги, созданные JavaScript

Теги, сгенерированные JavaScript, затрудняют поиск и редактирование содержимого и снижают производительность. По возможности избегайте их.

CSS

Синтаксис

Используйте два пробела вместо табуляции — это единственный способ гарантировать согласованное отображение во всех средах.
При группировке селекторов помещайте каждый отдельный селектор на отдельную строку.
Для удобочитаемости кода добавляйте пробел перед открывающей фигурной скобкой каждого блока объявлений.
Закрывающая фигурная скобка блока объявлений должна находиться на отдельной строке.
В каждом операторе объявления:после двоеточия должен стоять пробел.
Чтобы получать более точные сообщения об ошибках, каждое объявление должно быть на отдельной строке.
Все объявления должны заканчиваться точкой с запятой. Точка с запятой после последнего объявления необязательна, но если вы её опустите, ваш код может быть более подвержен ошибкам.
Для значений свойств, разделённых запятыми, вставляйте пробел после каждой запятой (например,box-shadow）。
Неrgb()、rgba()、hsl()、hsla()илиrect()вставляйте пробелвнутризначения после запятой. Это помогает различать несколько значений свойств (запятая плюс пробел) и несколько значений цвета (только запятая, без пробела).
Для значений свойств или параметров цвета опускайте ведущий 0 у десятичных дробей меньше 1 (например,.5вместо0.5；-.5pxвместо-0.5px）。
Шестнадцатеричные значения должны быть полностью в нижнем регистре, например,#fff. При сканировании документа символы нижнего регистра легче распознаются, потому что их формы более различимы.
Старайтесь использовать сокращённые шестнадцатеричные значения, например, используйте#fffвместо#ffffff。
Добавляйте двойные кавычки к атрибутам в селекторах, например,input[type="text"]。необязательно только в определённых случаях, но для единообразия кода рекомендуется всегда использовать двойные кавычки.
Избегайте указания единиц для нулевых значений, например, используйтеmargin: 0;вместоmargin: 0px;。

Есть вопросы по терминологии, используемой здесь? Обратитесь кразделу синтаксиса статьи «Cascading Style Sheets» в Википедии。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Порядок объявлений

Связанные объявления свойств должны быть сгруппированы вместе и расположены в следующем порядке:

Позиционирование
Блочная модель
Типографические
Визуальные

Поскольку позиционирование может удалять элементы из нормального потока документа, а также переопределять стили, связанные с блочной моделью, оно размещается первым. Блочная модель идёт второй, потому что определяет размер и положение компонентов.

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

Полный список свойств и их порядок см. вRecess。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

Не используйте`@import`

и<link>По сравнению с тегом <link>,@importдиректива @import работает намного медленнее; она не только добавляет дополнительные запросы, но и вызывает непредсказуемые проблемы. Есть несколько альтернатив:

Используйте несколько<link>элементов
Скомпилируйте несколько CSS-файлов в один файл с помощью препроцессора CSS, такого как Sass или Less.
Функция объединения CSS-файлов, предоставляемая Rails, Jekyll или другими системами

Пожалуйста, обратитесь кстатье Стива Саудерсаза дополнительной информацией.

<!-- Use link elements -->
<link rel="stylesheet" href="core.css.html">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

Размещение медиазапросов

Размещайте медиазапросы как можно ближе к связанным с ними правилам. Не объединяйте их в одну таблицу стилей или в конец документа. Если вы их отделите, в будущем о них только забудут. Ниже приведён типичный пример.

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

Свойства с префиксами

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

В TextMate используйтеText → Edit Each Line in Selection(⌃⌘A). В Sublime Text 2 используйтеSelection → Add Previous Line(⌃⇧↑) иSelection → Add Next Line (⌃⇧↓).

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

Объявления правил в одну строку

Длястилей только с одним объявлениемрекомендуется размещать инструкцию на одной строке для удобочитаемости и быстрого редактирования. Для стилей с несколькими объявлениями объявления всё равно следует разбивать на несколько строк.

Ключевой фактор — обнаружение ошибок – например, CSS-валидатор указывает на синтаксическую ошибку в строке 183. Если это одно объявление в одной строке, вы не пропустите ошибку; если в одной строке несколько объявлений, нужно внимательно анализировать, чтобы не пропустить ошибку.

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

Сокращённые объявления свойств

В случаях, когда все значения должны быть заданы явно, старайтесь ограничить использование сокращённых объявлений свойств. Распространённые злоупотребления сокращёнными объявлениями свойств приведены ниже:

padding
margin
font
background
border
border-radius

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

Очень хорошая статья на MDN (Mozilla Developer Network) осокращённых свойствахбудет полезна пользователям, не знакомым с сокращёнными объявлениями свойств и их поведением.

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

Вложенность в Less и Sass

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

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

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

Для длинных комментариев пишите полные предложения; для общих аннотаций допустимы краткие фразы.

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

Именование class

Имена классов должны содержать только строчные символы и дефисы (не подчёркивания или camelCase). Дефисы следует использовать для именования связанных классов (аналогично пространствам имён) (например,.btnи.btn-danger）。
Избегайте чрезмерно произвольных сокращений..btnозначаетbutton, но.sне несёт никакого смысла.
Имена классов должны быть как можно короче и при этом понятными по смыслу.
Используйте осмысленные имена. Используйте организационные или функциональные имена, а не презентационные.
Используйте ближайший родительский класс или базовый класс в качестве префикса для новых классов.
Используйте.js-*классы для идентификации поведения (в отличие от стиля), и не включайте эти классы в CSS-файлы.

При именовании переменных Sass и Less вы также можете обратиться к спецификациям, перечисленным выше.

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

Селекторы

Используйте классы для общих элементов, что полезно для оптимизации производительности рендеринга.
Избегайте селекторов атрибутов для часто встречающихся компонентов (например,[class^="..."]). На производительность браузера влияют эти факторы.
Старайтесь делать селекторы как можно короче и ограничивайте количество элементов в селекторе, предпочтительно не более 3.
Толькоограничивайте классы ближайшим родительским элементом при необходимости (т. е. селекторы-потомки) (например, когда не используются классы с префиксами – префиксы похожи на пространства имён).

Дополнительные материалы:

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

Организация кода

Организуйте сегменты кода по компонентам.
Установите единообразные соглашения о комментариях.
Используйте единообразные пробелы для разделения кода на блоки, что помогает при просмотре больших документов.
Если используется несколько CSS-файлов, разделяйте их по компонентам, а не по страницам, потому что страницы могут реорганизовываться, а компоненты только перемещаются.

/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

Настройка редактора

Настройте редактор следующим образом, чтобы избежать распространённых несоответствий и различий в коде:

Используйте два пробела вместо табуляции (мягкая табуляция, т. е. пробелы представляют символы табуляции).
Удалять конечные пробелы при сохранении файлов.
Установите кодировку файла UTF-8.
Добавьте пустую строку в конце файла.

Обратитесь к документации и добавьте эту информацию о конфигурации в проектный.editorconfigфайл. Например:Пример .editorconfig из Bootstrap. Для получения дополнительной информации обратитесь к разделуо EditorConfig。