ITCSS - где размещены классы, специфичные для страницы

Question

Я использую ITCSS для структурирования своих стилей.Теперь у меня есть страница с изображением, где мне нужно, чтобы ее максимальная высота была 512 пикселей.Это свойство относится к изображению на этой странице, поэтому, используя ITCSS, куда мне поместить это свойство?Изображение имеет класс img-Fluid Bootstrap.Другой вопрос: с помощью ITCSS я могу создавать стили для определенных страниц или организовать свои стили, используя структуру, «навязанную» ITCSS?

Answer 1

Это зависит от того, сколько у вас стилевого оформления.

Один из способов - оформить изображение как вариант изображения.Используется как <img class="c-img c-img-fixed-hero" src="/path" />".

.c-img {} // general image styling
.c-img--fixed-hero {} // special styling for this use case

Другой способ - создать компонент страницы и использовать модификаторы для применения отдельных стилей для каждого варианта.

// shared page styling
.c-page {} 

// unique home styling    
.c-page--home { 
  .c-img {} 
}

// unique about styling
.c-page--about { 
  .c-img {} 
}