css - 我应该使用扩展还是只将类添加到 HTML 中？

Question

例如我有一个导航模块。

方法 1 将两个类添加到 HTML 中以获得所需的效果。一类用于基础，另一类用于修改。

HTML:

<ul class="nav nav-1">
  <li><a href="" class="" title="">Home</a></li>
  <li><a href="" class="" title="">Promotions</a></li>
  <li><a href="" class="" title="">Products</a></li>
  <li><a href="" class="" title="">About Us</a></li>
</ul>   

SCSS:

//BASE
.nav {      
    font-size: 0;    
    li {
        display: inline-block;
    }    
    a {
        font-size: 16px;
        display: block;
    }
}

//MODIFICATION
.nav-1 {        
    a {
        padding: 10px;
        background: #EEE;   
    }
}

方法 2 仅将一个类添加到 HTML 中以获得所需的效果。 base 被制成占位符并使用 @extend 添加。

HTML:

<ul class="nav-1">
  <li><a href="" class="" title="">Home</a></li>
  <li><a href="" class="" title="">Promotions</a></li>
  <li><a href="" class="" title="">Products</a></li>
  <li><a href="" class="" title="">About Us</a></li>
</ul>   

SCSS:

//BASE
%nav {      
    font-size: 0;    
    li {
        display: inline-block;
    }    
    a {
        font-size: 16px;
        display: block;
    }
}

//MODIFICATION
.nav-1 { 

    @extend %nav;  

    a {
        padding: 10px;
        background: #EEE;   
    }
}

问题:

虽然我发现使用扩展技术消除了向 HTML 添加多个类的需要，但我觉得它会使 CSS 膨胀。如果我有 .nav-2、.nav-3 等，生成的 CSS 将如下所示:

.nav-1, .nav-2, .nav-3 {
  font-size: 0;
}

.nav-1 li, .nav-2 li, .nav-3 li {
  display: inline-block;
}

.nav-1 a, .nav-2 a, .nav-3 a {
  font-size: 16px;
  display: block;
}

这是一个好的做法吗？或者我应该只保留方法 1？

Answer 1

这可能是也可能不是更好的做法，我对 mixin 比较陌生，但我读过它们通常是编译 CSS 时更好的选择。我没有太多时间，所以无法对此进行测试，但它似乎应该可以工作，并且希望对您来说是一个更好的选择。

例如，您可以:

@mixin my-nav($padding, $background) {
   padding:$padding;
   background:$background;
}

然后每次需要调用它时:

.nav1 {
    @include my-nav(10px, #eee);
}

.nav2 {
    @include my-nav(20px, #333);
}

希望这个编译比扩展更好，而且很有用 :)

如果这没有帮助，阅读这篇文章应该 - http://www.sitepoint.com/sass-mixin-placeholder/