Question

我经常遇到以下问题：

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

<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只是不够灵活，无法在任何地方添加类。

因此，为了使主要内容中的所有链接都设置为边框，我最终会这样做：

a {border:1px solid #000;}

但是，不知怎的，left-column中的所有链接都以边框结束。然后我必须去写：

#left-column a {border:0;}

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

然后我尝试

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

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

有没有重置的高效链接样式的建议？如果CSS＆＃34;范围＆＃34;还不是一个发布候选模块，哪些工具CSS原生地让我们解决这个问题？规则的出现顺序会有帮助吗？

Answer 1

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

编写有效的CSS是您必须解决的障碍，因为您执行的每个新项目都是如此。没有一种确定的方法可以做到这一点。项目越大，OOCSS的效率就越高，但虽然它通常很棒，但不要过多考虑。

要编写高效，非繁琐的CSS，需要考虑许多工具或方法。

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

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

所有文字链接都在段落中，对吗？然后选择子段到段落的锚链接通常可以证明：p a { border: 1px solid #000; }。如果它仍然太全局，则使用选择器中的close父类的类名将其限制在主区域。

Answer 2

由于您遇到的特殊问题，我现在倾向于使用ID很少。在大多数情况下，课程就足够了。如果您出于性能原因使用ID，那么请不要，因为现实世界benefits are negligible。在上面的代码示例中，我们还看到使用的名称表示非常特定的布局位置。而是使用描述元素的功能/目的的语义名称。还尝试使用新的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>

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

a {color:red; font-family:coolfont,arial;}
.emphasis {border:1px solid #000;} /* or */
main a {border:1px solid #000;}

高效的CSS：大多数情况下的样式链接，避免过度骑行

2 个答案: