-
- HTML
- -
-
- Оглавление
-HTML
- -
-
- Синтаксис
--
-
- Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе. -
- Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки. -
- Необязательный закрывающий слеш у одиночных тегов (
<img>,<br>и другие) не ставится.
- - Необязательные закрывающие теги (например,
</li>или</body>) не пропускаются.
- - Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint. -
-
-
<!DOCTYPE html>
+
+
+
+
+
+ HTML
+
+
+
+ Синтаксис
+
+ - Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
+ - Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
+ - Необязательный закрывающий слеш у одиночных тегов (
<img>, <br> и другие) не ставится.
+ - Необязательные закрывающие теги (например,
</li> или </body>) не пропускаются.
+ - Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint.
+
+
+
+
+ <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
@@ -98,64 +99,64 @@ Синтаксис
</article>
</body>
</html>
-
-
-
-
-
-
- Валидность
-
- Документ должен проходить проверку на валидность. Для проверки используется современный валидатор.
-
-
-
-
-
-
- HTML-доктайп
-
- В начале страницы обязательно должен быть указан актуальный doctype, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах.
-
-
-
-
- <!DOCTYPE html>
+
+
+
+
+
+
+ Валидность
+
+ Документ должен проходить проверку на валидность. Для проверки используется современный валидатор.
+
+
+
+
+
+
+ HTML-доктайп
+
+ В начале страницы обязательно должен быть указан актуальный doctype, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах.
+
+
+
+
+ <!DOCTYPE html>
<html lang="ru">
<head>…</head>
<body>…</body>
</html>
-
-
-
-
-
-
- Кодировка символов
-
- Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна.
-
-
-
-
- <head>
+
+
+
+
+
+
+ Кодировка символов
+
+ Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна.
+
+
+
+
+ <head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
-
-
-
-
-
-
- Подключение стилей
-
- Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега <link> не указывается, так как его значение text/css устанавливается по умолчанию.
-
-
-
-
- <!-- Хорошо: стилевой файл подключён в секции head -->
+
+
+
+
+
+
+ Подключение стилей
+
+ Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега <link> не указывается, так как его значение text/css устанавливается по умолчанию.
+
+
+
+
+ <!-- Хорошо: стилевой файл подключён в секции head -->
<!DOCTYPE html>
<html lang="ru">
<head>
@@ -172,23 +173,23 @@ Подключение стилей
<link rel="stylesheet" href="https://github.com/style.css">
</body>
</html>
-
-
-
-
-
-
- Подключение скриптов
-
- Скрипты должны подключаться в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого.
-
-
- При подключении скриптов в теге <script> атрибут type не указывается, так как его значение text/javascript устанавливается по умолчанию.
-
-
-
-
- <!-- Хорошо: скрипт подключается перед </body> -->
+
+
+
+
+
+
+ Подключение скриптов
+
+ Скрипты должны подключаться в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого.
+
+
+ При подключении скриптов в теге <script> атрибут type не указывается, так как его значение text/javascript устанавливается по умолчанию.
+
+
+
+
+ <!-- Хорошо: скрипт подключается перед </body> -->
<!DOCTYPE html>
<html lang="ru">
<head>…</head>
@@ -206,41 +207,41 @@ Подключение скриптов
</head>
<body>…</body>
</html>
-
-
-
-
-
-
- Порядок атрибутов
-
- Атрибут класса у HTML-элементов пишется первым. Единообразное написание помогает легче считывать код и быстрее разбираться в назначении блоков по их классам.
-
-
- Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для одинаковых элементов.
-
-
-
-
- <a class="element element-big" id="element" href="https://github.com/" data-name="element">Ссылка</a>
+
+
+
+
+
+
+ Порядок атрибутов
+
+ Атрибут класса у HTML-элементов пишется первым. Единообразное написание помогает легче считывать код и быстрее разбираться в назначении блоков по их классам.
+
+
+ Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для одинаковых элементов.
+
+
+
+
+ <a class="element element-big" id="element" href="https://github.com/" data-name="element">Ссылка</a>
<input class="form-control" type="text" name="test">
<img class="pets-picture" src="https://github.com/cats.jpg" alt="Изображение котиков">
-
-
-
-
-
-
- Логические атрибуты
-
- Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
-
-
-
-
- <!-- checked="checked" необязательно -->
+
+
+
+
+
+
+ Логические атрибуты
+
+ Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
+
+
+
+
+ <!-- checked="checked" необязательно -->
<input type="checkbox" required checked>
<input type="text" disabled>
@@ -249,19 +250,19 @@ Логические атрибуты
<option value="1" selected>1</option>
</select>
-
-
-
-
-
- Подписи полей ввода
-
- Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега <label>.
-
-
-
-
- <!-- Хорошо: элемент формы radio связан с подписью через идентификатор -->
+
+
+
+
+
+ Подписи полей ввода
+
+ Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега <label>.
+
+
+
+
+ <!-- Хорошо: элемент формы radio связан с подписью через идентификатор -->
<input type="radio" id="choose">
<label for="choose">Радио кнопка</label>
@@ -272,23 +273,23 @@ Подписи полей ввода
<!-- Плохо: подпись не связана с элементом формы -->
<input type="radio" id="choose"> Радио кнопка
-
-
-
-
-
-
- Размеры картинок
-
- Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях. В случае пикселей размерность не нужна.
-
-
- По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
-
-
-
-
- <!-- Хорошо: размеры картинке заданы -->
+
+
+
+
+
+
+ Размеры картинок
+
+ Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях. В случае пикселей размерность не нужна.
+
+
+ По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения.
+
+
+
+
+ <!-- Хорошо: размеры картинке заданы -->
<div class="logo-area">
<img src="https://github.com/logo.png" alt="" width="300" height="150">
</div>
@@ -302,60 +303,60 @@ Размеры картинок
<div class="logo-area">
<img src="https://github.com/logo.png" alt="">
</div>
-
-
-
-
-
-
- Атрибут языка
-
- Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
-
-
-
-
- <!DOCTYPE html>
+
+
+
+
+
+
+ Атрибут языка
+
+ Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
+
+
+
+
+ <!DOCTYPE html>
<html lang="ru">
<head>…</head>
<body>…</body>
</html>
-
-
-
-
-
-
- CSS
-
-
-
- Синтаксис
-
- - После значения свойства обязательно ставится точка с запятой.
- - Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
- - Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например,
#f5f5f5.
- - Названия тегов и свойств в правилах пишутся строчными буквами.
- - Начальный ноль для значений не сокращается (например,
.5 вместо 0.5).
- - Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются.
- - После двоеточия в правилах ставится один пробел (
top: 10px;). А перед двоеточием пробел не нужен.
- - После запятых внутри значений
rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.
- - До и после комбинатора между селекторами (например,
p > a) ставится один пробел.
- - Каждое объявление в правиле пишется на новой строке.
- - Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки:
-
.selector {
+
+
+
+
+
+
+ CSS
+
+
+
+ Синтаксис
+
+ - После значения свойства обязательно ставится точка с запятой.
+ - Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
+ - Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например,
#f5f5f5.
+ - Названия тегов и свойств в правилах пишутся строчными буквами.
+ - Начальный ноль для значений не сокращается (например,
.5 вместо 0.5).
+ - Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются.
+ - После двоеточия в правилах ставится один пробел (
top: 10px;). А перед двоеточием пробел не нужен.
+ - После запятых внутри значений
rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.
+ - До и после комбинатора между селекторами (например,
p > a) ставится один пробел.
+ - Каждое объявление в правиле пишется на новой строке.
+ - Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки:
+
.selector {
color: #f5f5f5;
-}
-
- - Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
- - Единицы измерения не пишутся, там где в них нет необходимости. Например,
border: 0.
- - Для проверки CSS-кода используйте конфигурацию для настройки валидатора stylelint.
- - Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
-
-
-
-
- /* Хорошо */
+}
+
+ Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
+ Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
+ Для проверки CSS-кода используйте конфигурацию для настройки валидатора stylelint.
+ Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
+
+
+
+
+ /* Хорошо */
.selector,
.selector-secondary,
.selector[type="text"] {
@@ -366,45 +367,45 @@ Синтаксис
}
/* Плохо */
-.selector, .selector-secondary, .selector[type=text]{
+.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0,0,0,.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF}
-
-
-
-
-
-
- Порядок свойств
-
- Объявления логически связанных свойств группируются в следующем порядке:
-
-
- - Позиционирование
- - Блочная модель
- - Типографика
- - Оформление
- - Анимация
- - Разное
-
-
- Позиционирование следует первым потому, что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков.
-
-
- Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь.
-
-
- Сгруппированные объявления в правиле отделяются друг от друга пустой строкой.
-
-
- Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.
-
-
-
-
- .declaration-order {
+
+
+
+
+
+
+ Порядок свойств
+
+ Объявления логически связанных свойств группируются в следующем порядке:
+
+
+ - Позиционирование
+ - Блочная модель
+ - Типографика
+ - Оформление
+ - Анимация
+ - Разное
+
+
+ Позиционирование следует первым потому, что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков.
+
+
+ Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь.
+
+
+ Сгруппированные объявления в правиле отделяются друг от друга пустой строкой.
+
+
+ Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.
+
+
+
+
+ .declaration-order {
/* Позиционирование */
position: absolute;
top: 0;
@@ -442,22 +443,22 @@ Порядок свойств
/* Разное */
will-change: auto;
}
-
-
-
-
-
-
- Имена классов
-
- - Имена классов пишутся строчными буквами, используется дефис (но не знаки нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например,
.button и .button-danger).
- - Имена классов должны быть такими, чтобы по ним можно было быстро понять какому элементу страницы задан класс: избегайте сокращений (единственное исключение —
.btn для кнопок), но не делайте их слишком длинными (более трёх слов).
- - Для написания классов используются английские слова и термины. Транслитом названия классов и атрибутов не пишутся.
-
-
-
-
- /* Хорошо */
+
+
+
+
+
+
+ Имена классов
+
+ - Имена классов пишутся строчными буквами, используется дефис (но не знаки нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например,
.button и .button-danger).
+ - Имена классов должны быть такими, чтобы по ним можно было быстро понять какому элементу страницы задан класс: избегайте сокращений (единственное исключение —
.btn для кнопок), но не делайте их слишком длинными (более трёх слов).
+ - Для написания классов используются английские слова и термины. Транслитом названия классов и атрибутов не пишутся.
+
+
+
+
+ /* Хорошо */
.alert-danger { … }
.tweet .user-picture { … }
.button { … }
@@ -468,54 +469,54 @@ Имена классов
.t { … }
.big_red_button { … }
.knopka { … }
-
-
-
-
-
-
- Правило @import
-
- Правило @import работает медленнее, чем тег <link>. В стилях @import не должен использоваться.
-
-
-
-
- <!-- Хорошо: подключение тегом link -->
+
+
+
+
+
+
+ Правило @import
+
+ Правило @import работает медленнее, чем тег <link>. В стилях @import не должен использоваться.
+
+
+
+
+ <!-- Хорошо: подключение тегом link -->
<link rel="stylesheet" href="https://github.com/module.css">
<!-- Плохо -->
<style>
@import url("https://github.com/module.css");
</style>
-
-
-
-
-
-
- Варианты шрифта
-
- Альтернативные варианты шрифта и тип семейства указываются в конце перечисления font-family.
-
-
- В случае использования нестандартных шрифтов альтернативный веб-безопасный шрифт и тип семейства указываются, чтобы в случае отсутствия нестандартного шрифта в системе, изменения внешнего вида страницы были минимальны. Альтернативный шрифт должен быть такого же типа, что и нестандартный.
-
-
- Порядок шрифтов следующий:
-
-
- - нестандартный шрифт;
- - веб-безопасный;
- - тип шрифта.
-
-
- Список веб-безопасных шрифтов можно посмотреть здесь — cssfontstack.com.
-
-
-
-
- /* Хорошо: указан альтернативный веб-безопасный шрифт и его тип семейства */
+
+
+
+
+
+
+ Варианты шрифта
+
+ Альтернативные варианты шрифта и тип семейства указываются в конце перечисления font-family.
+
+
+ В случае использования нестандартных шрифтов альтернативный веб-безопасный шрифт и тип семейства указываются, чтобы в случае отсутствия нестандартного шрифта в системе, изменения внешнего вида страницы были минимальны. Альтернативный шрифт должен быть такого же типа, что и нестандартный.
+
+
+ Порядок шрифтов следующий:
+
+
+ - нестандартный шрифт;
+ - веб-безопасный;
+ - тип шрифта.
+
+
+ Список веб-безопасных шрифтов можно посмотреть здесь — cssfontstack.com.
+
+
+
+
+ /* Хорошо: указан альтернативный веб-безопасный шрифт и его тип семейства */
body {
font-family: "Helvetica", "Arial", sans-serif;
}
@@ -539,20 +540,20 @@ Варианты шрифта
body {
font-family: "Helvetica", "Georgia", sans-serif;
}
-
-
-
-
-
-
- Доступное скрытие
-
- Для того, чтобы контент был скрыт от глаз, но доступен для скринридеров и поисковиков его нужно скрывать используя утилитарный класс visually-hidden.
-
-
-
-
- /* Плохо: скрывать элемент с помощью font-size, display:none */
+
+
+
+
+
+
+ Доступное скрытие
+
+ Для того, чтобы контент был скрыт от глаз, но доступен для скринридеров и поисковиков его нужно скрывать используя утилитарный класс visually-hidden.
+
+
+
+
+ /* Плохо: скрывать элемент с помощью font-size, display:none */
h1 {
font-size: 0;
}
@@ -560,10 +561,10 @@ Доступное скрытие
.title {
display: none;
}
-
-
-
-/* Хорошо: использован класс visually-hidden */
+
+
+
+ /* Хорошо: использован класс visually-hidden */
.visually-hidden {
position: absolute;
width: 1px;
@@ -576,14 +577,14 @@ Доступное скрытие
clip: rect(0 0 0 0);
overflow: hidden;
}
-
-
-
-<h2 class="visually-hidden">Заголовок</h2>
-
-
-
-
+
+
+ <h2 class="visually-hidden">Заголовок</h2>
+
+
+
+
+