Common Frontend Components

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

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

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

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

<script>
export let op = 1
$: style = `
--op:${op};
`
</script>

<style>span {
opacity: var(--op);
}</style>

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

• Отступы, цвета задаются через глобальные переменные
• Если ты хочешь, чтобы цвет наследовался, используй значение initial, тем самым обнулив переменную
  Пример:

 <!-- this text will inherit color -->
 <Text col="initial">Some text</Text>
 <!-- this won't -->
 <Text col="inherit">Some more text</Text> 

Такое поведение обосновано тем, что var() не принимает в себя значение inherit, а может быть лишь указано как fallback значение

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

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

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

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