В чем отличие # и . в css?

[RuslanHeYca4ev]

Когда писал код в css при изменении знаков с # на . код не переставал работать, но он и наоборот работает для отдельных случаев. В чем их разница и для чего используются?

[web911]

• id уникальный определитель, несколько элементов на одной и той же странице не должны иметь одинаковый id

id имеет более высокий приоритет

id позволяет поставить якорную ссылку на объект

при использовании js для id существует функция .getElementById()

 

Пользуются id или class в зависимости от поставленной цели

[Aleksandr.L]

http://htmlbook.ru/samcss/identifikatory

 

http://htmlbook.ru/samcss/klassy

[DivMan]

Пока не выучишь JavaScript, просто забудь про # и пользуйся .

[npofopr]

Пока не выучишь JavaScript, просто забудь про # и пользуйся .

что за бред. Вы еще скажите в монастырь уйти.

[RuslanHeYca4ev]

Короче, # используют для того, чтобы со скриптами совмещать, а . чисто для классов.

[npofopr]

# используют для того, чтобы со скриптами совмещать

да с чего вы взяли?

 

Якоря по вашему это тоже скрипты? 

[ows.nightwolf]

Использование идентификаторов в качестве селекторов нежелательно, т.к. это исключает возможность повторного применения этих стилей к другому элементу. Кроме того, идентификаторы часто находятся в распоряжении JS скрипта, и если в будущем программисту вдруг вздумается поменять идентификатор элемента на другой, то верстка повалится, надо будет лезть еще и в CSS подправлять, что не есть настоящий дзен. Единственным объективным преимуществом id перед классом является бóльшая производительность, но это экономия на спичках.

Edited August 10, 2014 by ows.nightwolf

[Galaxy]

Большая производительность в чем?) в getElementById ? или вы про приоритетность в css ?)

[ows.nightwolf]

Большая производительность в чем?) в getElementById ? или вы про приоритетность в css ?)

 

Не могу так с ходу придумать как по русски правльно обозвать этот процесс, но в общем в скорости нахождения этого элемента. Ну например если сравнить селектор с большой вложенностью и единичный селектор, то единичный будет обрабатываться быстрее. ( .class быстрее чем div.class > child ). Аналогично id обрабатывается быстрее чем class (источник - в спойлере).

Selectors have an inherent efficiency, and to quote Steve Souders, the order of more to less efficient CSS selectors goes thus:

1. ID, e.g. #header
2. Class, e.g. .promo
3. Type, e.g. div
4. Adjacent sibling, e.g. h2 + p
5. Child, e.g. li > ul
6. Descendant, e.g. ul a
7. Universal, i.e. *
8. Attribute, e.g. [type=text]
9. Pseudo-classes/-elements, e.g. a:hover

Quoted from Even Faster Websites by Steve Souders

It is important to note that, although an ID is technically faster and more performant, it is barely so. Using Steve Souders’ CSS Test Creator we can see that an ID selector and a class selector show very little difference in reflow speed.

 

Полный текст статьи: http://csswizardry.com/2011/09/writing-efficient-css-selectors/

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

Edited August 10, 2014 by ows.nightwolf

[Николя223]

хм... а я сейчас вообще - все на классах делаю и для jQuery тоже - мне просто удобнее.... но

Тем кто пишет что # для JS - на самом деле по большому счету на данный момент это ерунда. Это было в эпоху голого JS, когда самым простым обращением было по ID, а с появлением фреймворков и библиотек стало хоть как.... хоть по части аттрибута

[Galaxy]

Для любителей тестов сравнение getElementById vs getElementByClassname http://jsperf.com/getelementbyid-vs-queryselector/25

[Николя223]

Для любителей тестов сравнение getElementById vs getElementByClassname http://jsperf.com/ge...ueryselector/25

и что.

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

В настоящее время стоит вопрос быстродействия или удобства.

или / или

и вопрос.... а собственно нафига тебе столько ...  

 

я считаю в 99,99998% проектов абсолютно без разницы - 10 миллионов операций в секунду или 3 ... или 500 000

Edited August 10, 2014 by Николя223

[Galaxy]

Тема про . и # я кинул ссылку на тесты, с вашим постом я полностью согласен.

[Николя223]

 .

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

var start,
result,
end,
int = 10000000
start = new Date()

for(i=0;i <= int;i++){
var bar = document.getElementById("anonymous_element_14");
var poo = document.getElementById("anonymous_element_13");
}
end = new Date()
result = 1000 * int / (end.getTime() - start.getTime() )
console.log("Первый:" + result)
//Делаем через Do
var start=0,
end="",
int = 10000000,
result,i,
start = new Date()
i=0
do{
var bar = document.getElementById("anonymous_element_14");
var poo = document.getElementById("anonymous_element_13");
i++
}while(iend = new Date()
result = 1000 * int / (end.getTime() - start.getTime() )
console.log("Второй:" +result)

)

Edited August 10, 2014 by Николя223

[RuslanHeYca4ev]

Тема про . и # я кинул ссылку на тесты, с вашим постом я полностью согласен.

не совсем понял, что вы имели ввиду

 

# используют для того, чтобы со скриптами совмещать

да с чего вы взяли?

 

Якоря по вашему это тоже скрипты? 

 

Ну # я читал, что их лучше использовать для скриптов

[klierik]

дело в том что множественное использование одноименных #ID на странице запрещено (согласно документации).

т.е. описывать элементы страницы используя #ID крайне не рекомендуется, так как программист может в любой поменять значение атрибута на своё усмотрение.

классы же, как правило, программистами не трогаются. в крайнем случае программист может добавить ".js-class-name" и использовать его в скрипте.

 

в реалиях если верстальщик описал стили опираясь на #ID то это может привести к тому что в непредсказуемый момент стиль одного или множества блоков на странице будет утерян. Это последует сразу за сменой #ID.

 

Так же если понадобится в какой-то момент размножить на странице блок, стили которого привязаны к нему по #ID, и потом произвести какие-то JS манипуляции с ним, то в итоге JS возьмет только первый блок который найдет, а остальные, скорее всего, работать не будут.

 

В целом что бы избежать в будущем возможных ошибок негласные правила хорошего тона рекомендуют описывать все блоки через ".class_name", а #ID использовать в JS.

 

Но, существуют ситуации когда попросту без описания стилей используя #ID никак не обойтись (имеется ввиду -- время затраченное на то что бы найти\создать другое решение слишком велико). Но вероятность того что разработчику попадется такая ситуация ничтожно мала.

 

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

[Int]

А что, результаты у всех разные выходят?

[ows.nightwolf]

А что, результаты у всех разные выходят?

 

Теоретически должно зависеть от браузера, у firefox и webkit-based браузеров разные способы кеширования результатов поиска.

[Николя223]

А что, результаты у всех разные выходят?

Нда - у меня в FF - вот такая картина. по моим подсчетам - результаты завышены у них минимум в 20 раз

и кстати - по их подсчетам для эксплорера... эт вообще ни в какие ворота не лезет... типа в IE более перспективно по скорости getElementsByClassName... на 80%  

Edited August 12, 2014 by Николя223

[Justnewone]

Я, если честно, не вижу вообще никакого смысла в Id, как в js, так и в CSS. Скорость выборки достаточно мифическая, либо оно спорно, либо оно не нужно или интерфейс слишком наворочен, что там фактор скорости выборки отрицательно влияет не более чем на 5%. далее только неудобства, они все описаны выше. Но я наверняка могу ошибаться, есть ли противоядие?

[ows.nightwolf]

Да, соглашусь с Justnewone, судя по резальтатам этого обсуждения можно сделать выводы:

1. Определить какой способ выборки более производителен сложно, т.к. для различных селекторов он отличается, в зависимости от браузера.

2. В пределах одного браузера отличие между скоростями вборки по ID и Class незначительное.

3. Количество операций выборки в секунду и для ID и для class настолько велико, что едвали найдется реальная прикладная задача где будет необходимость задумываться над тем какой способ выборки применить.

4. Как бы то нибыло, следует разделять CSS и JS просто для упрощения внесения изменений в разрабатываемый проект. Если в JS используется выборка по классу, то выбираемым элементам рекомендуется назначать отдельный класс с приставкой "js-" (опять же, для того чтобы отделить классы оформления от классов для скриптов).

Edited August 12, 2014 by ows.nightwolf

[RuslanHeYca4ev]

дело в том что множественное использование одноименных #ID на странице запрещено (согласно документации).

т.е. описывать элементы страницы используя #ID крайне не рекомендуется, так как программист может в любой поменять значение атрибута на своё усмотрение.

классы же, как правило, программистами не трогаются. в крайнем случае программист может добавить ".js-class-name" и использовать его в скрипте.

 

в реалиях если верстальщик описал стили опираясь на #ID то это может привести к тому что в непредсказуемый момент стиль одного или множества блоков на странице будет утерян. Это последует сразу за сменой #ID.

 

Так же если понадобится в какой-то момент размножить на странице блок, стили которого привязаны к нему по #ID, и потом произвести какие-то JS манипуляции с ним, то в итоге JS возьмет только первый блок который найдет, а остальные, скорее всего, работать не будут.

 

В целом что бы избежать в будущем возможных ошибок негласные правила хорошего тона рекомендуют описывать все блоки через ".class_name", а #ID использовать в JS.

 

Но, существуют ситуации когда попросту без описания стилей используя #ID никак не обойтись (имеется ввиду -- время затраченное на то что бы найти\создать другое решение слишком велико). Но вероятность того что разработчику попадется такая ситуация ничтожно мала.

 

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

А что программисты будут делать с сайтом?Под программистами вы имеете ввиду скриптеров?

[klierik]

А что программисты будут делать с сайтом?Под программистами вы имеете ввиду скриптеров?

 

Программист будет реализовывать поставленную задачу.

Под термином "программист" я имею ввиду -- программист.

[RuslanHeYca4ev]

 

А что программисты будут делать с сайтом?Под программистами вы имеете ввиду скриптеров?

 

Программист будет реализовывать поставленную задачу.

Под термином "программист" я имею ввиду -- программист.

 

А что конкретно они будут или могу сделать с сайтом?

[npofopr]

А что конкретно они будут или могу сделать с сайтом?

придавать "динамику" сайту