I develop Rails based website, enjoying using partials for some common "components"

Recently, i faced a problem, that states with CSS interference.

Styles for one component (described in css) override styles for another components.

For example, one component has ...

<ul class="items">

... and another component has it too. But that ul's has different meaning in these two components.

On the other hand, i want to "inherit" some styles for one component from another.

For example: Let, we have one component, called "post"

<div class="post">
    <!-- post's stuff --> 
    <ul class="items">
        ...
    </ul>
</div

And another component, called "new-post":

<div class="new-post">
    <!-- post's stuff -->
    <ul class="items">
        ...
    </ul>
    <!-- new-post's stuff -->
    <div class="tools">...</div>
</div

Post and new-post have something similar ("post's stuff") and i want to make CSS rules to handle both "post" and "new-post"

New post has "subcomponents", for example - editing tools, that has also:

<ul class="items">

This is where CSS rules starting to interfer - some rules, targeted for ul.items (in post and new-post) applies subcomponent of new-post, called "tools"

On the one hand - i want to inherit some styles

On the other hand, i want to get better incapsulation

What are the best practices, to avoid such kind of problems ?