构建基于html的大型项目的最佳实践

Question

我开发基于Rails的网站,喜欢使用部分内容来处理一些常见的"组件"

最近,我遇到了一个问题,即CSS干扰.

一个组件的样式(在css中描述)会覆盖另一个组件的样式.

例如,一个组件有......

<ul class="items">

......而另一个组件也有它.但是这个ul在这两个组成部分中有不同的含义.

另一方面,我想从一个组件"继承"另一个组件的某些样式.

例如:让我们有一个名为"post"的组件

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

还有一个名为"new-post"的组件:

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

帖子和新帖有类似的东西("帖子的东西"),我想制定CSS规则来处理"帖子"和"新帖子"

新帖子有"子组件",例如 - 编辑工具,它还具有:

<ul class="items">

这是CSS规则开始干扰的地方 - 针对ul.items(在post和new-post中)的一些规则应用了新帖子的子组件,称为"工具"

一方面 - 我想继承一些风格

另一方面,我希望获得更好的封装

避免此类问题的最佳做法是什么？

Answer 1

使用继承对您有利.

.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 */ }

如果你想要.post列表和.new-post列表来共享一个样式,理想的方法是添加第二个类,两个共享和样式.

<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>