Как отладить проблемы специфичности CSS?

Question

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

Часто мне нужно стилизовать определенный элемент на странице, например <input>, и я не могу понять, как написать селектор, который на самом делеработает.Возможно, входные данные были созданы динамически с помощью некоторого Javascript, и, возможно, CSS применен программно.

Так что я иду в Firefox Web Developer, нажимаю на элемент и вижу кучу классов CSS.Я создаю правило:

.myCustomClass {
  color: red;
}

помещаю myCustomClass в тег class = "" в <input> и ... ничего.

Я думаю, мне нужно добавить его префикскак это:

.someOuterClass .someInnerClass .myCustomClass {
  color: red;
}

но это редко работает.Иногда я сдаюсь и добавляю !important.Иногда это работает, а иногда нет.

Итак, мой вопрос, могу ли я изучить классы, которые я вижу в Web Developer, и каким-то образом вывести правило, достаточно конкретное, чтобы оно всегда работало?

Я читал о специфике, но это не помогает.

Answer 1

Специфика иногда бывает PITA, особенно когда другие сторонние библиотеки добавляют что-то в микс.

Вот несколько вещей, которые вы можете попробовать:

• Обязательно добавьте свои стили в END CSS. Теоретически , вы можете повлиять на порядок, в котором Webpack включает CSS (я никогда не пробовал)

• Добавить ID, а не class к оболочке снаружиэлементы, которые вы хотите изменить.Затем укажите этот идентификатор в цепочке CSS, например: #myAppID .className .subClassName {} В основном идентификаторы сильнее классов в специфике CSS.Я бы попытался сделать это на уровне страницы / представления, чтобы облегчить жизнь.

• Если элементы уже получают классы (как вы видите их в инспекторе), попробуйте повторно использовать эти классы сваш "переопределить" CSS.Если классы являются модульными (имеют случайный суффикс, такой как someClass__34xft5), вы не должны использовать эти точные классы, поскольку они могут измениться, если исходный код перекомпилирован.В этом случае используйте «совпадающий» селектор [class^=”someClass__”], чтобы сопоставить любой селектор с этим префиксом.

Не уверен, насколько глубоко вы хотите зайти, но вот статья о переопределении встроенного стиля Amplify-Vue.

Одно предостережение: если CSS где-то добавляется встроенным через javascript, переопределить его будет очень сложно.Возможно, вы захотите использовать !important в сочетании с вышеуказанным.

Answer 2

"... могу ли я изучить классы, которые я вижу в Web Developer, и каким-то образом вывести правило, достаточно конкретное, чтобы оно всегда работало?"

Возможно, но зачем беспокоиться?Вы уже добавляете атрибуты класса к элементам.Почему бы не добавить атрибуты встроенного стиля вместо этого?Добавление связки классов или идентификаторов просто для создания цепочки специфики, чтобы подправить стили, довольно грязно ... встроенные стили едва ли вообще хуже и понятнее для понимания.

Встроенные атрибуты являются наиболее конкретными инструкциями CSS, которые вы можете дать.