Вхід і реєстрація
Розробка · 25 листопада 2017, 0:23 6169
Yura Storchaka, Сотрудник Чат-онлайн в ПриватБанк

Div id или div class, что лучше использовать в верстке?

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

вот пример
я делаю так
<div id="spisok">

а видел люди делают вот таким способом
<div class="spisok">

Какой из способов лучше и корректнее, подскажите пожалуйста.

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

Теми: Front-end, верстка
👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn

Схожі топіки

Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Александр 06.12.2017 21:33

Данный вопрос возникает после изучегия в его лишь основ css js html. Не надо спешить в учебе. Если стоит задача изучить быстро и как нибуть html css и начать лепить на заказ проекты — это плохая затея. На такие вопросы в гугл имееться милион ответов и видео пояснений. В учебе главное научиться саиому находить ответы на Правильно поставленный поисковику вопрос.

Відповісти
Підтримати
schwarzlichtbezirk 27.11.2017 03:11
Какой из способов лучше и корректнее, подскажите пожалуйста

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

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

*bootstrap* — либа с классами для адаптивной вёрстки, думаю тебе именно это нужно.

Відповісти
Підтримати
minodvesP Vasya 26.11.2017 13:28
Div id или div class, что лучше использовать в верстке?

если див уникальный, то id, если таких дивов много, то class,

div id="spisok«

ну если это именно «spisok» (или какой-нибудь «perelik»), а не «list», то тогда id естественно))

Відповісти
Підтримати
Vladyslav Melnyk 26.11.2017 02:59

Для стилей классы, для работы с DOM из JSa в селекторах используют и то и другое. Так же id полезен для всяких «for» атрибутов.

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

Адаптивная. Заодно можешь погуглить flexbox.

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 25.11.2017 12:51

Да не важно class или id пока это «list», а не «spisok».

Технически есть следующие моменты:
1. Id может быть только у уникального элемента (1 на страницу), элементов с одинаковым классом может быть много.
2. Для элементов с id создается глобальная переменная (в js) — dev.to/...​-ids-are-global-variables Мне неизвестно влияет ли это как-то на производительность. На объём потребляемой памяти должно влиять. Не критично, но мне кажется не стоит прям везде лепить id.

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

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

Что-то как-то непонятно. Есть такое понятие как адаптивная верстка. Это когда с помощью медиа-запросов применяются разные css-правила в зависимости от размера экрана. Если что-то при уменьшении наложилось на что-то — это значит что версткой под данный экран разработчик не заморачивался. Но мне кажется это не тот ответ который вы ищете. Возможно вы спрашиваете про flexbox.

Відповісти
Підтримати
Євген Козлов Front-end developer в SoftServe 25.11.2017 22:31
1. Id может быть только у уникального элемента (1 на страницу)

это актуально только для трех вещей: document.getElementById(так как он в принципе может вернуть только один элемент), использование в качестве якоря, добавляя в URL #id — и, как следствие, псевдокласс :target

На объём потребляемой памяти должно влиять

нет, оно через ссылки работает, как и все объекты

Відповісти
Підтримати
Gennady Dogaev
Олексій Пєніє 25.11.2017 09:14

Совсем глупый совет: скачай или купи приличную книгу. Потому что нюансов там туева хуча, и далеко не таких простых. Одна только война браузеров чего стоит.

Відповісти
Підтримати
Victor Musienkо Senior Engineer в Noibu.com 25.11.2017 09:09

Блоки — блочная верстка, сетка еще, либо адаптивность.
Правильно использовать class, из-за классов таблицы стилей называются каскадными, поскольку любая библиотека в нужный момент сможет перекрыть classname, но не id. 256 classnames == 1 id.

Відповісти
Підтримати
Nikolay Mihalych 25.11.2017 08:52

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

Відповісти
Підтримати
Alex Bylim 25.11.2017 02:02

не буду говорить про сам вопрос и отправлять читать гайды

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

по селекторам: id имеет приоритет над классом

если вы задаете такие вопросы, то вам рано еще заниматься css3 позиционированием, так как CSS сегодня это не то, что было даже 5 лет назад, flexbox, grid и тд.

по последнему вопросу: responsive design

короче смотрите в сторону bootstrap, там и позиционирование и responsive design

Відповісти
Підтримати
Anatoliy Osypenko 25.11.2017 00:50

в верстке желательно использовать только классы. Айди осмысленно используют в очень специфических случаях до которых судя по всему вам далеко.
То что накладывается друг на друга — абсолютное позиционирование. И если не совать его куда не надо, сайт даже без стилей по-умолчанию будет с блоками которые перемещаются, а не накладываются.

Задавайте побольше таких вопросов. Хочется конечно послать на RTFM, но хоть самооценку подымает.

Відповісти
Підтримати
Олексій Пєніє 25.11.2017 01:03

А есть какое-то научное доказательство столь безапелляционным заявлениям?
Потому как встречаются подобные часто, но всё сводится к холивару. И по больше части от тех, кто сам пока наверстал мало.

Как по мне, и то и другое — прекрасно дополняет друг друга.

Відповісти
Підтримати
Anatoliy Osypenko
Anatoliy Osypenko 25.11.2017 11:44

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

Відповісти
Підтримати
Олексій Пєніє
Олексій Пєніє 25.11.2017 00:47

Авторитетно заявляю: один х&й.
Но есть загвоздочка по классам: их правила каскадные, и эти каскады ниипически жрут оперативу. Потому, чем точнее ты можешь натравить правило, тем лучше.

Если по существу, то классы хороши только там, где это действительно классы. Несколько элементов, объединённых одним поведением, или же одним стилем.

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

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

Самый скотский селектор CSS — это звёздочка. Можешь почитать на Хабре, сколько проблем она может создать, и насколько сложно их ловить. В остальном же чувствуй себя свободно, назначая правила по принципу «я художник, я так вижу». CSS прекрасно поддаётся рефакторингу в будущем, на зрелом проекте. Но писать всё красиво с первого раза — только время потратишь.

Відповісти
Підтримати
Nazár Atamaníuk 25.11.2017 13:50

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

Відповісти
Підтримати
Олексій Пєніє
Олексій Пєніє 26.11.2017 22:44

А кроме ьобаной методологии жопы Хэнка доводы против идентификаторов есть?
Почему в обычном программировании всё работает на идентификаторах. А вот на вёрстке — плохому танцору id мешают. Я не отрицаю классы. Но использовать исключительно классы — всё равно что вместо адреса на письме писать «в доме, где резной палисад»

Відповісти
Підтримати
Nazár Atamaníuk
Gennady Dogaev full-stack web developer (freelance) 26.11.2017 23:02
Можешь почитать на Хабре, сколько проблем она может создать, и насколько сложно их ловить.

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

Відповісти
Підтримати
Олексій Пєніє
Євген Козлов Front-end developer в SoftServe 25.11.2017 00:44

id для стилей — отстой
1. приоритет у стилей через #spisok будет просто ужасающий(ну, разве что селекторый везде как [id=spisok] вставлять) — замахаешься потом !important тыкать повсюду
2. классы позволяют композицию: class="btn btn-primary", id нет

зачем же тогда нужен id?
нет, не для обращения из js(который сто лет как позволяет querySelectorAll, если влом ставить jQuery ради такой ерунды)
если вставить в URL после # id какого-то элемента, то браузер, загрузив страницу, прокрутит к этому месту.
потому идеальное применение id — это человекочитаемые фрагменты-закладки.

Відповісти
Підтримати
Олексій Пєніє 25.11.2017 01:00

А кроме религиозных причин, другие — есть?
Да, классы прекрасны для оформления, когда речь действительно идёт об общих задачах. Особенно при написании шаблонов, библиотек, и т.д. и т.п.

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

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

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

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

А применение id для JS настолько же оправдано, как и для CSS. В первую очередь потому, что мозг программиста тоже не резиновый и не восьмиядерный. Ему в разы проще оперировать конкретикой, а не абстракциями, которые сам чёрт не знает что захватывают в свою область видимости.
________
Дизайнеры всё время забывают, что потом их стиль полезут «по быстрику» править говнокодеры. Особенно если фрилансерам дадут на час работы.

Відповісти
Підтримати
Євген Козлов
Євген Козлов Front-end developer в SoftServe 25.11.2017 01:11
здесь и инлайновые стили не западло

охуенчик. удачи с саппортом.

CSS прекрасно поддаётся рефакторингу в будущем, на зрелом проекте

особенно, когда у тебя зоопарк из инлайна, #id, !important, и классов.
всё лучше и лучше.

А применение id для JS настолько же оправдано, как и для CSS

угу. понятно, шо wikipedia.org/something#id-2456-78-a удобнее, чем wikipedia.org/something#origins

А кроме религиозных причин, другие — есть?

гибкость, сложность дальнейшей поддержки и ограничение в функционале браузера(#id как закладка) — это религиозные-то? ясно-понятно.

Відповісти
Підтримати
Олексій Пєніє
Олексій Пєніє 25.11.2017 01:48

Зоопарк плохо. Организованный зоопарк — хорошо.
Разумеется ID вешается на элемент дизайна, который в единственном количестве, и с таким именем чтобы было понятно что это.

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

ID — это не только и не столько закладка, сколько явные имена постоянных объектов, в том числе блоков. Например, на форуме есть HTML-редактор. На кой хер ему лишние классы, если можно дать понятный ID? И если там надо скрыть границу, гораздо надёжнее написать это в инлайне. А если убрать пару кнопок — то правило с ID редактора и ID кнопки. Просто потому что редактор на форуме ОДИН, и кнопка такая в нём ОДНА.

Таким образом, когда появится второй редактор, вероятно тот же самый, но уже совсем в другой роли (например, для личных сообщений) — его не зацепит правилами инлайнового. Ему напишут свои правила. И снова, по ID. И свои кнопки там будут скрыты.

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

Відповісти
Підтримати
Євген Козлов
Andre Freelancer в none 25.11.2017 02:25

Вы пацана вообьще запутаете.
По существу:
ID — чисто для селектора css — можно, но нужно ли?
на каждый однотипный елемент придумывать новый ИД? или однотипный елементам давать одинаковые ИД?
именно из за риска одинаковых ИД я думаю и не рекомендуют чистым верстальщикам его использовать, потом эти «косяки» — будут мешать какому нибуть джаваскрипт-девелоперу

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

Відповісти
Підтримати
Олексій Пєніє
Олексій Пєніє 25.11.2017 12:20

Про «на каждый однотипный елемент придумывать новый id» у автора не было. ID вешаются на ключевые элементы дизайна.

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

Правильный селектор для элемента блока — это ID блока, а уже далее по классам или даже тегам, включая их номер по порядку. В небольших блоках вполне допустимо. Потому единственно правильный ответ — И ТО, И ДРУГОЕ надо пользовать.

Пример: видишь большой банер на DOU сверху?
HTML:

<div id="max-header-adv-id" class="max-header-brand">
CSS:
.max-header-brand {
    margin: 32px 0 30px;
    position: relative;
    z-index: 20;
}
.max-header-brand a {
    display: block;
    height: 0;
    padding-bottom: 21.5%;
    position: relative;
}
.....

Вот попробуй объяснить, на кой пионерский здесь плодится две сущности, если большой банер был и есть всегда один? И если (что вряд ли) появится когда-нибудь второй, то он стопудово будет не таким же как первый. Что помешало написать
#max-header-adv-id a {....

Я уже молчу, что так позволительно переиспользование имён класса, когда один и тот же признак должен требовать немного разного поведения от разных блоков — разве не логично дать ему ОДНО имя класса? А вот когда класс на класс накладывается, такая неразъебримое счастьё наступает, особенно саппорту.

Відповісти
Підтримати
Andre
Євген Козлов Front-end developer в SoftServe 25.11.2017 22:33
когда их правила со звездой

т.е. типа, это связано с выбороом «id vs class» и в одном из вариантов правило с «*» будет удобным?

Відповісти
Підтримати
Олексій Пєніє
Gennady Dogaev full-stack web developer (freelance) 25.11.2017 23:59
А вот другую ошибку я встречал чуть ни в половине гайдов — не пользуйтесь id, пользуйтесь классами.

Это не гайды, а best practices. К сожалению, в них почти никогда не заморачиваются объяснением почему так, а не иначе. Найти объяснение — задача читающего. Может так конечно и лучше, если рассчитано на ленивых джунов, не желающих углубляться. Раздражает только что потом они безапеляционно заявляют то же самое другим, но уже не понимая почему именно так.

большой банер был и есть всегда один

1. На самом деле, нельзя заранее знать какая сущность вот прям железно одна, а какая через месяц понадобится «такая же, но чуть-чуть другая»
2. Часто если есть id — он есть для других целей — js или в целях навигации. И вот захочешь ты поменять его из-за этих других целей, а что он у тебя и в css — забыл. В ember.js кстати такой проблемы нет — id компонента обычно генерируемый (кажется можно в это вмешаться, но это будет плохая практика) и ты его не знаешь чтобы использовать в css. И юзаешь классы без мук выбора.

Відповісти
Підтримати
Олексій Пєніє
Олексій Пєніє 26.11.2017 22:50

Потому что реальное объяснение «лучших практик» — банальнейшая копипаста друг у друга. Мануалы пишутся чаще всего теми, кто не знает что 1.2 * 5 ≠ 6.

Відповісти
Підтримати
Gennady Dogaev
Nikolay Mihalych 25.11.2017 08:50

Коментар порушує правила спільноти і видалений модераторами.

Nazár Atamaníuk 25.11.2017 13:53

Ты просто не понимаешь о чем говоришь, серьезно.

Відповісти
Підтримати
Олексій Пєніє

Підписатись на коментарі

Не підписуватись
Скористайтесь акаунтом
×
з умовами використання сайту і політикою конфіденційності.