Common Frontend Components

Список правил

Правила компонентов:

• Название: UpperCamelCase (PascalCase)
• Название компонента, импорт компонента и т.д везде должны совпадать
• Название props и событий: camelCase
• Переменные (и пропсы) передаются через style корневому элементу компонента
• Использование пропсов (и значений по умолчанию), отвечающих за стили:

<span {style}><slot /></span>

<script>
export let op = null
$: style = `
${ op ? `--op:${op};` : '' }
`.replace(/\s+/g, '')
</script>

<style>span {
/* fallbacks */
--op: 1;

/* styling */
opacity: var(--op);
}</style>

Правила стилей:

• Отступы, цвета задаются через глобальные переменные
• Запрещено:
  • transition all
  • Анимация таких свойств как margin, padding, top etc.
  • Прятать svg при помощи display none, visibility hidden
  • Инлайн стили. Исключение: css custom properties
  • !important Без пояснения
  • z-index больше, чем z-index header'а (3)
• Необходимо:
  • will-change при анимации
  • filter opacity(), а не opacity

Правила svg:

• для одноцветных иконок или частей svg, которым необходимо брать цвет извне: fill="currentColor"
• ширина задаётся снаружи
• Необходимо:
  • height="100%"
  • preserveAspectRatio="xMinYMin meet"
  • viewBox

Правила страниц:

• Шаблон страницы:

<Header />
<div class="app-wrap">
 <div class="app__content">
   <!-- Here content goes -->
 </div>
</div>