[SOLVED] ITCSS - Where put classes specific for a page

ITCSS - Where put classes specific for a page

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?

Solution

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