@9StarRu

Как подключить сторонние стили внутри файла css для одного блока?

Создаю виджет для подключения на сторонние сайты.
Виджет делаю на bootstrap широким, чтобы можно было вставлять под новости на сайтах и чтобы при необходимости он сам уменьшался до нужного размера, к примеру, если вставить его в боковую панель сайта.
f63412da2dad6595932d8c89e8ced219.png
Столкнулся с проблемой конфликта стилей, при встраивании в сторонние сайты, стили основного сайта портятся, сайт съезжает и становится кривым.

Как правильно создать виджет со своими стилями, чтобы они не портили основной сайт?

Вызываю виджет так:
<div id="wrgsv" class="yashare-auto-init"></div>
<script src="http://site.com/widget/widget.js" type="text/javascript"></script>
<script type="text/javascript">wrgsv.init();</script>

Добавил к блоку класс yashare-auto-init
Далее в подключаемом файле стилей пишу стили так:
.yashare-auto-init body {
	color: #666666;
	font-size: 13px;
	line-height: 23px;
	background: #fff;
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
}
.yashare-auto-init h1,
.yashare-auto-init h2,
.yashare-auto-init h3,
.yashare-auto-init h4,
.yashare-auto-init h5,
.yashare-auto-init h6 {
	color: #666;

т.е. данные стили влияют только на блок yashare-auto-init - то, что нужно.
Можно как-то в этот блок подключить сторонние стили? Чтобы они работали только для данного блока.

Подключаю так:
@import "http://selection-studio.com/downloads/Razrabotka/mega-elements-bootstrap/ui/css/bootstrap.min.css";
@import "http://selection-studio.com/downloads/Razrabotka/mega-elements-bootstrap/ui/css/font-awesome.min.css";
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600');

стили портят основной сайт, как приспособить их для блока yashare-auto-init не знаю.

Направьте в нужном направлении )

Спасибо!
  • Вопрос задан
  • 462 просмотра
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Не надо использовать bootstrap, он переопределяет стили многих базовых элементов. Ваш виджет быстро стилизовать и без него.
В остальном, для изоляции можно использовать БЭМ. Стили лучше называть с заглавной буквы по названию вашего виджета:
My-Widget__item {

}

и тд. Это должно с 99.9% вероятностью исключить возможные конфликты.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы