0 / 0 / 0
Регистрация: 12.12.2016
Сообщений: 24
1

Есть ли разница между id и class

27.01.2017, 01:38. Показов 1545. Ответов 12
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Всем доброго времени суток! На данный момент я учусь в одном училище с уклоном в IT. Там нам один препод постоянно говорит, что НУЖНО писать в дивах не class, а id, мол, так правильно, однако в кодах сайтов я никогда не видел, чтоб использовали id. Кругом и везде class. Есть ли разница между, опять же, class и id и что, собственно, этот class вообще обозначает? Буду благодарен!

P.S: Ребят, подскажите какую литературу почитать, чтоб точно понимать, что и как надо писать, а что - нет.
0
Лучшие ответы (1)
27.01.2017, 01:38
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
27.01.2017, 01:38
Ответы с готовыми решениями:

Разница между id и class
Какая разница между id и class? Нет, я умею пользоваться поиском и гуглом. Я понял что класс можно использовать несколько раз а id один...

В чем принципиальная разница между id и class?
Принципиальная. Верстая, экспериментируя, разрабатывая начал задумываться над тем, в чем разница между id и class? Особенно, когда...

В чем разница между @class и #import?
Всем доброго дня ! Вот у меня вопрос: в чем различие между @class и #import. @class работает быстрей, но есть случаи когда в хидер нельзя...

12
 Аватар для brain-4-me
162 / 150 / 97
Регистрация: 24.12.2013
Сообщений: 744
Записей в блоге: 12
27.01.2017, 07:01 2
Centinex, на сколько я знаю, не буду утверждать что это правильно и по книжке но!
id я использую только для JS
class для задания класса,
и еще, если стоит например
HTML5
1
<div id='style' class='style'></div>
и в стилях прописано:
CSS
1
2
3
4
5
6
7
#style{
color:red;
}
 
.style{
color:green;
}
то цвет текста будет красным, т.е. id стоит выше(первоочереднее) класса
1
 Аватар для Syrka
9 / 9 / 5
Регистрация: 21.01.2016
Сообщений: 62
27.01.2017, 08:30 3
Лучший ответ Сообщение было отмечено Centinex как решение

Решение

Id - уникальный идентификатор элемента. На одной странице один идентификатор применяется только один раз, хотя можно применять и несколько одинаковых идентификаторов в пределах одной страницы, но это может вызвать проблемы при использовании HTML-якорей и JS. Если попытаться присвоить одному элементу (HTML-тегу) два различных ID, то сработает только правила из первого ID
При использовании class, одному HTML- дескриптору можно назначить стили из нескольких классов одновременно.
Пользоваться необходимо и классами и идентификаторами, в зависимости от поставленной цели. В большинстве случаев лучше использовать class, чтобы случайно не использовать id на одной странице более одного раза. Но там где необходимо, нужно применять id: выделение уникального блока страницы, для якорей, для JS и др.
1
3 / 3 / 3
Регистрация: 10.10.2016
Сообщений: 37
27.01.2017, 09:06 4
Не знаю чему может научить такой учитель, ему самому еще учиться надо.
На самом деле очень долго объяснять что к чему)
К примеру в css.
Приоритеты стилей.
Селектор тегов имеет специфичность, равную 1 условной единице.
Класс — 10 условных единиц.
Идентификатор — 100 условных единиц.

Книга Девид Макфарланд - Новая большая книга CSS(Бестселлеры O'Reilly) - 2016
стр 125 про каскадность прочитай и сразу все понятно станет.
1
108 / 102 / 35
Регистрация: 14.03.2014
Сообщений: 586
27.01.2017, 13:35 5
для верстки сайта используй только классы(за исключением разноса input и label), одинаковый класс можно задавать бесконечное кол-во раз, а идентификатор(с одним названием) только один раз, но если на сайт вешаешь JavaScript, то по необходимости уже нужны будут id, но когда освоишь JavaScript, то тогда уже сам поймешь где и что надо, а так id вообще не трогай ))

Добавлено через 4 минуты
касательно книг, может не все со мной согласятся, но книги лучше не читать(достаточно того что не используется или код может быть не валидный, а голову этим забиваешь), читай блоги, форумы, пользуйся справочниками(там хватает примеров)
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
27.01.2017, 14:05 6
Цитата Сообщение от Centinex Посмотреть сообщение
Ребят, подскажите какую литературу почитать, чтоб точно понимать, что и как надо писать, а что - нет.
Добро пожаловать: Литература и ресурсы по HTML/CSS

Цитата Сообщение от Kumiko Посмотреть сообщение
Не знаю чему может научить такой учитель, ему самому еще учиться надо.
Ну скорее всего человек верстал последний раз в середине 90-x или предмет не является профильным для изучения, а может просто его слова неверно были истолкованы... Чуть что сразу расстрел - добрее надо быть...

Цитата Сообщение от Evgeniy55 Посмотреть сообщение
для верстки сайта используй только классы
И откуда только Вы это собираете...? Был дан чёткий и абсолютно грамотный ответ:
Цитата Сообщение от Syrka Посмотреть сообщение
Пользоваться необходимо и классами и идентификаторами, в зависимости от поставленной цели.
Возьмём модульную структуру:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="wrapper">
        <div class="header"></div>
        <div class="content">
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>
Как видно из кода для основной обёртки использовался идентификатор, поскольку элемент является единственным и уникальным... То есть Вы акцентировано показываете, что объект уникален и других таких нет... Теперь к стилям, многие ноют, что при использовании id растёт приоритет стиля, да растёт, но это не критично, скажем по сравнению с указанием !important... Если вы будете писать стили таким образом:
CSS
1
2
3
4
5
#wrappper{...}
.header{...}
.content{...}
.content .block{...}
.footer{...}
Всё прекрасно редактируется и то, что Вы используете id ни для кого не будет проблемой... Но, если же Вы писали код в препроцессоре, то на выходе скорее всего будут такие стили:
CSS
1
2
3
4
5
#wrappper{...}
#wrappper .header{...}
#wrappper .content{...}
#wrappper .content .block{...}
#wrappper .footer{...}
И опять же это не критично... Если у Вас есть доступ к css-стилям, то с помощью npp и волшебной комбинации Ctrl+H, идентификатор можно в считанные секунды заменить на класс... Иными словами для пряморуких верстальщиков, индентификаторы проблемой не являются и не являлись и являться не будут... А что же с классами, а с классами, как раз всё просто на замыленом глазу, если Вы представляете себе, что это такое или добавляя новые элементы на страницу можно присвоить по ошибке один и тот же класс нескольким элементам, а если проект содержит не 2 странички, а до 1500 - Вы даже и не заметите косяк... Исправлять очень тяжело... Валидатор ошибки не заметит, а вот на двойное использование идентификатора пожалуется, если Вы конечно пользуетесь валидатором...

Цитата Сообщение от Evgeniy55 Посмотреть сообщение
касательно книг, может не все со мной согласятся, но книги лучше не читать(достаточно того что не используется или код может быть не валидный, а голову этим забиваешь), читай блоги, форумы, пользуйся справочниками(там хватает примеров)
Категорически не согласен... Как раз по книгам и стоит обучаться - их пишут не люди с улицы, а профессионалы... Блогеры, форумчане могут ошибаться и их никто не подвергает цензуре, а вот авторов книг критикуют постоянно... Поэтому вероятность ошибок уменьшается в разы... Форум и блоги - это место для обмена опытом и дополнительных знаний, но никак не основа для получения знаний... Как раз с форумов и блогов и понеслась эта ничем не обоснованная ересь про идентификаторы...
2
738 / 543 / 416
Регистрация: 17.09.2015
Сообщений: 1,601
27.01.2017, 14:20 7
Книги дают систематизированные знания.А вот нюансы уточнять,это да,форумы.
0
108 / 102 / 35
Регистрация: 14.03.2014
Сообщений: 586
27.01.2017, 14:24 8
Цитата Сообщение от Fedor92 Посмотреть сообщение
Категорически не согласен... Как раз по книгам и стоит обучаться - их пишут не люди с улицы, а профессионалы...
помню читал от О'Рейли, и еще какие то уже не помню, в итоге когда руками набирал код для освоения, результат бывал с ошибками, попросту не отображалось как должно было, возился долго, потом благодаря справочникам увидел что пишется немного по другому, и вуаля - заработало, затем часто встречал разные примеры кодов, и когда на форуме уже спрашивал и показывал, мне сказали что в практике так попросту не пишут, т.е. с книг я понял немного саму идею, и много чем ненужным забил голову, в итоге затем смотрел курсы от Специалиста и Хтмл академии, пользы было намного больше и ничего лишнего, знакомые которые уже давно работают в этой сфере советовали книги не читать, вот собственно в моем случае получилось так

единственное может это читать на англ языке например 2016года, потому как часто пишут в русских изданиях что книга 2016г., а вот нифига, она переведена в 2016г., а написана автором может быть и в 2012-13 году, тут пожалуй лучше конкретно советовать какую-то литературу в которой сам уверен, потому как иначе будет такая же фигня как и у меня была

ИМХО
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
27.01.2017, 14:36 9
Evgeniy55, в книгах довольно грамотный код... В изданиях от О'Райли, как правило авторы дают ссылки на репозитории(Github) с исходным кодом, который можно скачать и сразу опробовать на деле... Если ошибки и есть, то они не критичны, переводы довольно качественные... К тому же на сайте издательства можно прочитать рецензии и правки к книгам... Всё в свободном доступе...
Цитата Сообщение от Evgeniy55 Посмотреть сообщение
смотрел курсы от Специалиста
Даже не знаю кто это... В ютубе многие себя называют специалистами и джедаями кода... ИМХО после их видео хочется покончить жизнь самоубийством, особенно это касается перфекционистов... На данный момент не так много качественных каналов, которые стоит смотреть... В основном буржуйские...
Цитата Сообщение от Evgeniy55 Посмотреть сообщение
Хтмл академии
А вот здесь выскажусь... Было дело, курсы видел... Не сказать, что совсем бесполезные, но очень много избыточного кода и готовых решений в комментах... К тому же нет свободы мышления для исполнителя, поскольку задания нужно пройти только так, как задумали создатели - очень страдает абстрактное мышление... Я называю данный эффект - "Буратино"... Как в ВУЗе - всё только в рамках программы - шаг влево шаг вправо расстрел... А книги, как раз развивают абстрактное мышление... Вы прочли пару глав - получили знания, поставили перед собой задачу и решаете её таким методом, каким захотите или пока позволяют , полученные знания...
1
108 / 102 / 35
Регистрация: 14.03.2014
Сообщений: 586
27.01.2017, 14:55 10
Цитата Сообщение от Fedor92 Посмотреть сообщение
Даже не знаю кто это... В ютубе многие себя называют специалистами и джедаями кода... ИМХО полсе их кода хочется покончить жизнь самоубийством, особенно это касается перфекционистов...
"специалист" в Бауманке это


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

Добавлено через 5 минут
а насчет ютуба это да, сейчас видосы выкладывают все кому не лень
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
27.01.2017, 14:57 11
Цитата Сообщение от Evgeniy55 Посмотреть сообщение
"специалист" в Бауманке это
А! Значит видел этих барыг не состоявшихся... Евгений, книги - только книги... Лично Вам рекомендую почитать:

Секреты CSS. Идеальные решения ежедневных задач, Леа Веру

Увидите, книга огонь... Всё очень доступно и очень будет Вам полезно...
2
108 / 102 / 35
Регистрация: 14.03.2014
Сообщений: 586
27.01.2017, 15:23 12
Цитата Сообщение от Fedor92 Посмотреть сообщение
Увидите, книга огонь... Всё очень доступно и очень будет Вам полезно...
пасиб, ща тогда на просторах поищу ее

Добавлено через 17 минут
уточнение, есть разница читать которую вы указали, или в оригинале CSS Secrets: Better Solutions to Everyday Web Design Problems ?
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2620 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
27.01.2017, 15:24 13
Цитата Сообщение от Evgeniy55 Посмотреть сообщение
уточнение, есть разница читать которую вы указали, или в оригинале CSS Secrets: Better Solutions to Everyday Web Design Problems ?
Только язык...
0
27.01.2017, 15:24
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
27.01.2017, 15:24
Помогаю со студенческими работами здесь

Односвязный список: В чём разница между struct и class?
После неудач работы с Vector, а так же отсутствия (Хотя, скорее всего, я просто плохо искал) хорошей русской документации по нему, решил...

Разница между CB и public class в плане instance of an object
Приветствую, вопрос, в WPF, в MainWindow.xaml.cs чтобы работать с методами класса Reading, я создаю объект класса и это работает....

В чем разница между ID и Class и что лучшие использовать?
Добрый день не так давно начал изучать web, и у меня возникло пару вопросов 1) в чем разница между ID и Class и что лучшие использовать ?...

Кто подскажет какая между ними разница (Object and class)
Кто подскажет какая между ними разница

Есть ли разница между / и \\
Есть ли разница между / и \\ ?? если к примеру попробовать получить путь к файлу для копирования и прочего..


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему

Редактор формул (кликните на картинку в правом углу, чтобы закрыть)
Опции темы

Новые блоги и статьи
Использование кэша Laravel - полный гайд
bytestream 18.02.2025
Кэширование - один из наиболее эффективных способов повышения производительности веб-приложений. В современном мире, где скорость загрузки страниц напрямую влияет на удержание пользователей и. . .
Создаем REST API в Laravel с аутентификацией через Passport
bytestream 18.02.2025
Разработка современных веб-приложений все чаще требует создания надежного и хорошо структурированного API. REST API стал стандартом де-факто для построения взаимодействия между клиентской и серверной. . .
Пайплайны в Laravel - полный гайд
bytestream 18.02.2025
Разработка современных веб-приложений часто требует обработки сложных процессов, состоящих из множества последовательных шагов. Например, при создании системы комментариев может потребоваться. . .
Как правильно использовать @required в Symfony
bytestream 18.02.2025
При разработке приложений на Symfony мы часто сталкиваемся с необходимостью внедрения зависимостей. Фреймворк предоставляет несколько способов управления этим процессом, и одним из таких инструментов. . .
Система безопасности в Laravel: возможности и примеры
Wired 18.02.2025
Каждый день появляются новые виды атак и уязвимостей, которые могут поставить под угрозу конфиденциальные данные пользователей и функционирование всей системы. В этом контексте выбор надежного. . .
Давайте сравним Django и Laravel
Wired 18.02.2025
Django и Laravel - два мощных инструмента, которые часто сравнивают между собой. Оба фреймворка предлагают разработчикам богатый набор возможностей для создания масштабируемых веб-приложений, но. . .
Laravel или React - что лучше?
Wired 18.02.2025
В разработке веб выбор правильного инструмента часто определяет успех всего проекта. Особенно интересным представляется сравнение Laravel и React - двух популярных технологий, которые часто. . .
Laravel 11: новые возможности, гайд по обновлению
Wired 18.02.2025
Laravel 11 - это новая масштабная версия одного из самых популярных PHP-фреймворков, выпущенная в марте 2024 года. Эта версия продолжает традицию внедрения передовых технологий и методологий. . .
Миграции в Laravel
Wired 18.02.2025
Разработка веб-приложений на Laravel неразрывно связана с управлением структурой базы данных. При работе над проектом часто возникает необходимость вносить изменения в схему базы данных - добавлять. . .
Аутентификация в Laravel
Wired 18.02.2025
В современном мире веб-разработки безопасность пользовательских данных становится критически важным аспектом любого приложения. Laravel, как один из самых популярных PHP-фреймворков, предоставляет. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru