Как убрать объединение стилей в консоли разработчика Google Chrome?

Question

[Spawnet]

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


.form-horiz - это форма, которая находится в горизонтальном положении. Её стили в самом файле main.css находятся очень далеко.
.trip-container - это общий блок, который задаёт границы и в котором находится вся секция.
.trip-block - это уже конкретный блок с контентом, которые могут изменяться как уже угодно.

Так вот, есть ли возможность это убрать в Chrome? Совершенная глупость. Если я хочу убрать max-width только у .trip-block то максимальная ширина пропадает сразу у форму и вообще у контейнера. И там такая каша происходит...
Неужели нужно каждый раз прописывать стили заново в область element.style, для того, что бы с ними работать?

Comments

[shmatuan]

объединить стили у совершенно разных элементов, из самых разных мест документа

Как написано в css, так и выводит, хром сам ничего не объеденяет -_-

[sim3x]

Зайдите в scss файл и посмотрите зачем и как там все сделано

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

[HAbRAhabp]

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

[Spawnet]

shmatuan, sim3x, HAbRAhabp, Ребят, вы что, не видели скриншот??? У меня 3 элемента которые выполняют СОВЕРШЕННО РАЗНЫЕ функции, у них отличаются классы, они находятся в разных местах (только .trip-container - родитель, и .trip-block его дочерний и всё, форма там вообще рядом не стоит) и уних РАЗНЫЙ CSS код, который пересекается лишь в некоторых параметрах. Но в Chrome и других браузерах СОВЕРШЕННО РАЗНЫЕ КЛАССЫ перечислены через запятую! И ещё раз для "опытных" если я хочу убрать фиксированную ширину ТОЛЬКО У ОДНОГО, то убирается у ВСЕХ ТРЁХ. Вопрос - можно ли как-то это отключить? Я не просил тут судить мой css код, а спрашиваю про техническую сторону браузеров.

[Spawnet]

HAbRAhabp, Как мне указать только один селектор, если мне нужно задать max-width трём разным элементам?

[sim3x]

Spawnet,

Откройте указанный файл и отредактируйте его
Пересоберите проект

Если вам нужно просто на лету сменить в браузере цсс наведите курсор на блок, там появятся три точки, нажмите на них, потом нажмите плюс Insert style rule below

Ваш вопрос не имеет прямого отношения к браузеру

[Spawnet]

shmatuan,

И что вы тут можете сказать? 3 совершенно разных элемента, которые находятся в разных местах в html коде, у них разные строчки кода в css файле, у них всё вообще разное, кроме одного единственного css параметра.

[HAbRAhabp]

Spawnet, возможно, у вас в конфиге SCSS стоят оптимизации веса которые объединяют одинаковые правила.

[Spawnet]

Что и требовалось доказать. Сколько мы здесь насчитали? 6 разных классов и он объединился лишь по тому, что у них у всех display: flex. Вот зачем так делать? Зачем внедрять такую функцию в консоль разработчика?
Я хочу отменить display: flex только у .quiz-variants-top, но все классы, которые указаны выше тоже потеряют flex, и на странице начнётся сущий ад!