Как ограничить действие css фреймвока в рамках одного div?

Question

[antirek]

Пишу скрипт, который подключается на любую страницу. Скрипт формирует html, который необходимо стилизовать css. Для красоты хочется взять какой-нить готовый css фреймворк. Например, min. Но если его просто подключить, то заодно изменится и вся страница. А надо бы ограничить его влияние в рамках одного div. Как это можно сделать? С помощью LESS? У mincss есть less версия. Покажите, пожалуйста, пример как это реализовать, по возможности : )

Answer 1

[Илья]

Как вариант - вставлять сформированный html в <iframe>, таблица стилей будет действовать только внутри него.

Answer 2

[Евгений]

Только . Но зачем вам css фреймворк, если внутри одно div все стили уложатся максимум в 20-30 селекторов?

Comments

[antirek]

Ну, сначала 20, затем 30. хочется что-то впихнуть, чтобы потом использовать и не заморачиваться с добавлением новых штук. Сейчас попробую less'ом обернуть mincss. Далее будет использование форм, разных уведомлений, поэтому заготовок mincss хватит, там кстати немного css, который еще можно и поделить. не так много как в bootstrap.

[Евгений]

Тогда iframe, без вариантов, или сделать так, чтобы стили не пересекались, навесить на div уникальный id, добавить его в селекторы mincss.

Answer 3

[Goodzonchik]

Можно обернуть весь фреймворк в один селектор, взять css версию фреймворка, сменить разрешение у него на less (сказать отдельное спасибо полной совместимости), потом поместить все в один Id, чтобы наверняка (своего рода большая миксина в less) и потом преобразуем каким-нибудь компилятором (типа Koala) в css.

Примерно так должно быть в виде Less

#iD дива{
А здесь в формате css находится фреймворк типа bootstrap
}