ITCSS - 将 类 特定于页面的位置

Question

我正在使用 ITCSS 来构建我的样式。现在我有一个包含图像的页面，我需要它的最大高度为 512 像素。这个 属性 特定于该页面中的图像，所以使用 ITCSS 我应该把这个 属性 放在哪里？该图像具有 Bootstrap 的 class img-fluid。另一个问题是，使用 ITCSS 可以为特定页面创建样式，还是应该使用 ITCSS 的 "imposed" 结构来组织我的样式？

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