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 ?
