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 ?
