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（在帖子和新帖子中）的一些规则应用了新帖子的子组件，称为“工具”

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

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

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

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>

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

1 个答案: