вот пример
я делаю так <div id="spisok">
а видел люди делают вот таким способом <div class="spisok">
Какой из способов лучше и корректнее, подскажите пожалуйста.
И еще один вопрос, как правильно называется верстка, при которой текст при уменьшении экрана перемещается блоками, а не накладывается друг на друга. Чтобы сайт хорошо складывался с мобильных приложений. Сейчас изучаю CSS3 позиционирование, потому таким вопросом и задаюсь
Данный вопрос возникает после изучегия в его лишь основ css js html. Не надо спешить в учебе. Если стоит задача изучить быстро и как нибуть html css и начать лепить на заказ проекты — это плохая затея. На такие вопросы в гугл имееться милион ответов и видео пояснений. В учебе главное научиться саиому находить ответы на Правильно поставленный поисковику вопрос.
Какой из способов лучше и корректнее, подскажите пожалуйста
Разница в том, что через id ты ссылаешься из js на один конкретный элемент. Если задаётся стиль на id, то соответственно такой элемент должен быть только один, вроде как синглтон. В принципе в html плодить лишние сущности ни к чему, и ссылаться можно другими способами.
как правильно называется верстка, при которой текст при уменьшении экрана перемещается блоками, а не накладывается друг на друга
*bootstrap* — либа с классами для адаптивной вёрстки, думаю тебе именно это нужно.
Div id или div class, что лучше использовать в верстке?
если див уникальный, то id, если таких дивов много, то class,
div id="spisok«
ну если это именно «spisok» (или какой-нибудь «perelik»), а не «list», то тогда id естественно))
Для стилей классы, для работы с DOM из JSa в селекторах используют и то и другое. Так же id полезен для всяких «for» атрибутов.
И еще один вопрос, как правильно называется верстка, при которой текст при уменьшении экрана перемещается блоками, а не накладывается друг на друга.
Адаптивная. Заодно можешь погуглить flexbox.
Да не важно class или id пока это «list», а не «spisok».
Технически есть следующие моменты:
1. Id может быть только у уникального элемента (1 на страницу), элементов с одинаковым классом может быть много.
2. Для элементов с id создается глобальная переменная (в js) — dev.to/...-ids-are-global-variables Мне неизвестно влияет ли это как-то на производительность. На объём потребляемой памяти должно влиять. Не критично, но мне кажется не стоит прям везде лепить id.
Я лично предпочитаю классы. Id могу использовать в css если он и так для js нужен.
И еще один вопрос, как правильно называется верстка, при которой текст при уменьшении экрана перемещается блоками, а не накладывается друг на друга.
Что-то как-то непонятно. Есть такое понятие как адаптивная верстка. Это когда с помощью медиа-запросов применяются разные css-правила в зависимости от размера экрана. Если что-то при уменьшении наложилось на что-то — это значит что версткой под данный экран разработчик не заморачивался. Но мне кажется это не тот ответ который вы ищете. Возможно вы спрашиваете про flexbox.
1. Id может быть только у уникального элемента (1 на страницу)
это актуально только для трех вещей: document.getElementById(так как он в принципе может вернуть только один элемент), использование в качестве якоря, добавляя в URL #id — и, как следствие, псевдокласс :target
На объём потребляемой памяти должно влиять
нет, оно через ссылки работает, как и все объекты
Совсем глупый совет: скачай или купи приличную книгу. Потому что нюансов там туева хуча, и далеко не таких простых. Одна только война браузеров чего стоит.
Блоки — блочная верстка, сетка еще, либо адаптивность.
Правильно использовать class, из-за классов таблицы стилей называются каскадными, поскольку любая библиотека в нужный момент сможет перекрыть classname, но не id. 256 classnames == 1 id.
Чел, беги отседова, а то щас понасоветуют, не унесешь. Есть же более авторитетные источники. Такие вещи на форумах не спрашивают, это не тема для обсуждения.
не буду говорить про сам вопрос и отправлять читать гайды
но, че тут непонятного, грубо говоря: id для уникальных объектов на странице ( уникальный идентификатор), class для множества. Юзаются по ситуации.
по селекторам: id имеет приоритет над классом
если вы задаете такие вопросы, то вам рано еще заниматься css3 позиционированием, так как CSS сегодня это не то, что было даже 5 лет назад, flexbox, grid и тд.
по последнему вопросу: responsive design
короче смотрите в сторону bootstrap, там и позиционирование и responsive design
в верстке желательно использовать только классы. Айди осмысленно используют в очень специфических случаях до которых судя по всему вам далеко.
То что накладывается друг на друга — абсолютное позиционирование. И если не совать его куда не надо, сайт даже без стилей по-умолчанию будет с блоками которые перемещаются, а не накладываются.
Задавайте побольше таких вопросов. Хочется конечно послать на RTFM, но хоть самооценку подымает.
А есть какое-то научное доказательство столь безапелляционным заявлениям?
Потому как встречаются подобные часто, но всё сводится к холивару. И по больше части от тех, кто сам пока наверстал мало.
Как по мне, и то и другое — прекрасно дополняет друг друга.
да, для обоих вариантов есть юзкейсы, но новичок скорей всего налажает больше если будет пытаться пользоваться обеими вариантами вместо только классов.
научное доказательство тут такое же как доказательство любого пункта в стайлгайдах и правилах линтеров, т.е. его нет, т.к. это вопрос из раздела стиля написания кода. Писать можно как угодно, вопрос скорей «как писать так чтобы не получить лишних проблем при определенных условиях».
Авторитетно заявляю: один х&й.
Но есть загвоздочка по классам: их правила каскадные, и эти каскады ниипически жрут оперативу. Потому, чем точнее ты можешь натравить правило, тем лучше.
Если по существу, то классы хороши только там, где это действительно классы. Несколько элементов, объединённых одним поведением, или же одним стилем.
Ровно ничего не мешает тебе иметь И классы, И идентификаторы в определениях для одного и того же элемента. Например, классы отвечают за цветовой дизайн, видимость, позиционирование. В то время как правила для ID будут задавать геометрию самого элемента, слои, видимость, абсолютные позиции.
Поскольку современные браузеры прекрасно дебажат CSS, то на первое место выступает НЕ удобочитаемость стиля, а прежде всего корректность правил.
Самый скотский селектор CSS — это звёздочка. Можешь почитать на Хабре, сколько проблем она может создать, и насколько сложно их ловить. В остальном же чувствуй себя свободно, назначая правила по принципу «я художник, я так вижу». CSS прекрасно поддаётся рефакторингу в будущем, на зрелом проекте. Но писать всё красиво с первого раза — только время потратишь.
Афигеть ты заявил конечно, айдишники использывать в верстке это как goto использывать в коде.
Только классы, их можно переиспользывать, их нужно переиспользывать.
Методологию БЕМ в зубы и вперед, не слушать таких комментов.
А кроме ьобаной методологии жопы Хэнка доводы против идентификаторов есть?
Почему в обычном программировании всё работает на идентификаторах. А вот на вёрстке — плохому танцору id мешают. Я не отрицаю классы. Но использовать исключительно классы — всё равно что вместо адреса на письме писать «в доме, где резной палисад»
Можешь почитать на Хабре, сколько проблем она может создать, и насколько сложно их ловить.
Звёздочка конечно сильна, но что там ловить-то? Перекосило верстку, открываешь средства разработчика и сразу смотреть какие правила на элемент действуют.
id для стилей — отстой
1. приоритет у стилей через #spisok будет просто ужасающий(ну, разве что селекторый везде как [id=spisok] вставлять) — замахаешься потом !important тыкать повсюду
2. классы позволяют композицию: class="btn btn-primary", id нет
зачем же тогда нужен id?
нет, не для обращения из js(который сто лет как позволяет querySelectorAll, если влом ставить jQuery ради такой ерунды)
если вставить в URL после # id какого-то элемента, то браузер, загрузив страницу, прокрутит к этому месту.
потому идеальное применение id — это человекочитаемые фрагменты-закладки.
А кроме религиозных причин, другие — есть?
Да, классы прекрасны для оформления, когда речь действительно идёт об общих задачах. Особенно при написании шаблонов, библиотек, и т.д. и т.п.
Но точно так же, при окончательной доводке проекта в конкретику, когда уже точно знаешь что где будет и как должно выглядеть — нужно быть настолько же точно уверенным что рулишь конкретным элементом, и правила не совьются в петлю.
Я больше скажу, здесь и инлайновые стили не западло. И как раз таки с целью однозначного разруливания стиля, в том числе по времени обработки, и по неконфликтности.
Если по существу, то дизайн — это целый класс задач, которые прекрасно разделяются. Львиная доля делается классами. Но когда у тебя есть например панель входа — то она и должна рулиться геометрией как панель входа. Но это не значит, что она не будет иметь классов.
Да, для одного элемента правила окажутся разбросанными по нескольким местам. И это нормально, и даже лучший вариант. Как нормально и то, что одно из этих мест будет с
А применение id для JS настолько же оправдано, как и для CSS. В первую очередь потому, что мозг программиста тоже не резиновый и не восьмиядерный. Ему в разы проще оперировать конкретикой, а не абстракциями, которые сам чёрт не знает что захватывают в свою область видимости.
________
Дизайнеры всё время забывают, что потом их стиль полезут «по быстрику» править говнокодеры. Особенно если фрилансерам дадут на час работы.
здесь и инлайновые стили не западло
охуенчик. удачи с саппортом.
CSS прекрасно поддаётся рефакторингу в будущем, на зрелом проекте
особенно, когда у тебя зоопарк из инлайна, #id, !important, и классов.
всё лучше и лучше.
А применение id для JS настолько же оправдано, как и для CSS
угу. понятно, шо wikipedia.org/something#id-2456-78-a удобнее, чем wikipedia.org/something#origins
А кроме религиозных причин, другие — есть?
гибкость, сложность дальнейшей поддержки и ограничение в функционале браузера(#id как закладка) — это религиозные-то? ясно-понятно.
Зоопарк плохо. Организованный зоопарк — хорошо.
Разумеется ID вешается на элемент дизайна, который в единственном количестве, и с таким именем чтобы было понятно что это.
Основной принцип — чем ближе к конкретике, тем лучше. И ради этого порой приходится и классы разбивать на несколько.
ID — это не только и не столько закладка, сколько явные имена постоянных объектов, в том числе блоков. Например, на форуме есть HTML-редактор. На кой хер ему лишние классы, если можно дать понятный ID? И если там надо скрыть границу, гораздо надёжнее написать это в инлайне. А если убрать пару кнопок — то правило с ID редактора и ID кнопки. Просто потому что редактор на форуме ОДИН, и кнопка такая в нём ОДНА.
Таким образом, когда появится второй редактор, вероятно тот же самый, но уже совсем в другой роли (например, для личных сообщений) — его не зацепит правилами инлайнового. Ему напишут свои правила. И снова, по ID. И свои кнопки там будут скрыты.
Но ничто не мешает там оказаться классу, который будет раздавать цвет или нажимаемость кнопкам зависимо от имеющихся ролей пользователя. И это будут классы. И это лучший вариант, когда директивы для этих классов, и директивы по ID, хранятся в разных местах. Ибо нехер пытаться рулить всем и сразу.
Вы пацана вообьще запутаете.
По существу:
ID — чисто для селектора css — можно, но нужно ли?
на каждый однотипный елемент придумывать новый ИД? или однотипный елементам давать одинаковые ИД?
именно из за риска одинаковых ИД я думаю и не рекомендуют чистым верстальщикам его использовать, потом эти «косяки» — будут мешать какому нибуть джаваскрипт-девелоперу
проще ненакосячить будет если просто придерживатся правила — что ИД использовать только для какойто динамики — тех же закладок(прыжки по анкорам), или яваскрипта
а для цсс и классов хватит
Про «на каждый однотипный елемент придумывать новый id» у автора не было. ID вешаются на ключевые элементы дизайна.
А вот другую ошибку я встречал чуть ни в половине гайдов — не пользуйтесь id, пользуйтесь классами. И дятлы стадами создают классы, с тем же именем что и id, и удивляются потом когда их правила со звездой накрывают медным тазом.
Правильный селектор для элемента блока — это ID блока, а уже далее по классам или даже тегам, включая их номер по порядку. В небольших блоках вполне допустимо. Потому единственно правильный ответ — И ТО, И ДРУГОЕ надо пользовать.
Пример: видишь большой банер на DOU сверху?
HTML:
<div id="max-header-adv-id" class="max-header-brand">CSS:
Александр
schwarzlichtbezirk
minodvesP Vasya
Vladyslav Melnyk
Nastya Machinskaya
Gennady Dogaev
Євген Козлов
Олексій Пєніє
Victor Musienkо
Nikolay Mihalych
Alex Bylim
Podoprigora Alexandr
Podoprigora Alexandr
Anatoliy Osypenko
Олексій Пєніє
Anatoliy Osypenko
Nazár Atamaníuk
Gennady Dogaev
Євген Козлов
Andre
.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 {....
Я уже молчу, что так позволительно переиспользование имён класса, когда один и тот же признак должен требовать немного разного поведения от разных блоков — разве не логично дать ему ОДНО имя класса? А вот когда класс на класс накладывается, такая неразъебримое счастьё наступает, особенно саппорту.
когда их правила со звездой
т.е. типа, это связано с выбороом «id vs class» и в одном из вариантов правило с «*» будет удобным?
А вот другую ошибку я встречал чуть ни в половине гайдов — не пользуйтесь id, пользуйтесь классами.
Это не гайды, а best practices. К сожалению, в них почти никогда не заморачиваются объяснением почему так, а не иначе. Найти объяснение — задача читающего. Может так конечно и лучше, если рассчитано на ленивых джунов, не желающих углубляться. Раздражает только что потом они безапеляционно заявляют то же самое другим, но уже не понимая почему именно так.
большой банер был и есть всегда один
1. На самом деле, нельзя заранее знать какая сущность вот прям железно одна, а какая через месяц понадобится «такая же, но чуть-чуть другая»
2. Часто если есть id — он есть для других целей — js или в целях навигации. И вот захочешь ты поменять его из-за этих других целей, а что он у тебя и в css — забыл. В ember.js кстати такой проблемы нет — id компонента обычно генерируемый (кажется можно в это вмешаться, но это будет плохая практика) и ты его не знаешь чтобы использовать в css. И юзаешь классы без мук выбора.
Потому что реальное объяснение «лучших практик» — банальнейшая копипаста друг у друга. Мануалы пишутся чаще всего теми, кто не знает что 1.2 * 5 ≠ 6.
Коментар порушує правила спільноти і видалений модераторами.
Ты просто не понимаешь о чем говоришь, серьезно.
Nikolay Mihalych
Mykola Gurov
George
Yura Storchaka
32 коментарі
Додати коментар Підписатись на коментаріВідписатись від коментарів