Как грамотно темизировать/верстать плагины для Вордпресс?

Question

[coderisimo]

Пишу плагины для WP. Даже на собственном тестовом сайте простая казалось бы разметка выглядит коряво. Например, табы , реализованные на jQeury . Как я понимаю, стили JQ UI пересекаются с собственными стилями темы WP.
Далее, если этот плагин будет ставиться на другие сайты , у которых свои темы, опять же возможны конфликты и кривизна в отображении. Как победить сие? Мне видятся варианты :
1) каким-то образом сбрасывать стили для разметки плагина и ваять полностью собственные.
2) использовать стандартные для всех тем элементы, если таковые имеются. Хотя, вот : таблицу, инпуты , кнопки я вижу, а как подступиться к тем же табам пока не придумаю.
Хотелось бы иметь возможность не бояться за разметку собственного плагина при установке на разные сайты.

Как всегда, буду благодарен за любые конструктивные предложения, кроме предложения "убиццаапстену". Эта мысль мне и так периодически приходит в голову, когда разбираюсь с очередной траблой )). Я совсем не верстальщик, хотя основные моменты верстки , разумеется знаю или могу нагуглить при необходимости.
Спасибо!

Answer 1

[coderisimo]

Я так и пытаюсь делать . A внутри :

.plugin-name .selector-a {
// styles
}

перечислять все свойства ? которые иначе чем мне нужно описаны в основной теме с !important?

Comments

[Андрей Хохлов]

!important не обязателен, скорее всего класса .plugin-name бует достаточно чтобы определить свойства правильно. Почитайте : https://css-tricks.com/specifics-on-css-specificity/
Единственно что конечно стоит более чётко прописать стили, и возможно для каких-то критичных моментов использовать !important. Посмотрите исходники популярных jquery плагинов, например.

[coderisimo]

Андрей Хохлов: вот реальный пример. я пытаюсь использовать вот такие табы : https://dl.dropboxusercontent.com/u/19954007/asks/1.jpg
у меня получается вот такое безобразие : https://dl.dropboxusercontent.com/u/19954007/asks/2.jpg
скачал стили , они изолированы в своем классе :
.https://dl.dropboxusercontent.com/u/19954007/asks/3.jpg итд.
в разметке у меня :
https://dl.dropboxusercontent.com/u/19954007/asks/4.jpg
итд. т.е я использую класс fintess_calc. в результате все равно получается коряво. возможно, например, из-за того что в заголовках табов
jquery UI генерит элементы "а" - ссылки , а они в теме WP отображаются совсем не так как в jQuery UI.
PS не могу вставить код текстом, глючит все ((((

[Андрей Хохлов]

Так в откройте инспектор кода и смотрите что и как перебивает ваши стили. Кроме того - зачем вам jQuery UI? Для тех же табов полно современным легких кастомизиремых решений. На том же гитхабе: https://github.com/search?l=JavaScript&o=desc&q=jq...

[coderisimo]

Мне нужно простое стандартное решение. JQuery UI уже есть в WP (мне нужны не только табы, их я привел просто в качестве примера).
"Так в откройте инспектор кода и смотрите что и как перебивает ваши стили" - этот вариант я и рассматриваю. Т.е просто ищу, что в основной теме определено не так как мне нужно и принудительно прописываю в своих стилях? Просто я думал что есть более простое решение.

[coderisimo]

насчет перебиваемых стилей : https://dl.dropboxusercontent.com/u/19954007/asks/5.jpg вот здесь. правильно я понимаю что там где стрелки происходит это "перебивание". А как понять где именно они "перебиваются". Сорри за ламерские вопросы
Я правильно понимаю, что то что "перебито" (переопределено) мне нужно прописать с IMPORTANT , тогда для данного элемента стили перебиваться не будут?

[Игорь Воротнёв]

> Андрей Хохлов: Кроме того - зачем вам jQuery UI?

+1. И даже не плагины, там ванильного кода строк 20.

> coderisimo: JQuery UI уже есть в WP

Он поставляется вместе с WP, но не подключается по умолчанию. Так что, считайте, что привязка к нему не обязательна.

> Просто я думал что есть более простое решение.

По сути есть только одно решение - регистрация и подгрузка своего CSS-файла, а в нем максимально точное таргетирование элементов с помощью грамотного использования специфичности CSS.

[coderisimo]

Да-да , я уже таргетирую! Там был еще один момент. когда тебе нужен стиль, ты выбираешь для каких элементов и собирается css адаптированный для текущих потребностей. Так вот в моем случае это делалось некорректно. Методом тыка я добавил еще кое-что к сборке, после чего табы заработали нормально.

Answer 2

[Андрей Хохлов]

.plugin-name .selector-a {
// styles
}
.plugin-name .selector-b {
// styles
}

Answer 3

[Дмитрий]

я делаю так
верстаю с sass, в файле main.scss добавляю такое:

.projectPrefix{
@import
	"_normalize",
	"modules/_layout",
	"modules/_editor",
	"modules/_general",
	"vendor/_wbbtheme",
...
}

получается, что все стили у меня идут как .projectPrefix div{}, .projectPrefix .title{} и тп.
соответственно, вывод плагина нужно обернуть в div.projectPrefix.

для основной массы задач этого бывает достаточно