ITCSS - Where put classes specific for a page

Question

I'm using ITCSS to structure my styles. Now I have a page with an image where I need that its max-height would be 512px. This property is specific for the image in that page, so using ITCSS where should I put this property? The image has the class img-fluid of Bootstrap. Another question is, using ITCSS could I create styles for specific pages, or should organize my styles using the structure "imposed" by ITCSS?

Answer 1

It depends on how much page specific styling you have.

One way is to style the image as a variation of image. Used like <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

Another way is to create a page component and use modifiers to apply seperate styles for each variation.

// shared page styling
.c-page {} 

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

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