@mdsnvst/web_common v1.0.6

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>