Best practice for structuring a large project based on html
I am developing a Rails website using partial data for some common "components"
I recently ran into a problem that is consistent with CSS noise.
Styles for one component (described in css) override styles for other components.
For example, one component has ...
<ul class="items">
... and there is another component too. But this ul has a different meaning in the two components.
On the other hand, I want to "inherit" some of the styles for one component from another.
For example: Let's say we have one component called "post"
<div class="post">
<!-- post stuff -->
<ul class="items">
...
</ul>
</div
And another component called "new-post":
<div class="new-post">
<!-- post stuff -->
<ul class="items">
...
</ul>
<!-- new-post stuff -->
<div class="tools">...</div>
</div
Post and new-post have something similar ("post stuff") and I want the CSS rules to handle both "post" and "new-post"
The new message has "subcomponents" like editing tools, which also have:
<ul class="items">
This is where CSS rules start to interfere - some rules targeting ul.items (in post and new-post) apply a new-post subcomponent called "tools"
On the one hand - I want to inherit some styles
On the other hand, I want to improve the encapsulation
What are the best methods to avoid such problems?
a source to share
Use inheritance to your advantage.
.items { /* common shared styles here */ }
.post .items { /* styles specific to item lists inside a .post div */ }
.new-post .items { /* styles specific to item lists inside a .new-post div */ }
If you want .post lists and .new-post lists to share style, the ideal way is to add a third class that contains the two generals and styles.
<style type="text/css">
.items { /* common shared styles here */ }
.post { /* styles shared by all .post divs */ }
.old-post { /* styles specific to .old-post divs */ }
.old-post .items { /* styles specific .item lists inside .old-post divs */ }
.new-post { /* styles specific to .new-post divs */ }
.new-post .items { /* styles specific .item lists inside .new-post divs */ }
</style>
<div class="post old-post">
<ul class="items">...</ul>
</div>
<div class="post new-post">
<ul class="items">...</ul>
</div>
a source to share