View all rules

S6 Multiple components called in single class="" statement

This problem occurs in the HTML, not in the CSS. It is best to not mix up components and write things separately, as this can cause override problems, since ITCSS components have the same level of CSS specificity.

    
@import "c-component-a";
@import "c-component-b";
    
    
<div class="c-component-a c-component-b"><div>
    
    
.c-component-a {
    display: block;
}
    
    
.c-component-b {
    display: flex;
}
    
    
@import "c-component-a";
@import "c-component-b";
    
    
<div class="c-component-a">
    <div class="c-component-b">
    </div>
<div>
    
    
.c-component-a {
    display: block;
}
    
    
.c-component-b {
    display: flex;
}