Идентификаторы и классы

[PavelTkachev]

Иногда при использовании класса или идентификатора стили не применяются. Но если добавить к нему имя тега, то стили применяются

 

#Имя_идентификатора { Описание правил стиля } - не работает

 

E#Имя_идентификатора { Описание правил стиля } - работает

 

Пример показать не могу, периодически при вёрстке сталкиваюсь. Такое бывает, когда несколько стилей применяется к одному элементу. Это потому что у второй записи больший приоритет?

[SelenIT]

Это потому что у второй записи больший приоритет?

Да. У первой приоритет (точнее, специфичность) 1.0.0, а у второй — 1.0.1.

[PavelTkachev]

Спасибо.

[rus]

на сколько я понимаю, данная ситуация может возникнуть только с классами, т.к. id - уникален.

например тегам: <p> <div> и <table> вы задаете класс .test и даете какое-то общее описание:

.test {

width: 300px;

border: 1px solid #000;

}

но для <p> к примеру бордер не нужен, тогда как раз будет такая запись:

p.test {

border: none;

}

[SelenIT]

При неаккуратном обращении с каскадом всё может быть. Напр., если сгоряча повесить стиль на все ссылки единственного главного меню как #mainmenu a {...}, то чтобы потом выделить в нем единственную текущую ссылку, просто #currentlink будет мало — понадобится #mainmenu #currentlink или хотя бы a#currentlink (при условии, что он ниже по коду, чем #mainmenu a). Собственно, в этом и есть главное коварство каскада для новичков...

[PavelTkachev]

При неаккуратном обращении с каскадом всё может быть. Напр., если сгоряча повесить стиль на все ссылки единственного главного меню как #mainmenu a {...}, то чтобы потом выделить в нем единственную текущую ссылку, просто #currentlink будет мало — понадобится #mainmenu #currentlink или хотя бы a#currentlink (при условии, что он ниже по коду, чем #mainmenu a). Собственно, в этом и есть главное коварство каскада для новичков...

А почему сгоряча? Я так всегда и делаю и всегда такую проблему и имею.

 

А как сделать иначе?

[psywalker]

 

При неаккуратном обращении с каскадом всё может быть. Напр., если сгоряча повесить стиль на все ссылки единственного главного меню как #mainmenu a {...}, то чтобы потом выделить в нем единственную текущую ссылку, просто #currentlink будет мало — понадобится #mainmenu #currentlink или хотя бы a#currentlink (при условии, что он ниже по коду, чем #mainmenu a). Собственно, в этом и есть главное коварство каскада для новичков...

А почему сгоряча? Я так всегда и делаю и всегда такую проблему и имею.

 

А как сделать иначе?

 

А зачем вы сразу же используете id для оформления? Почему бы вместо него не использовать класс?

[PavelTkachev]

А зачем вы сразу же используете id для оформления? Почему бы вместо него не использовать класс?

 

У меня есть два довода:

1. class - 5 символов; id - 2 символа. Значит во втором случае существует экономия трафика.

2. id - уникальный идентификатор, поэтому при рендеринг страницы должен происходить быстрее, а также JavaScript с ним быстрее работает, чем с классом.

 

То, что классы - это для верстальщиков, а идентификаторы - для программистов: для меня не аргумент.

Edited January 14, 2015 by PavelTkachev

[SelenIT]

экономия трафика

Экономия трафика — это gzip, всё остальное на его фоне — экономия на спичках (см. предпоследний раздел).

 

 

поэтому при рендеринг страницы должен происходить быстрее

Если скорость рендеринга определяется уникальностью элемента, то единожды встречающийся класс будет рендериться с практически такой же скоростью. Разница в скорости самих селекторов исчезающе мала и полностью теряется на фоне загрузки внешних ресурсов, парсинга тех же скриптов и т.п.

 

 

а также JavaScript с ним быстрее работает, чем с классом

 

Только при «ванильном» обращении через document.getElementById, при этом в современных браузерах getElementByClassName и querySelector (на котором основан jQuery) тоже оптимизированы с хорошим запасом для любых разумных целей (если скрипту приходится циклом перебирать десятки тысяч айдишек, с этим скриптом явно что-то не так, а в менее искусственных случаях вы едва ли заметите разницу).

 

 

То, что классы - это для верстальщиков, а идентификаторы - для программистов: для меня не аргумент.

Нет ли здесь противоречия с предыдущим пунктом?

 

По итогу: использование ID вместо класса дает крайне мало ощутимых плюсов, но ощутимо запутывает/усложняет поддержку CSS. И оно вам надо? 

[PavelTkachev]

Чем запутывает и усложняет поддержку CSS?

[SelenIT]

Необходимостью писать длинные селекторы для переопределения одной вещи и помнить, какие компоненты специфичности уже задействованы (первый пост темы).

[boond]

ID нужны для скриптов, и ничего с этим не поделаешь. Только вот CSSLINT ругается, это обидно.

[klierik]

Чем запутывает и усложняет поддержку CSS?

 

Пиши #id, не слушай ни кого, все делаешь правильно!

[psywalker]

 

Чем запутывает и усложняет поддержку CSS?

 

Пиши #id, не слушай ни кого, все делаешь правильно!

 

Лёх, это была шутка? Если нет, то объясни плз

[klierik]

Лёх, это была шутка? Если нет, то объясни плз

 

зачем убеждать человека делать правильно, если он считает что он прав? это -- безсмысленно.

вот когда у него в проекте начнут дублироваться блоки на странице, когда программер а цикле повесит на #id_count обработчик, когда "посыпется" верстка, тогда он сам поймет в чем его ошибка.

 

а пока что, на первых парах, пускай делает так как считает правильным!

[psywalker]

 

Лёх, это была шутка? Если нет, то объясни плз

 

зачем убеждать человека делать правильно, если он считает что он прав? это -- безсмысленно.

вот когда у него в проекте начнут дублироваться блоки на странице, когда программер а цикле повесит на #id_count обработчик, когда "посыпется" верстка, тогда он сам поймет в чем его ошибка.

 

а пока что, на первых парах, пускай делает так как считает правильным!

 

Ааа, понял)) А я уж было испугался)) А так я с тобой полностью согласен. Доказывать человеку, который не воспринимает другие мнения вообще, только время терять на пустоту. Плавали, знаем

[PavelTkachev]

Пиши #id, не слушай ни кого, все делаешь правильно!

 

Все и всегда всё делают правильно. Так как правильно - это в соответствии с каким-то правилом. Правила разные, а в остальном всё и всегда правильно.

Необходимостью писать длинные селекторы для переопределения одной вещи и помнить, какие компоненты специфичности уже задействованы (первый пост темы).

 

 

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