Skip to content

Latest commit

 

History

History
219 lines (156 loc) · 9.31 KB

5.HTML.md

File metadata and controls

219 lines (156 loc) · 9.31 KB
Raw

5. HTML

Обязательно корректное использование doctype во всех местах, где его можно применить. При этом используется <!DOCTYPE html>

Обоснование: см. презентацию Вадима Макеева

====

Тег <html> обязан иметь аттрибут lang, если это возможно

====

Тег <head> обязан содержать необходимые метатеги, определяющие:

  • Кодировку страницы (<meta charset="utf-8">)
  • Заголовок страницы

====

Тег <head> обязан содержать подключение общих javascript-библиотек (например, jQuery) и css. Запрещено подключение общих библиотек и стилей в теле страницы

====

Не рекомендуется указывать аттрибут type для тегов link и script, если значение равно значению по умолчанию (type="text/css" и type="text/javascript" соответственно)

Обоснование: Спецификация HTML 5 не требует указания типа данных, используя вышеуказанные значения как значения по умолчанию.

====

Запрещено использование тегов <style> и <script> для внедрения стилей или скриптов на страницу не через подключение соответствующего файла. Есдинственным исключением может быть случай, когда инициализация скриптов на странице зависит от данных, пришедших с сервера.

ПЛОХО:

<style>
	.csg-testClass {
		color: red;
	}
<style>
<script>
	var someVar = 'Some text';
</script>

ХОРОШО:

<link rel="stylesheet" href="css_additional.css"/>
<script src="js_additional.js"/>

====

Обязательно закрывать парные HTML-теги, даже если это не требуется. Непарные HTML-теги (<br>, <img>) зкрывать запрещено

ПЛОХО:

<li>Some text here.
<li>Some new text here.
<li>You get the idea. <img src="imanimage.png"/>

ХОРОШО:

<li>Some text here.</li>
<li>Some new text here.</li>
<li>You get the idea. <img src="imanimage.png"></li>

====

Названия тегов должны быть в нижнем регистре

====

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

ПЛОХО:

<DIV CLASS="prefix-subprefix-some__class">I'm a text!</DIV>

ХОРОШО:

<div class="prefix-subprefix-some__class">I'm a text!</div>

====

Настоятельно рекомендуется использовать семантические HTML-элементы. W3CSchools

====

Запрещено использовать inline-css и inline-javascript. Используйте классы.

ПЛОХО:

<div style="color: red;" onclick="doSomething();">

ХОРОШО:

<div class="csg-some__class js-some__js__class">

====

Обязательно использование индентации для вложенных элементов.

====

Все вложенные элементы обязаны размещаться каждый - с новой строки. Единственным исключением из правила является ситуация, когда требуется исключить пробелы между элементами с display: inline-block;

====

Настоятельно рекомендуется считать текст и комментарии в теге - "тегами" и сносить их на отдельные строки с соответствующей индентацией (Если браузеры считают их элементами DOM-дерева, чем мы хуже?).

====

Запрещено использовать HTML-комментарии для исключения пробельных символов между элементами

====

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

ПЛОХО:

<div class="csg-some__class">
	<!-- snip -->
</div><!-- /.csg-some__class -->

ХОРОШО:

<div class="csg-some__class">
	<!-- snip -->
</div>

Обоснование: классы меняются, добавляются или убираются, а комментарии править никто не будет. Более того, это увеличивает объем файла (даже если используются Smarty-комментарии) и значительно ухудшает читаемость кода.

====

"Унитарные" атрибуты тега должны записываться в полной форме

ПЛОХО:

<input type="checkbox" checked>

ХОРОШО:

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

====

Значения атрибутов тега должны быть обрамлены в двойные кавычки

====

Рекомендуется использовать Idiomatic HTML кроме тех случаев, когда это противоречит данному документу

====

Атрибуты, используемые исключительно JavaScript-ом должны иметь префикс data-

ПЛОХО:

<div class="csg-class" configValue="123">
	<!-- snip -->
</div>

ХОРОШО:

<div class="csg-class" data-configValue="123">
	<!-- snip -->
</div>

Классы

Классы обязаны подчиняться следующим правилам именования a-la BEM:

themePrefix-[componentPrefix-]blockName[__blockName[__blockName[...]]][_modifier]

Где

  • themePrefix- - префикс, говорящий о том, для какой темы оформления используется данный класс, либо имеющий одно из специальных значений: i- (общие и/или служебные стили) или js- невизуальный класс, существующий исключительно для обработки с помощью JavaScript. В данном руководстве используется префикс csg-, относящийся к теме CodeStyleGuide
  • componentPrefix- - префикс, определяющий, к какому компоненту относится данный класс
  • blockName - название смыслового блока верстки
  • _modifier - модификатор, обозначающий определенное состояние блока (_selected, _active, _disabled и т. д.)

ПРИМЕР:

csg-news-newsList // Список новостей компонента news темы оформления air
csg-news-newsList__article // Новость в списке новостей компонента news темы оформления air
csg-news-newsList__article__header // Заголовок новости в списке новостей компонента news темы оформления air
csg-news-newsList__article__header_hot // Заголовок горячей новости в списке новостей компонента news темы оформления air

====

Запрещено использовать символы - и _ в названиях смысловых блоков. Они заререзвированы как разделители

====

Запрещено использовать "визуальные" названия смысловых блоков типа __red, __big и т. д.

Обоснование: дизайн имеет свойство меняться, клиенты могут прийти и сказать "А сделайте эту кнопочку с классом csg-common-button__orange не оранжевой, а зеленой". То-же самое - с размером.

====

Названия смысловых блоков должны быть в camelCase.

ПЛОХО:

csg-news-newslist

csg-flights-flight__shortinfo__departuredate

ХОРОШО:

csg-news-newsList

csg-flights-flight__shortInfo__departureDate