ITCSS: где разместить CSS анимацию?

Question

Я использую ITCSS для моего последнего проекта.

Слои треугольника следующие:

• Настройки - используются с препроцессорами и содержат шрифт, определения цветов и т. Д. В этом слое обычно задаются переменные, которые могут настраивать шаблон.
• Инструменты - глобально используемые миксины и функции. Этот слой используется, только если мы используем препроцессор в качестве SASS.
• Generic - сбросить и / или нормализовать стили, определение размера блока и т. Д. Важно отметить, что это первый слой треугольника, который генерирует CSS.
• Элементы - стилизация для простых элементов HTML (таких как H1, A, header, footer, …). Они поставляются со стилем по умолчанию из браузера, поэтому мы должны переопределить их здесь.
• Объекты - селекторы на основе классов, которые определяют недекорированные шаблоны дизайна, например, медиа-объекты, известные из OOCSS, такие как список, переключатель.
• Компоненты - специфические компоненты пользовательского интерфейса. Компоненты нашей страницы, например кнопка, карточка, бетон-лист и т. Д.
• Утилиты - утилиты и вспомогательные классы с возможностью переопределения всего, что идет раньше в треугольнике.

Взято из https://dev.to/carlillo/understanding-itcss-real-case-using-itcss-in-a-ghostcms-blog-1p9b

но где я могу разместить мои CSS анимации?

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
          opacity: 1;
     }
 }

1 и 2 не должны генерировать CSS, поэтому я ожидаю, что номер 3 (Generic) является правильным разделом?

Кто-нибудь может подтвердить?

Answer 1

Анимации в itcss

Если анимация используется в нескольких местах, определите ее в слое Object.
Если вы используете препроссор и создаете анимацию для разных компонентов, поместите его в слой "Инструменты".
Если анимация однократная, ее следует поместить в слой Component.