Я использую ITCSS для моего последнего проекта.
Слои треугольника следующие:
- Настройки - используются с препроцессорами и содержат шрифты, определения цветов и т. Д. В этом слое обычно задают переменные, которые можно настроитьtemplate.
- Инструменты - глобально используемые миксины и функции.Этот слой используется только в том случае, если мы используем препроцессор в качестве SASS.
- Generic - сброс и / или нормализация стилей, определение размера блока и т. Д. Важно отметить, что это первый слой треугольника, которыйгенерирует CSS.
- Elements - стилизация для простых элементов HTML (таких как H1, A, header, footer и т. д.).Они поставляются со стилем по умолчанию из браузера, поэтому мы должны переопределить их здесь.
- Объекты - селекторы на основе классов, которые определяют недекорированные шаблоны дизайна, например, медиа-объекты, известные из OOCSS, такие как list, radio-button.
- Компоненты - специфические компоненты пользовательского интерфейса.Компоненты нашей страницы, например, кнопка, карточка, конкретный список и т. Д.
- Утилиты - утилиты и вспомогательные классы с возможностью переопределения всего, что идет раньше в треугольнике.
Взято из 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 (универсальный) является правильным разделом?
Кто-нибудь может подтвердить?