Best method for handling same nested block with different modifier? about suit

[giuseppeg]

This method also seems to reintroduce a CSS specificity battle that (I think) BEM tries to avoid.

BEM and SUIT are pretty much the same thing just with different naming convention. SUIT is also backed by tools and a better (imho) formalized methodology.

I wonder how I might avoid this situation? Should the ContentList-item elements be their own standalone block? Or maybe I should use an element modifier instead (ContentList-item--small)?

I think that the former might work better. Not sure if you are familiar with React but when in doubt I ask to myself: "how would I do that with React components". In this case the answer is similar to your solution I guess:

<ContentList>
   <ContentListItem small />
</ContentList>

[oleersoy]

Or just use a margin utility to tweak the css as needed. Margin utility examples here - see test 4

[frekyll]

@rmunch Since you have limited flexibility, I would resort to making the items their own component. In this example I used the shared namespace, but that doesn't matter. What matters is that the styles don't leak in this example.

<div class="ContentList">
    <div class="ContentListItem ContentListItem--large">Content 1</div>
    <div class="ContentListItem ContentListItem--large">Content 2</div>
    <div class="ContentListItem ContentListItem--large">
        <div class="ContentList">
             <div class="ContentListItem">Small content 1</div>
             <div class="ContentListItem">Small content 2</div>
        </div>
    </div>
</div>

.ContentListItem {
    margin-bottom: 10px;
}

.ContentListItem--large {
    margin-bottom: 30px;
}

I also created a third-party SUIT CSS utilities package for quickly adding space around objects.