Важен ли CSS! В качестве модификатора BEM?

Question

Имея элемент с некоторым стилем и дополнительным классом (mywidget_button - disabled), который работает как модификатор BEM, имеет ли смысл на практике использовать предложение ! Important?

.mywidget__default ~ .mywidget__button {
    border: 1px solid #000;
}

.mywidget__button--disabled {
    border: 1px solid transparent !important;
}

Первый класс более специфичен и выигрывает у второго, но, будучи классом отключения, модификатором, который (теоретически) должен иметь больший приоритет, чем "общий" стиль, правильно ли полагаться на условие ! Important?

Или это делает код склонным к головной боли спагетти?

Answer 1

Я лично предпочитаю использовать BEM с пространствами имен, а затем связывать временные состояния с другими классами, что, в свою очередь, увеличивает специфичность.

У Гарри Робертса из CSS Wizardry есть несколько замечательных ресурсов, которые освещают эти более сложные ситуации. Пространства имен, тематика и общие рекомендации.

Не видя ваш конкретный проект, трудно сказать, какой может быть лучший подход, но либо цепочечный класс состояний, либо служебный класс - который учитывает! Важный - должен работать хорошо. Это, конечно, если вы решили поднять BEM на ступеньку выше с этими дополнительными методами.

Answer 2

Есть только две веские причины, которые я могу придумать навсегда, используя `! Важное``

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

• во время отладки, чтобы подтвердить, действительно ли селектор, который вы редактируете, выбирает то, что вы хотите. Вы можете сделать что-то вроде background: #f00 !important; и будь почти уверен, в правильном ли ты месте. Такая декларация имеет очень высокую вероятность игнорирования любой неконтролируемой специфики.

Используя БЭМ, вы никогда не должны использовать !important контролировать любой код, который вы написали. С классами БЭМ вы добавляете один класс на все и имеете длинный список классов без вложений в вашем CSS. Интервал имен уникален и имеет четко определенную модульность. В результате у вас нет утечек стиля и проблем специфичности, которые являются основными ошибочными причинами использования !important,

Answer 3

Конечно, лучше никогда не использовать!

Соглашение о присвоении имен БЭМ должно применяться как можно более широко, чтобы избежать необходимости решать подобные проблемы.

Главное преимущество БЭМ заключается в том, что он нацелен на элементы на очень точном уровне, немного грустно сочетать его с важным!.

В этом случае я бы попытался найти решение без.mywidget__default ~, чтобы кнопка.mywidget__ могла быть объявлена ​​сама по себе, но в вашем случае это невозможно.

Answer 4

Я думаю !important в порядке Лично я стараюсь не писать конкретное, как ваше первое правило, если бы я это сделал, я бы, вероятно, пошел с

.mywidget__button.mywidget__button--disabled {
    border: 1px solid transparent;
}

Answer 5

! важные декларации не должны использоваться, если они не являются абсолютно необходимыми.

Я бы сказал, не используйте его, например, я в настоящее время добавляю отключенную кнопку во всплывающем окне с предупреждением, эта кнопка теперь нуждается в красной рамке вместо прозрачной, и это было бы невозможно, если бы у меня был! Важный на отключенной кнопке

Answer 6

Основываясь на моем опыте! Вы можете создавать проблемы, когда несколько веб-частей имеют свои собственные таблицы стилей. Лучше всего избегать использования! Важное в CSS, так как оно может переопределять другие стили, если ваши селекторы специфичны, вам не нужно использовать! Важный.