Если я создаю кастомный элемент, стили лучше применять к тегу или к классу?

Question

[lukca]

К примеру, есть кастомный элемент спойлера

<spoiler>
    <h>
        Текст спойлера
    </h>
    <cnt>
        Текст открывающейся части
    </cnt>
</spoiler>

Каким образом лучше всего применить к нему CSS стили?

Так

spoiler {
    color: red;
}

Или присвоить ему класс .spoiler и обращаться в CSS по нему?
И вообще, на сколько целесообразно использовать кастомные элементы, для ускорения разработки, если не брать в расчет, что они не поддерживаются IE?

Как поисковые роботы относятся к кастомным элементам?

Answer 1

[Арсений Матыцин]

Мы же ведь о компонентах, а не от балды накатанном теге? Впрочем не суть важно.

1. Не стоит завязывать в описании стилей на теге, так как ты себе таким образом стреляешь в ноги. Это все хорошо освоено в БЭМ-методологии, правда я не помню, чтобы кто-либо явно где-то писал, почему классу круче тегов. Если кратко, то это свобода, которая ограничивается лишь методологией и больной фантазией.
2. IE умер, помянем.
3. У меня к сожалению нет статистических данных, поэтому тут будет больше на общих знаниях и ощущениях: чтобы снизить риск быть непонятым, не стоит использовать малопупулярные подходы, а пользоваться простой семантикой (а иной раз «дублировать контент»), к тому же тег для спойлера есть.

Comments

[lukca]

Да нет, я хотел написать библиотеку, которая будет включать в себя тег слайдера, спойлера, группу кнопок и множество подобных удобных штук. Например для создания уведомления не нужно писать лишний код и достаточно использовать html тег
<ntf text="Текст уведомления"></ntf>

Интересно было, на сколько это будет актуально

[Арсений Матыцин]

lukca, скорее никому, кроме тебя не будет нужно. В плане попрактиковаться и если будет возможность реализовать в проекте на компонентах — да. В остальное балом правят фреймворки типа Vue.

[lukca]

Арсений Матыцин, в том то и дело, что Vue и React лишком много весят, да и знания для них нужны. Так для большого проекта они подходят, но, например, для создания лендинга, использовать их нецелесообразно. JQuery тоже много весит. Вот и хотелось бы создать что-то легкое (в плане скорости загрузки страницы), но эффективное.