Целевой CSS и HTML-презентация класса - PullRequest
Новая
       16

Целевой CSS и HTML-презентация класса

0 голосов
/ 07 января 2019

Итак, у меня есть два рабочих решения, но я смотрю, что лучше всего сделать в 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.

В целом, правильный ответ - это тот, который создает легко читаемый код, который семантически корректен, хорошо работает и поддерживает удобочитаемость. Тем не менее, самое основное, должен ли я стилизовать элементы напрямую, используя миксины, которые нацелены на структурное имя класса, или добавить стилизованные имена классов, которые автоматически наследуют стили?

p.s. Я знаю, что мой пример не использует практики БЭМ, но я бы хотел двигаться в этом направлении, основываясь на ответах.

...