id vs class

Del · 25.04.2013

Внутри ячейки - div.block с {position: relative; height: 100%;}
Внутрь - div уже размещай div.block__image (картинка) и div.block__desc (текст). Их позиционируй куда хочешь.

У каждого .block задавай модификатор (multiple class) -num_XX - где XX - будет номер твоей ячейки, чтоб ты мог идентифицировать каждую из них.

#ID не используй.
<td> нельзя оборачивать ничем кроме <tr>, смотри спеку.
В FF у тебя будет баг с тем что вложенный div не растянется по высоте ячейки, добавишь js-костыль.

oleglerh · 25.04.2013

Del сказав(ла):
<td> нельзя оборачивать ничем кроме <tr>, смотри спеку.

Такого ограничения не нашел нигде - хотя и без знания о подобных ограничениях у меня вызвало некоторое неприятие оборачивание td дивом :-)

Del · 25.04.2013

oleozy сказав(ла):
Такого ограничения не нашел нигде

В

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

смотрели?

4.9.9 The td element
Categories: Sectioning root.
Contexts in which this element can be used: As a child of a tr element.

oleglerh · 25.04.2013

Del сказав(ла):
Contexts in which this element can be used: As a child of a tr element.

Это понятно, но напрямую не сказано что нельзя чем-то еще обернуть :-)

После оборачивания дивом td все также остается "child of a tr", и таблица нормально рисуется.
Как оказалось, нормально рисуется только если не устанавливать позицию элемента.

Вот пара примеров совершенно неправильной таблички с td обернутым дивами - хотя уже когда писал понимал что такой вариант работать не будет (но результат все равно удивил).

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Как и задумывалось, картинки и текст перекрываются. Текст вылазит из ячейки - но это мелочи.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

Даже если установить координаты 0 пикселов right - элемент улетает из таблицы в правый край окна (если установить какое-то значение right, позиция осчитывается от правого края окна).
Аналогично если координаты установить bottom - элемент прыгает в нижнюю часть окна, и позиция осчитывается снизу.
Довольно любопытное поведение :-)

Причем так себя ведут эти примеры в разных браузерах.

Del · 25.04.2013

Это и есть - "сказано напрямую что нельзя". Валидатор вам подтвердит (выдаст ошибки).
То что блок с pos:abs улетает к краю страницы при указании left/right,top,bottom - абсолютно нормальное и ожидаемое поведение - у вас же наверняка нет выше блоков с pos:rel

oleglerh · 26.04.2013

Del сказав(ла):
То что блок с pos:abs улетает к краю страницы при указании left/right,top,bottom - абсолютно нормальное и ожидаемое поведение - у вас же наверняка нет выше блоков с pos:rel

Блок с див там есть, просто он видимо глючит из-за размещения поверх td
Выглядел мой первый опыт с дивами вот так:

Код:

 <div style="position: relative; z-index:-1">
  <td>
     <div style="position: absolute; z-index:2"><img src=circle.gif></div>
     <div style="position: absolute; z-index:1; right: 0px;"><img src=diamond.gif></div>
     <div class="txt" style="position: absolute; z-index:5">через div с перекрытием</div>
		&nbsp
  </td>
</div>

Странно мне показалось то, элементы в которых не указывается позиционирование выводятся так, будто тега td нет, получается правильный див с позиционированием относительно родительского элемента.
Но если указать элементу position: right: 0px; этот элемент ведет себя так, будт родительского элемента нет вовсе.

Хотя я совсем чайник в html, возможно это действительно норма.
Да и неважно, я уже исправил свои ошибки.
Теперь дивы в ячейке таблицы правильно работают. Написал так:

Код:

<td>
 <div style="position: relative; z-index:-1">
     <div style="position: absolute; z-index:2"><img src=circle.gif alt=""></div>
     <div style="position: absolute; z-index:1; left: 27px;"><img src=diamond.gif alt=""></div>
     <div class="txt" style="position: absolute; z-index:5">через div с перекрытием</div>
  </div>
</td>

Del сказав(ла):
Это и есть - "сказано напрямую что нельзя". Валидатор вам подтвердит (выдаст ошибки).

Ошибок там было больше двадцати :-)

Благодарю за информации о наличии такой хорошей штуки как валидатор.
Я думал что раз все работает в разных браузерах, то все ОК, оказалось что очень много ошибок допустил (помимо оборачивания td дивами).

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

Del · 26.04.2013

Заодно в CSSLint проверяйте.
Нужно выключить опции:
— Beware of broken box sizing
— Disallow adjoining classes
— Disallow empty rules

oleglerh · 26.04.2013

Del сказав(ла):
У каждого .block задавай модификатор (multiple class) -num_XX - где XX - будет номер твоей ячейки, чтоб ты мог идентифицировать каждую из них.

#ID не используй.

Почему ID не использовать?

Кажется более правильным получать элемент по getElementById
Мне нужно обращаться к каждой ячейке индивидуально, а это вроде правильнее делать именно через ID (а классы лучше если нужно определить стили для группы элементов)

К тому же getElementsByClassName не работает в Эксплорерах младше 9-го и там нужны костыли в виде вызова getElementsByTagName и поиска в его результатах, что при большом количестве ячеек (а их может быть под тысячу) будет сильно тормозить?
getElementById по тем же Эксплорерам (плюс старым Операм) может вернуть элемент с сооствествующим атрибутом "name" вместо ID, но я не собираюсь использовать атрибут name (его в HTML5 уже не поддерживают) - так что проблемы не будет?

Именовать ID планирую в виде X_Y где X и Y - переведенные в строки номер колонки и ряда таблицы.
При вызове элемента - создаю идентификатор ячейки тем же способом (массив для ID создавать посчитал ненужным).

Опять таки, возможно я как чайник чего-то не понимаю...

AS0kol · 26.04.2013

Использование class для идентификации элемента в Dom является глупостью. class служит для

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

целей. Для поиска конкретного элемента

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

id.

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

P.S. В массиве лучше хранить помимо id ячейки и сам reference к ячейке. Потому, как по нескольку раз искать одно и тоже не комильфо. То есть если reference пустой, то дергаешь getElementById, записываешь значение в ячейку своего массива, а дальше уже берешь именно это значение, а не getElementById.

Del · 26.04.2013

oleozy сказав(ла):
Почему ID не использовать?

В вёрстке (CSS) использование ID является плохой практикой:
1. Из-за высокой специфичности веса селектора (главное)
2. Из-за того что запрещено повторять элемент с тем же #ID на странице (тоже немаловажно)

oleozy сказав(ла):
Кажется более правильным получать элемент по getElementById

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

oleozy сказав(ла):
Мне нужно обращаться к каждой ячейке индивидуально, а это вроде правильнее делать именно через ID (а классы лучше если нужно определить стили для группы элементов)

Вам никто не мешает обращаться по уникальному имени класса.

oleozy сказав(ла):
К тому же getElementsByClassName не работает в Эксплорерах младше 9-го и там нужны костыли в виде вызова getElementsByTagName и поиска в его результатах, что при большом количестве ячеек (а их может быть под тысячу) будет сильно тормозить?
getElementById по тем же Эксплорерам (плюс старым Операм) может вернуть элемент с сооствествующим атрибутом "name" вместо ID, но я не собираюсь использовать атрибут name (его в HTML5 уже не поддерживают) - так что проблемы не будет?

Используйте jQuery.

AS0kol сказав(ла):
Использование class для идентификации элемента в Dom является глупостью. class служит для других целей. Для поиска конкретного элемента нужно использовать id.

"Мир он такой, не совершенный."

AS0kol сказав(ла):
Интересно сколько классов Del предложит нагородить, для того чтобы отрисовать такую таблицу и как обращаться из javasript к конкретным ячейкам (например, к кнопке в левой колонке).

Столько же сколько и id. Большое кол-во id вас же не пугает? Почему должно пугать большое кол-во .class?

Для этой таблицы:
- для каждой ячейки нужно задать = класс идентифицирующий столбец и класс идентифициирующий уникальную ячейку.
- для кнопки задать свой класс + модификатор состояния + уникальный идентификатор кнопки.

AS0kol · 26.04.2013

Del сказав(ла):
В вёрстке (CSS) использование ID является плохой практикой:
1. Из-за высокой специфичности веса селектора (главное)
2. Из-за того что запрещено повторять элемент с тем же #ID на странице (тоже немаловажно)

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

- для кнопки задать свой класс + модификатор состояния + уникальный идентификатор кнопки.

А причем вес селектора к id? (в контексте того, что к элементу не подвязывается никакой css посредством #id)

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

Чем можешь обосновать свое мнение по поводу производительности?

Почему же не класс?

Del · 26.04.2013

AS0kol сказав(ла):
А причем вес селектора к id? (в контексте того, что к элементу не подвязывается никакой css посредством #id)

Если не подвязывается css - то можно использовать id, тем более он бывает необходим, например линковка label и input - классический пример необходимости id.
Но зачем использовать id для привязки к элементу? Что вам мешает обращаться везде через .class?

AS0kol сказав(ла):
Собственно, он на то и уникальный, что девелоперу нужно получить гарантировано конкретный элемент из dom, а не пачку.

Ещё раз - кто вам запрещает создавать уникальные классы? А на счёт уникальности блоков - так в Яндексе тоже думали что их строка поиска и лого - уникальные в пределах страницы. Але сталося як не гадалося.

AS0kol сказав(ла):
Чем можешь обосновать свое мнение по поводу производительности?

Есть куча тестов от разных людей. Можно свои написать, результат будет аналогичен.

AS0kol · 26.04.2013

Del сказав(ла):
Если не подвязывается css - то можно использовать id, тем более он бывает необходим, например линковка label и input - классический пример необходимости id. Но что вам мешает обращаться веpmlt через .class?

Ещё раз - кто вам запрещает создавать уникальные классы? А на счёт уникальности блоков - так в Яндексе тоже думали что их строка поиска и лого - уникальные в пределах страницы. Але сталося як не гадалося.

Я не понимаю зачем нужно использовать class не по назначению, когда для этого есть id. Более того, есть id, который для этого и предназначен и за уникальностью, которого следит браузер и другие инструменты, если используются (у меня, например, IDE и фреймворк ругаются). Опять таки они работают как раз с id, но не class.

Del сказав(ла):
Есть куча тестов от разных людей. Можно свои написать, результат будет аналогичен.

Пруф?

kosyak · 26.04.2013

холивар на тему ".class VS #id" еще не встречал :попкорн:

Del · 26.04.2013

Это не холивар, а давно решенный факт. Вы же обсуждения div vs table 10-летней давности за холивары уже не считаете? (холиварить можно там есть есть _адекватный_ выбор, а не где все и так ясно). С 2008 года активно обсуждают, уже давно все кто в теме их не юзают. Для тех кто нет - все современные CSS-методологии запрещают, даже в CSSLint встроена проверка чтоб не писали *****.

Причины использования .class я уже расписал выше, не вижу смысла повторяться. Про использование ID в js only тоже написал - юзайте если нравится, просто зачем создавать себе проблемы, когда их можно не создавать. Class - гораздо удобней, гибче и не имеет проблем возникающих с id - поэтому его и юзают.
Если вы используете id в CSS - вы стреляете себе в ногу.

Я с тача, пруфы тут неудобно постить. Неверите - загуглите или проверьте сами.

oleglerh · 27.04.2013

AS0kol сказав(ла):
.S. В массиве лучше хранить помимо id ячейки и сам reference к ячейке. Потому, как по нескольку раз искать одно и тоже не комильфо. То есть если reference пустой, то дергаешь getElementById, записываешь значение в ячейку своего массива, а дальше уже берешь именно это значение, а не getElementById.

Я так понял, будет достаточно создать массив для reference?
Как мне кажется хранить в массиве ID уже смысла нет, обращаемся к элементу по reference.

CLASS VS ID
Продолжаю склонятся к использованию ID для обращения к ячейке таблицы.

Преимущества ID:
1. Если по какой-то причине будет создан неуникальный ID - валидатор выдаст ошибку (в случаев классов это норма и у меня будут серьезные проблемы на странице).
2. "Идеологическая правильность" - стили у всех ячеек одинаковы!
Уникальное название класса или ID не будет использовано для стилевого оформления. Я не собираюсь через JavaScript задавать стилевое оформление для конкретной ячейки или писать в стилях нечто в виде #id {font-color:#fff}
ID будет использоваться исключительно для создания новых элементов в ячейке таблицы (элементов с заранее определенным, неуникальным стилевым оформленим или картинок - опять таки повторяющихся).
3. Поиск по ID будет работать на порядок быстрее в Эксплорерах младше 9-го (в которых нет getElementsByClassName и нужны костыли)

Del · 27.04.2013

Да, нужно хранить reference. Это называется lookup-таблица.
1. Вы их руками будете писать? Нет конечно, будете генерировать. Так с чего им быть неуникальными?
2. Уже писали - да, так можно, просто вы сами себя заранее загоняете в ограничения вызванным использованием id.
3. С чего вы так решили? Не будет.

oleglerh · 27.04.2013

Если кому интересно - делал тесты для вызова элементов через id и class

Если на странице до сотни классов - скорость работы getElementsByID лишь незначительно быстрее getElementsByClassName, не более чем в 2 раза.

Но чем больше классов на странице, тем медленнее getElementsByClassName

Если классов на странице больше 5 тысяч - getElementsByClassName более чем в 100 раз медленнее.

Subject · 28.04.2013

А в чем вообще суть всего этого? Просто поменять бг у всех ячеек? Доказать то, что и так все знают (ID быстрее ClassName),