css - How to prevent conflicts between css rules

Question

What is the best strategy for creating css selectors for html widgets. Those selectors should not be in conflict with child elements nor with possible general selectors.

/* this item class it is already done, has no relation with my widgets´ items
  and i can´t modify it*/        
   .item { color:red; }    

   .my-first-widget{...}
   .my-first-widget .item { color: blue; font-size:16px;}

   .my-second-widget{...} 
   .my-second-widget .item { font-size:14px;} 

Problems with the code above:

1. If I insert my-second-widget inside a my-first-widget (but not within a my-first-widget .item), the items from my-second-widget will be blue (I want them to inherit color from it´s parent).
2. I insert my-second-widget inside a project with a rule defined as .item , the items from my-second-widget will be red (I want them to inherit color from it´s parent; not from the unrelated general item´s class).

which is the best solution for styling exportable widgets?

Solution 1 (use parent class a prefix)

   .my-first-widget{...}
   .my-first-widget-item { color: blue; font-size:16px;}

   .my-second-widget{} 
   .my-second-widget-item { font-size:14px;}

Solution 2 (use child selectors)

   .my-first-widget{...}
   .my-first-widget > .item { color: blue; font-size:16px;}

   .my-second-widget{ color: black;} 
   .my-second-widget > .item { font-size:14px;}

With the solution2 i still have a conflict with the general .item selector...

Any other ideas?

Answer 1

我认为以下内容可能对您有用。

如果这是您的 HTML：

<div class="project">
    <div class="item">item outside widget</div>
    <div class="my-second-widget"><span class="item">item</span></div>
</div>

试试这个 CSS：

.item {
    color:red;
}
.my-first-widget {
}
.my-first-widget .item {
    color: blue;
    font-size:16px;
}
.my-second-widget {
}
.my-second-widget .item {
    color: inherit;
    font-size:14px;
}

.project {
}

参见演示：http: //jsfiddle.net/audetwebdesign/3eLpU/

设置color: inheriton .my-second-widget .item，这将强制嵌套.item从.my-second-widget（如果已设置）或（如果已设置）的颜色值.project或最终从主体（设置或默认值）继承颜色值。

如果存在顶级.item规则，它将在.my-second-widget.