В каких слечаях можно использовать ID?
Здравствуйте такой вопрос начал работать с bootstrap , так вот ,есть уже готовые блоки (со стилями и тд) но допустим я хочу их поменять , но не глобально на всей странице , а конкретно в одном месте конкретный блок ! могу ли я присваивать id этому блоку ,что бы поменять его или id используется для более глобальных вещей?
Дополнительно:
ну а почему бы не присвоить ему класс-модификатор, а не id?
а так... если Вы один на проекте иили нет никаких соглашений, можете использовать id как хотите.
Только держите в голове его особенности и ограничения:
- Должен быть уникальным в рамках страницы
- Специфичность селектора по id выше чем по классу.
- Класс модификатор имеется ввиду ,что я даю доп клас ПРИМЕР:
class="card и добавляю класс modifikator"?
Просто такая ситуация есть проект на bootstrape , (уже готовый) но мне некоторые блоки надо поменять ,создавая отдельные фаилы в css (для удобстав чтобы не менять ничего в style.css) и подсоеденяя их к style.css
какието вещи не работают , но когда я их начинаю уже менять конкретно в style.css они начинают меняться! Но при использовании ID все работает и в других мною созданых файлах . Может есть еще способы? - pologenki, класс модификатор это любой дополнительный класс, через который Вы в своей таблице стилей доопределите или переопределите имеющиеся стили блока.
Например:<button class="button button_bloody">Заказать</button>
<button class="button button_bloody">Заказать</button>
// базовый класс .button { background-color: black; color: wihte; border: 1px solid white; } // класс модификатор: .button_bloody { color: red; border-color: red; }// базовый класс .button { background-color: black; color: wihte; border: 1px solid white; } // класс модификатор: .button_bloody { color: red; border-color: red; }
Если всё работает при использовании ID а при использовании классов не работает, это означает что у селекторов, которые Вы пишите меньший приоритет чем у тех, что уже есть. Либо меньшая специфичность, либо такая же, но в итоговом коде Ваши стили выше чем применяющиеся.
Чуть подробнее про практику классов-модификаторов можно почитать, например, тут:
https://ru.bem.info/methodology/quick-start/#%D0%B...
Или тут https://habr.com/ru/companies/alconost/articles/419095/ - pologenki, если у Вас в разметке только классы бутстрапа, то назвать класс можете как угодно. Но лучше по имени сущности, которую стилизуете.
- Вадим, Подскажите а как можно поменять приоритет селекторов?
- pologenki, так всеж уже написано. у них либо специфичность больше должна быть, либо они должны быть ниже в итоговом css файле.
https://developer.mozilla.org/ru/docs/Web/CSS/Spec...
https://htmlacademy.ru/blog/css/which-selector
https://doka.guide/css/specificity/ - Вадим, спосибо огромное все получилось! Вы ГЕНИЙ!!!!
- pologenki, не за что. Отмечаем ответ решением?
- Вадим, угу :)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Использование ID в веб-разработке является одним из основных методов для идентификации конкретных элементов на веб-странице. ID представляет собой уникальный идентификатор элемента, который позволяет обращаться к нему напрямую через CSS или JavaScript.
В каких случаях можно использовать ID:
1. Уникальность элемента: ID должен быть уникальным на всей странице. Поэтому, если элемент должен быть уникальным и идентифицируемым, то лучше использовать именно ID.
2. Стилизация элемента: ID позволяет применять стили к конкретному элементу на странице. Это особенно удобно, если требуется изменить внешний вид только одного элемента.
3. Навигация по странице: Используя ID, можно легко создавать якоря для быстрой навигации по странице. Например, можно создать ссылку, которая будет переносить пользователя к определенному блоку на странице.
4. Валидация форм: ID можно использовать для идентификации элементов формы при валидации данных на стороне клиента.
Пример использования ID в HTML:
#uniqueElement { color: red; } <div id="uniqueElement">Это уникальный элемент</div>#uniqueElement { color: red; } <div id="uniqueElement">Это уникальный элемент</div>
Важно помнить, что хотя ID позволяет удобно работать с элементами на странице, его использование должно быть ограничено и рациональным. Не стоит злоупотреблять ID, так как это может привести к сложностям в поддержке кода и его расширении. Вместо ID в некоторых случаях лучше использовать классы для группировки элементов с общими стилями или поведением.