1

我经常遇到以下问题：

我有类似于以下内容的标记：

<body>
  <div id="wrapper">
    <div id="header"><a href="/">home</a>
    </div>
    <div id="left-column">
      <ul>
        <li><a href="/1">one</a></li>
        <li><a href="/2">two</a></li>
      </ul>
    </div>
    <div id="main-content">
      <p><a href="#">some link</a> lorem ipsum</p>
    </div>
  </div>
</body>

大规模想象一下，通常有许多不同的导航项、段落和高级内容。

我试图遵循 OOCSS 和模块化 CSS 原则，避免基于位置的样式，但在许多情况下，CMS 不够灵活，无法在任何地方添加类。

因此，为了在 main-content 中设置所有链接的样式，我最终会这样做：

a {border:1px solid #000;}

但不知何故，我所有的链接left-column最终都带有边界。然后我必须去重写：

#left-column a {border:0;}

这是混乱的开始。对于您所做的每一项更改，a您都必须为所有“例外”添加重置样式。

然后我尝试

#main-content a {border....}

但这更糟。为什么？因为 id 是一个强大的选择器，它会覆盖 #main-content 中通常不应该应用边框的链接。

有什么建议可以在不重置的情况下进行有效的链接样式设置吗？如果 CSS "Scope" 还不是候选发布模块，CSS 原生提供了哪些工具来解决这个问题？例如，规则的出现顺序会有所帮助吗？

4

2 回答 2

2

您的许多问题可以通过简单地不使用 ID 来避免/严重否定，或者至少不将它们包含在您的 CSS 选择器中。

编写高效的 CSS 是几乎每个新项目都必须克服的障碍。没有一种确定的方法可以做到这一点。项目越大，OOCSS 的效率就越高，虽然这通常是很好的实践，但不要想太多。

有许多工具或方法可以考虑编写高效、不繁琐的 CSS。

对于初学者，请考虑使用子选择器而不是常规后代选择器来仅选择直接子代而不是所有子代。这通常会完全阻止旧 CSS 进入新添加的模块。

其次，关于锚链接的主题，考虑你想要选择什么样的链接。您要选择所有锚链接，还是只选择段落文本中的锚链接？在这种情况下，您不需要编写全局类型选择器（如a { border: 1px solid #000; }），因为它还包括其他链接元素。

您所有的文本链接都在段落中，对吗？然后选择作为段落子级的锚链接通常可以证明足够p a { border: 1px solid #000; }：如果它仍然过于全局，请在选择器中使用近亲的类名将其限制在主要区域。

于 2013-05-23T16:00:46.187 回答
1

由于您遇到的特殊性问题，这些天我倾向于很少使用 id。在大多数情况下，一个类就足够了。如果您出于性能原因使用 id，则不要使用，因为现实世界的好处可以忽略不计。
在上面的代码示例中，我们还看到使用的名称表示非常特定的布局位置。而是使用描述元素功能/目的的语义名称。也尝试利用新的 HTML5 元素。它们赋予标记更多意义，并提供更多挂钩来设置页面样式。 

<body>
    <section class="wrapper">
        <header class="site-header"><a href="/">home</a> </header>
        <nav class="main-nav">
            <ul>
                <li><a href="/1">one</a></li>
                <li><a href="/2">two</a></li>
            </ul>
        </nav>
        <main>
            <p><a href="#" class="emphasis">some link</a> lorem ipsum</p>
        </main>
    </section>
</body>

一个人应该自下而上地构建你的风格：从基本 -> 到更复杂。我们在这里看到的是基本标签样式不仅仅包含基本样式。这是要避免的。下面是一种渐进式方法，可以更好地利用 CSS 中的 Cascade。

a {color:red; font-family:coolfont,arial;}
.emphasis {border:1px solid #000;} /* or */
main a {border:1px solid #000;}
于 2013-05-23T15:57:22.177 回答