Question

所以，每个人都有两个可行的解决方案，但是，我希望了解2019年的最佳做法

我创建了以下笔：https://codepen.io/anon/pen/BvxEOe

我创建的示例引用了一个具有bg-color-primary类的页脚元素，这是一种动态混合，它是通过从Bootstrap 4遍历我的主题色并将其映射到bg-color类名而创建的

第二个目标是在CSS中使用带有混合功能的块元素。

示例1：

HTML

<footer class="content-info bg-color-primary">
  <section class="container">
    <div class="row">
      <div class="col-6 col-lg-4">
        <ul>
          <li><a class="external-link" href="{!! get_permalink(17) !!}">Home</a></li>
          <li><a class="external-link" href="{!! get_permalink(29) !!}">About us</a></li>
          <li><a class="external-link" href="{!! get_permalink(11) !!}">Service 1</a></li>
          <li><a class="external-link" href="{!! get_permalink(13) !!}">Service 2</a></li>
          <li><a class="external-link" href="{!! get_permalink(15) !!}">Get in touch</a></li>
        </ul>
      </div>
    </div>
  </section>
</footer>

SCSS

// Colored Background Classes 
@each $theme-color, $value in $theme-colors {
  @include bg-color(".bg-color-#{$theme-color}", $value);
}

这只是通过将我的背景类直接放置在HTML中而起作用，这使我不必定位特定元素，但是我认为将基于样式的类名直接包含在HTML中是不正确的。

示例2：

HTML

<footer class="content-info-lower">
  <section class="container">
    <div class="row">
      <div class="col-6 col-lg-4">
        <ul>
          <li><a class="external-link" href="{!! get_permalink(17) !!}">Home</a></li>
          <li><a class="external-link" href="{!! get_permalink(29) !!}">About us</a></li>
          <li><a class="external-link" href="{!! get_permalink(11) !!}">Service 1</a></li>
          <li><a class="external-link" href="{!! get_permalink(13) !!}">Service 2</a></li>
          <li><a class="external-link" href="{!! get_permalink(15) !!}">Get in touch</a></li>
        </ul>
      </div>
    </div>
  </section>
</footer>

SCSS

footer {
    @include bg-color(primary);
}

从HTML角度来看，后者看起来更干净，但会创建许多其他CSS。

总体而言，正确的答案是创建易于阅读的代码，在语义上正确，执行良好并保持易读性的代码。但是，最基本的方法是我应该直接使用针对结构类名称的mixin设置元素样式，还是添加自动继承样式的样式化类名称？

p.s。我知道我的示例没有使用BEM做法，但是我想根据响应向这个方向发展。

有针对性的CSS与HTML类演示

0 个答案: