Использование БЭМ CSS с директивами Angular

Я использую CSS в стиле БЭМ для стилизации своих угловых директив и обычно использую replace: true, чтобы мой класс уровня блока мог находиться в «корне» пользовательского элемента. Это делает так, что я могу писать весь свой CSS в основном с помощью классов.

Однако replace: true иногда вызывает проблемы (с двумя ng-if и т. д.) и теперь помечен как устаревший. Так что я начинаю пытаться держаться подальше от замены полностью.

Но теперь у меня возникли проблемы с применением БЭМ к этим элементам, которые имеют фактический пользовательский тег DOM — теперь мне приходится использовать имя тега вместо имени класса, что означает, что я больше не могу использовать БЭМ (поскольку я мне придется использовать имя тега, так как я не могу применять классы непосредственно к моему элементу в моем шаблоне). Кроме того, использование модификаторов для моего пользовательского элемента теперь кажется невозможным, как и использование одноуровневых селекторов CSS.

Вот пример, который, надеюсь, проиллюстрирует то, что я имею в виду:

Директива:

angular.module('my.module')
  .directive('customElement', function() {
    return {
      restrict: 'E',
      scope: {
        isSpecial: '='
      },
      template: '<div class="custom-element" ng-class="{\'custom-element--special\': isSpecial"></div>'
    };
  });

CSS:

.custom-element {
  background-color: white;
}

.custom-element--special {
  background-color: red;
}

.custom-element--special + .custom-element--special { // this won't work without replace: true
   background-color: blue;
}

Если я использую replace: true, все работает, как и ожидалось (но тогда возникают собственные головные боли).

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

Я всегда мог бы добавить классы к элементу в функции postLink, но это делает шаблон менее понятным.

Есть ли у кого-нибудь опыт использования БЭМ с angular и использования классов вместо имен тегов в ваших пользовательских директивах? Что вы сделали, чтобы решить эту проблему?


css angularjs angularjs-directive bem
person Paul    schedule 01.05.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

я знаю, что это проблема с replace:false для удобочитаемости.

Фактическая проблема заключается в том, что нам нужен наш OOCSS, но вы работаете с компонентами Angular с пользовательскими тегами, имеет объекты CSS, а не кейс.

Для этого нет практического решения, я не буду рекомендовать вам начинать добавлять классы на функцию postLink.

Однако то, что мы привыкли делать, это рассматривать пользовательский тег как собственный объект CSS, помимо внутренней структуры объекта. Вынуждает нас реализовать дополнительный класс CSS для пользовательского тега.

block-context
  block-context__element 
    custom-element

Зачем это делать, когда block-context__element является избыточным классом?

  • Поскольку остальную часть вашей БЭМ-структуры вы будете поддерживать, блок custom-element должен иметь значение сам по себе, а элемент block-context__element не ожидается, вам следует абстрагировать объекты CSS от реализации директивы, если вы в какой-то момент начнете изменять ваши html-компоненты, ваши классы должны по-прежнему применяться.

Я надеюсь, что этот ответ поможет вам

person Matias Fernandez Martinez    schedule 01.05.2015