Как мне поддерживать модульность с помощью миксинов?

Question

Как мне поддерживать модульность с помощью миксинов?

0

Я создаю библиотеку микширования SASS для моей команды, чтобы использовать в выбранных классах CSS. Я понимаю, что предотвратить загрязнение стилей сложнее, чем я думал.

Без препроцессора мне легко отделить эти два стиля

.button { color: red; }
.link { color: blue; }

Теперь я хочу создать mixins для каждого стиля

@mixin button()
  color: red

@mixin link()
  color: blue

Кажется довольно простым, но я не могу контролировать, как микшины будут назначены классам. Пользователь может сделать это:

SASS

.btn
  @include button()

ul.nav > li > a
  @include link()

HTML

<ul class="nav">
  <li>
    <a href="">Home</a>
  </li>
  <li>
    <a class="btn" href="">Save</a>
  </li>
</ul>

Теперь кнопка наследует стили ссылок. Конечно, есть несколько вещей, которые я могу сделать с CSS, чтобы "сражаться" с этим наследованием, но меня больше интересует общая техника для стилей mixming namespace (если возможно).

Adam Grant 14 апр. 2014, в 22:10

Источник

Теги:

html

sass

css

mixins

1 ответ

Ещё вопросы

Adam Grant · Accepted Answer · 2014-04-14T18-15-00.000Z

Поработав над этим некоторое время (задолго до публикации этого вопроса), я опубликую свое собственное административное решение, если не полное решение:

Обеспечьте в своем стиле, что выбор голого элемента (например, " div {...}) не разрешен. Пользователям необходимо будет сделать следующее:

SASS

@mixin button()
  color: red

@mixin link()
  color: blue

.btn
  @include button()

ul.nav > li > a.nav-link
  @include link()

К сожалению, это добавляет больше классов в HTML.

Обновить

Я ненавидел вышеупомянутый метод. Прямые селекторные потоки по всему месту плотно соединяют близость элементов.

Самый чистый способ, который я могу решить для решения этой проблемы, - это избегать контент-описательных классов для элементов (в отличие от блоков).

В конце концов, блоки, такие как navbars и modals, могут означать всевозможные вещи, но какой еще класс вам нужен, чтобы описать кнопку? Возможно, mixins на кнопке следует отложить до модификаторов на кнопке.

.button
  // This has already been defined by the underlying framework.

.button.send-form
  @include button-primary()
  // This is a special button so we'll move in the primary color and a drop shadow.