В чем прикол такого хака?

Question

[Можно просто Евгений]

К примеру, у меня есть:

<div class="item_class --item">

.item_class { }
.item_class.--item {}

На некоторых сайтах я видел подобный хак:

.item_class { }
.item_class.\--item {}

В чём прикол такого хака и как добавить в gulp-е, чтобы он автоматически добавил " \ " таким классам " .--class "

Answer 1

[Ivan Bogachev]

.item_class.\--item {}
С двух дефисов имя класса начинаться не может (некоторые браузеры умеют использовать такие имена, но не стоит на такое расчитывать). А хак этот нужен для того, чтобы обмануть CSS валидатор.

Comments

[Сергей delphinpro]

Это не хак! Это стандартная возможность экранирования спецсимволов.
Да, в css тоже есть возможность экранирования.

[Ivan Bogachev]

Сергей: Ну здесь экранирование так применяется, что иначе как хаком это и не назовешь.

Answer 2

[Александр Аксентьев]

Изврат какой-то, смысла никакого так именовать классы.

Придумать проблему и героически пытаться её решить - примерно так это выглядит.
Браузеры позволяют так именовать с 14 года примерно судя по гуглу.
Слеш возможно для старых браузеров чтобы они правильно спарсили и не сломались стили.

Однако зачем так делать никто нигде не пишет. Видимо чтобы потом бороться с глюками возможными на пустом месте.

Вообще -- используется для переменных в CSS, но это скорее относится к самим стилям, а не названиям.

Comments

[Алексей Николаев]

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

[Александр Аксентьев]

Алексей Николаев: но в самим стилях используется var() для этого, сомневаюсь что в названии так прокатит.