LogoLogo
  • What is it
  • Common
  • Scripts
  • Templates
  • Database
  • React
  • Styles
  • Angular
  • Dependencies
  • Architecture
    • Frontend architecture
  • Process
  • На русском
    • Общее
    • Скрипты
    • Архитектура
      • Frontend
    • Процедурные стандарты
    • База данных
    • Шаблоны
    • Стили
    • React
    • Зависимости
    • Angular
  • PlantUML
Powered by GitBook
On this page
  • 0. Введение
  • 1. Файлы с исходным кодом
  • 2. Форматирование
  • 2.1. Переносы
  • 2.1.1 Тег
  • 2.1.2 Содержимое тега
  • 3. Использование возможностей языка
  • 3.1.1. Пустой тег

Was this helpful?

  1. На русском

Шаблоны

HTML, JSX

0. Введение

TODO

1. Файлы с исходным кодом

TODO

2. Форматирование

2.1. Переносы

2.1.1 Тег

Перенос тега (разрывать тег) стоит, если:

  1. Он выходит за установленную виртуальную границу (120 символов).

  2. Хотя бы один атрибут содержит выражения из нескольких операндов.

  3. Тег включает более 3 атрибутов.

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

    <!--Хорошо-->
    <component name="Name" title="TITLE" value="performer"></component>

    <!--Хорошо-->
    <component
        name="Name"
        title="TITLE"
        data="some data"
        value="performer"
        onclick="console.log(event)"
    />

    <!--Плохо-->
    <!--Вариант неудачен тем, что при изменении длины первой строки приходится исправлять отступы для всех других строк.-->
    <!--Во-первых, это рутинная операциях, во-вторых, её не все делают, -->
    <!--во-вторых, иногда форматирование портится незаметно при автоматизированной замене, -->
    <!--например, названия компонента/блока/элемента.-->
    <component name="Name"
               title="TITLE"
               data="some data"
               value="performer"
               onclick="console.log(event)"></component>

    <!--Плохо-->
    <!--Вариант неудачен тем, что читать становится довольно сложновато. Наибольшие проблемы появляются при ревью изменений. -->
    <!--Они не очень наглядны в таких длинных строках, их просмотр становится более трудоёмким.-->
    <component name="Name" title="TITLE" value="performer" data="some data" type="text" mode="primary" onclick="console.log(event)" onfocus="onfocus()" onmouseleave="onmouseleave"></component>

2.1.2 Содержимое тега

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

    <!--Плохо-->
    <component
        name="Name"
        title="TITLE"
        data="some data"
        value="performer"
        onclick="console.log(event)"
    >Info</component>

    <!--Хорошо-->
    <component
        name="Name"
        title="TITLE"
        data="some data"
        value="performer"
        onclick="console.log(event)"
    >
        Info
    </component>

3. Использование возможностей языка

3.1.1. Пустой тег

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

    <!--Плохо-->
    <component></component>

    <!--Хорошо (при наличии технической возможности)-->
    <component/>
PreviousБаза данныхNextСтили

Last updated 5 years ago

Was this helpful?