Как правильно задавать стили для плагина?

Question

[Ragtime Kitty]

Привет.

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

Вопрос, следующий - как задавать стили для этого окошка и где их прописывать?
Сейчас при вызове окна я просто создаю новый <style> в голове и прописываю в нем стили через id и комбинаторы. Но мне кажется, что это не круто.
Как правильно подключать в таком случае стили? Использовать инлайн? Отдельный файл?
Какие селекторы лучше использовать? Как избежать возможных конфликтов с классами?

Ааа, сложна.

Comments

[edward_freedom]

то окошко же обычная html страница, в которой как на обычную страницу подключается стиль

[Сергей delphinpro]

У меня есть плагин для дебага.
Панелька, кнопочки, информация.
Сделан на Vue, встроенные стили, собрано вебпаком.

Удобнее и проще подключить один файл. Тем более, если речь идет о дебаге. Т.е. это не прод, а дев окружение, и совершенно всем пофиг, что там внутри файла и как оно устроено.

[Сергей delphinpro]

В плагине лучше не использовать семантические теги (p, article, strong, h1 и т.д), которые могут, и скорее всего будут стилизованы. Используйте только div и span, даже для кнопок.
Имена классов максимально уникальные. Этого можно добиться пространством имён (.my-super-plugin-classname). В случае использования Vue уникальность достигается scoped стилями.

[Ragtime Kitty]

Сергей delphinpro, ну я вот сейчас примерно так классы и называю. А как быть с тегами? label или input какой-нибудь заменить дивом не получится же

[Сергей delphinpro]

Ragtime Kitty,

[Ragtime Kitty]

Сергей delphinpro, текст-то понятно, а чекбокс, радио или селект какой-нибудь?

Answer 1

[Антон Швец]

Половина плагинов требуют подключать их стили отдельно, не создавая своего тега. Это позвляет пользователю добавлять свои стили оверрайдом или модифицировать исходные.

Но и свой <style> тоже нормально.
Чтобы избежать конфликтов сделайте родительский элемент с уникальным аттрибутом, все остальное от него каскадом.
id лучше не использовать ну или сгенерировать сильно специфичный.
Вы так можете сделать два, например, своих плагина на странице, независимых друг от друга.

Comments

[Ragtime Kitty]

А можно пример простенький?

<div my-plugin>
  <div>
    <div>
      <div></div>
    </div>
  </div>
  <div></div>
  <div>
    <div></div>
  </div>
</div>

Как вот называть вложенные блоки и какими селекторами выбирать?

[Антон Швец]

Ragtime Kitty, https://jsfiddle.net/melchiorio/px5er4ca/
Слишком большой каскад тоже нехорошо, запутаться легко. Лучше так, ну с значащими именами внутренних классов конечно.

<div my-plugin>
  <div class="block1">
    <div>
      <div></div>
    </div>
  </div>
  <div class="block2"></div>
  <div  class="block3">
    <div></div>
  </div>
</div>

и адресовать как [my-plugin] .block1

Какой-нибудь vue так делает для обеспечения изоляции стилей компонентов. Только там к каждому хтмл-элементу добавляется аттрибут с айди компонента и адресуется типа [my-plugin].block1

[Ragtime Kitty]

Антон Швец, а если в стилях страницы будет .block1, как тогда быть?

[Антон Швец]

Ragtime Kitty, https://jsfiddle.net/melchiorio/px5er4ca/17/
на block1 в вашем плагине повлияют те стили со страничного block1, которые вы не определили. Вот в этом примере color. Чтобы такого не происходило можно указать все значимые стили явно или использовать селектор с редким именем. - my-plugin__block1.
Ну т.е. с одной стороны врядли кто-то укажет класс my-plugin__block1, с другой стороны мы все еще сохраняем уникальность стиля внутри этого плагина за счет каскада.
Стили из плагина на страницу не повлияют.

пример
https://jsfiddle.net/melchiorio/px5er4ca/23/

[Ragtime Kitty]

Антон Швец, ну, указывать явно все стили, которые могут поломать плагин я точно не буду.
Т.е. самый разумный вариант это вот так?

[my-plugin] .my-plugin__block1 {}
[my-plugin] .my-plugin__block2 {}
[my-plugin] .my-plugin__block3 {}

[Антон Швец]

Ragtime Kitty, да.