Question

我有一个导航栏和以下HTML标记：

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="about-us.html">About</a></li>
        <li><a href="#about">Why Join</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>

    </div><!--/.nav-collapse -->
  </div>
</nav>

现在，所有css选择都以.navbar类开头？例如

.navbar .navbar-header

.navbar .navbar-brand

.navbar .navbar-right

我的问题是假设你有一个部分，比如说画廊，它有一个.gallery类作为最上面的父元素。现在应该使用基本选择器的.gallery类来设置本节中列出的所有元素吗？这是一个很好的约定吗？如果不是什么是更好的约定？什么是更好的css选择器约定，尤其是在构建大型站点时？

Answer 1

我的观点不是，你不应该在你的选择器前加上.navbar，因为高特异性通常是一个坏主意，导致代码维护较少。如果我正确理解你的问题，一个建议就是设置这样的css。

//For common styling
.navbar-header{}

//For the styles specific to your code snippet
.navbar-header--top {}

//For the styles specific to your gallery code 
.navbar-header--gallery {}

然后在你的HTML中你会做

<div class="navbar-header navbar-header--top">
<div class="navbar-header navbar-header--gallery">

对于为什么以及您可能感兴趣的其他一些原则，这有更为彻底的解释。

http://cssguidelin.es/#css-selectors

Answer 2

它会起作用，但这是不必要的。 .navbar-header已经足够具体了。如果您将所有课程的范围都放在.navbar下，那么您需要添加额外的特殊级别，以及每个不需要的声明的八个额外字符。

如果您尝试为导航栏设置唯一的通用类样式，例如.icon-bar，则需要额外的特异性级别，或者这些元素的唯一类名。

话虽如此，你可能想知道为什么你会看到其他人添加基类，例如.navbar .navbar-default。在此示例中，.navbar将应用基本样式，.navbar-default将扩展该样式并添加新样式。

应该将一个基类用作css中的Hook吗？

2 个答案: