search

robhrt7 / MCSS

[Frozen] Multilayer CSS organization methodology
http://operatino.github.io/MCSS/
312 stars 43 forks source link

Уровни модификации #21

Closed IgorLesnevskiy closed 7 years ago

IgorLesnevskiy commented 7 years ago

Добрый день. Насколько я понимаю, проект не развивается, но, тем ни менее, я продолжаю юзать MCSS) Вопрос по уровням модификации. Предположим, что у меня есть такой блочок:

.b-widget
      .b-widget__title
      .b-widget__line

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

.b-widget b-widget_type-filter
      .b-widget__title
      .b-widget__line

При этом через этот модификатор я увеличиваю margin в &__line. Также в этой модификации есть особая линия, у которой особые отступы. Она есть только к модифицированной панельки. Т.е. мне нужно дописать модификатор к линии, который по идеи должен работать только, когда есть модификатор виджета. Каким образом мне его оформить? Сначала я сделал так:

.b-widget b-widget_type-filter
      .b-widget__title
      .b-widget__line
     . b-widget__line b-widget_type-filter__special-line

Однако тут начинаются проблемы с каскадом, т.к. родительский модифицированный селектор каскадом перекрывает одиночный селектор. Надеюсь смог объяснить. Как мне поступать в таких случаях?

XOP commented 7 years ago

Здравствуйте!

Я давно работал с MCSS, сейчас работаю преимущественно с модулями, где каскада в том виде, что вы описали - нету. Могу предложить несколько вариантов, но не все они впишутся в парадигму методологии.

  1. Перекрытие каскада
b-widget_type-filter
   b-widget__line { ... }

b-widget_type-filter
    b-widget_type-filter__special-line { ... }
  1. Использование :not()
b-widget_type-filter
   b-widget__line:not(b-widget_type-filter__special-line)
  1. Использование вложенных модулей (смена контекста)
b-widget b-widget_type-filter
    b-widget__line
        b-filter-special-block
  1. Вариация (3) - использование утилит
b-widget b-widget_type-filter
    b-widget__line
        u-mt-s

Есть наверное еще пара десятков вариантов, но лучше стремиться к уходу от каскада, дальше будет только сложнее. Надеюсь, чем-то помог. 👍

IgorLesnevskiy commented 7 years ago

добрый вечер!

в принципе, вариант с :not кажется приемлемым, хоть и отдает костылем. но, в целом, это лучше, чем вешать important. Спасибо!

robhrt7 commented 7 years ago

Спасибо, Женя, что ответил.

Помимо импортант, есть еще один трюк с добавлением :root .selector {}, где этих самых :root может быть несколько - :root:root .selector {}. Выглядит не так что бы очень, но повышает специфичность и не так плох как !important.