Как избежать конфликта стилей css?

Question

[Shing]

У страницы есть свои стили.
И в нее инклюдятся другие html блоки со своими стилями.
Как избежать конфликта стилей, как их изолировать?

Answer 1

[alex]

БЭМ

Answer 2

[Михаил Захаров]

Что ты подразумеваешь под конфликтами? Блоки со своими стилями в html имеют высший приоритет перед стилями в css, но ты можешь поменять приоритет добавив к стилям css - !important. Например:
background: #fff !important;

Comments

[Shing]

у страницы свой link rel='stylesheet' style.css
в нее вставляются html блоки, у каждого блока внутри свой <style></style>, названия могут повторяться, ну и img, a, h1 и прочее, и настройки соответственно разные.

[Михаил Захаров]

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

[Руслан Полин]

Shing: стили предпочтительно выносить в отдельный файл, а не пихать их в html. Для тех кто так делает заготовлен отдельный котел, ибо поддерживать такой проект - ужасный сон.
Плюс никто не отменял БЭМ.

[Shing]

у меня на основной странице <div id="block1"></div>

и сюда уже вставляется аяксом HTML код нужный.
то есть вы считаете, что оно не должно конфликтовать в таком случае?

[Shing]

проверил, конфликтует. переписывает стиль того же тега h1 если он есть и там и там.

[alex]

Shing: вы чего-то другого ожидали?

[Shing]

Alex: вопрос не в ожиданиях, а как это можно предотвратить?
один из вариантов уникальные имена, все переименовывать.

[alex]

Shing: ну так это же очевидно) что тут обсуждать можно?

можно так например сделать:

.block1 img {...}
.block1 h1 {...}
.block1 h2 {...}
.block1 ...
...

.block2 span {...}
.block2 h2 {...}
.block2 p {...}
.block2 ...
...

только нужно следить чтобы на странице не было двух одинаковых блоков

[Сергей delphinpro]

Shing:

один из вариантов уникальные имена, все переименовывать.

Это единственный вариант на сегодняшний день, пока не пришла эра web components и shadow dom.
Css глобален по своей сути.