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 {} 
}