id и class одновременно

[Melnik]

Всем хорошего дня.Вопрос скорее всего глупый , только явного ответа на него в гугле я не нашел.

Подскажите пожалуйста ,правильна ли запись вида

<p id="main_text" class="main_text">Text</p>

где id , я оставляю для движка (программиста) и вообще его не трогаю в стилях ,в CSS же пользуюсь только классами ?

Edited March 29, 2012 by Melnik

[IIAIIIA]

Всем хорошего дня.Вопрос скорее всего глупый , только явного ответа на него в гугле я не нашел.

Подскажите пожалуйста ,правильна ли запись вида

<p id = "main_text" class= "main_text"> Text </p>

где id , я оставляю для движка (программиста) и вообще его не трогаю в стилях ,в CSS же пользуюсь только классами ?

Можно, конечно, но нужно ли? По-моему, такие недоразумения возникают, когда несколько человек работают над одной страницей.

Edited March 29, 2012 by IIAIIIA

[sigma77]

Всем хорошего дня.Вопрос скорее всего глупый , только явного ответа на него в гугле я не нашел.

Подскажите пожалуйста ,правильна ли запись вида

<p id = "main_text" class= "main_text"> Text </p>

где id , я оставляю для движка (программиста) и вообще его не трогаю в стилях ,в CSS же пользуюсь только классами ?

Запись вполне правильная и для верстки как раз и правильно пользоваться классами. Только лишние пробелы уберите (у "равно" и вокруг Text). А айдишники, если не сами будете использовать, лучше не ставить. Программист сам поставит, какой ему удобно.

[Melnik]

Можно, конечно, но нужно ли? По-моему, такие недоразумения возникают, когда несколько человек работают над одной страницей.

IIAIIIA, почему недоразумения ?

использование одновременно Id и class, четко разделяет работу программиста и верстальщика, что на мой взгляд очень хорошо.

Запись вполне правильная и для верстки как раз и правильно пользоваться классами. Только лишние пробелы уберите (у "равно" и вокруг Text). А айдишники, если не сами будете использовать, лучше не ставить. Программист сам поставит, какой ему удобно.

sigma77, большое спасибо за консультацию .

P.S.:пример подправил.

[IIAIIIA]

IIAIIIA, почему недоразумения ?

использование одновременно Id и class, четко разделяет работу программиста и верстальщика, что на мой взгляд очень хорошо.

Потому что эти атрибуты не с этой целью были созданы.

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

Вот, что вам мешает привязаться к айди и писать стили относительно него?

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

И, кстати, вы имеете ввиду программиста сервеной или клиентской части?

Edited March 29, 2012 by IIAIIIA

[Melnik]

Потому что эти атрибуты не с этой целью были созданы.

И что ?

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

Реализация динамики , программный код дергает элемент по id , бьет по приоритету class и меняет его как хочет.

Вот, что вам мешает привязаться к айди и писать стили относительно него?

Например скорость загрузки , элементы с id загружаются медленнее по сравнению с классом.

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

Вопрос как и пример в начале темы , взяты мною из головы, описывают общий случай ))) С целью решения для себя "вечного" вопроса id или class.

Так мне кажется логичнее и удобнее .Верстальщик сверстал на классах . Прогер же вставил свои Id, или , если ему необходимо поменял классы на id. И усе : мир, дружба , жевачка )))

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

И, кстати, вы имеете ввиду программиста сервеной или клиентской части?

И того и того.

Edited March 29, 2012 by Melnik

[NeoXidizer]

Вот, что вам мешает привязаться к айди и писать стили относительно него?

Например скорость загрузки , элементы с id загружаются медленнее по сравнению с классом.

доказательство?

[Melnik]

доказательство?

Экспериментально установленно. Разгоняем CSS-селекторы: стоит ли?

[Great Rash]

О да, пара миллисекунд рулит!

[NeoXidizer]

это тесты на:

Firefox2 - версия 2006 года, не используется вообще

Opera 9.5 - 2008 год, не используется вообще

Safari 3.0 - 2007 год, не используется вообще

IE 5.5 - 1999 год, не используется вообще

IE 6 - 2001 год, используется 1.7% пользователями

тесты устарели

существует множество других версий, что быстрее:

http://stackoverflow.com/questions/1230636/css-optimization-element-id-vs-class

http://csswizardry.com/2011/09/writing-efficient-css-selectors/

http://jsperf.com/id-or-class-is-faster-in-css/2 можно самому запустить тест, jQuery селекторы быстрее работают с #id

http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/ тоже касательно jQuery

+еще с гугла

[Melnik]

NeoXidizer спасибо за интересные ссылки.Английский язык я знаю плохо.

Поэтому правильно ли я понял , id значительно выигрывает в контексте JavaScript (Jquery),в других же случаях скорость примерно одинаковая ( у id чуть меньше , чем у class)?

[NeoXidizer]

В современных браузерах нет разнциы между .class и #id относительно скорости рендеринга(прорисовки):

http://stevesouders.com/efws/css-selectors/csscreate.php?n=1&sel=%23id&body=background%3A+%23CFD≠=1000 у меня прорисовка 1000 элементов с применением #id селектора занимает 36-38мс (Google Chrome 18, Intel Core i3-2120)

http://stevesouders.com/efws/css-selectors/csscreate.php?n=1&sel=.class&body=background%3A+%23CFD≠=1000 те же 1000 элементов с селектором .class прорисовываются за 37-40мс

P.S. первая загрузка страницы может сообщать "page load time: 222 ms", это погрешность загрузки страницы. Для реальных результатов нужно нажать либо F5 - страница загрузиться из кэша и загрузка страницы не будет так сильно влиять на результат. Либо нажать "Create" - страница обновиться без перезагрузки, отрисовав элементы заново.

Мы видим, что #id быстрее, чем .class, но в тоже время, разница является погрешностью и видна только при 1000 элементов на странице - в реальном проекте такого не встретишь.

Хотя нужно помнить, что Javascript фреймворки работают быстрее с #id, нежели с .class. Разница может достигать 100%:

тест jQuery - http://jsperf.com/id-or-class-is-faster-in-css/2 нажать Run Tests внизу, будет показано количество операций в секунду с каждым селектором. Мой результат:

Jquery + class = 191,373 Ops/sec

Jquery + id = 888,847 Ops/sec

http://jsfiddle.net/uMRFy/ небольшой jQuery бенчмарк

открываем инспектор или FireBug, переключаемся в консоль и обновляем страницу (F5), скрипт сгенерирует ul список с 1000 li элементами и будет их перебирать, сначала по .class, затем по #id.

мой результат в Google Chrome:

class: 10ms

id: 1ms

мой результат в Firefox 11 с Firebug

class: 36ms

id: 7ms

мой результат в Opera 11.62

class: 31ms

id: 9ms

мой результат в Safari 5.1.5

class: 7ms

id: 2ms

Edited March 29, 2012 by NeoXidizer

[Melnik]

NeoXidizer однако . Спасибо огромное за полное ясное доходчивое объяснение.

[NeoXidizer]

лично я привык к тому, что #id - уникальный идентификатор, а .class - нет. Например

<div id="wrapper">
	<div id="sidebar">
		<div class="rounded_box">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ornare ultricies libero.Donec fringilla, eros at dapibus fermentum, tellus tellus auctor erat, vitae porta magna libero sed libero. Mauris sed leo. Aliquam aliquam. Maecenas vestibulum.</p>
		</div>
	</div>
</div>

#wrapper и #sidebar - уникальны и на странице не повторяются,

а .rounded_box, в зависимости от макета, может повторяться неограниченное количество раз

Edited March 29, 2012 by NeoXidizer