Именование классов в HTML. Коротко о BEM: зачем и как его использовать. | Уроки HTML CSS

[@Illuwiel]

Как всегда коротко и понятно! 😊

[@irinakurbanova5918]

Спасибо, БЭМ крутая вещь)

[@zakassan]

Спасибо большое 😊

[@mexvision-3556]

Мне кажется момент с модификаторами был раскрыт не полностью, очень абстрактно, он хорошо бы ложился на кнопки. Не нужно создавать классы для каждой кнопки отдельно, если схожи и отличаются только цветом (как в примере). Создайте общий класс (блок) .btn, и добавьте класс .btn--blue (модификатор). Обычно модификаторы обозначаются как {класс к которому относится модификатор}--{название модификатора} и переопределяют\добавляют некоторые свойства блоку или элементу. Да, через двойной дефис. Это позволяет быстро добавлять модификаторы элементам, а также исключает ситуацию, когда мы модем использовать модификатор не в том месте где предполагалось, так как у модификатора всегда есть префикс в виде класса блока для которого он предназначен. Таким образом мы будем иметь следующую картину: блок .btn будет иметь модификаторы (.btn--blue, .btn--yellow, .btn--green). Модификаторов может быть несколько. К примеру . Что означает, у нас будет кнопка, она будет желтой, и она будет не залита цветом и иметь рамку. Убрав всего 1 модификатор btn--bordered мы получаем желтую залитую цветом кнопку. Это очень важная тема для полного понимания БЭМ.

[@kv3453]

Да , понятно но пипец все длинное 😊 и от этого никуда не деться у gpt как спросишь код по js тоже даёт названия переменных по 20 символов понятно что правильно , понятно но грузит пока прочитаешь 😊! За ссылку на распространенные названия спс , хороший выпуск !

[@mexvision-3556]

Ну, всегда приходится балансировать между длинным html и длинным css. Уберите БЕМ и получите кишки вложенностей в стилях. .nav .nav-list .item {} вместо .nav__item {}

[@DrazBit]

Говорят, что класс с указанием цвета-плохой тон. Ведь цвет также может поменяться

[@tutproweb]

Да, в правы. По хорошему нужно давать абстрактные названия. Например, main-color, accent-color и т.д.

[@влак-м2с]

Спасибо

[@user-frond-end_dev]

порожняк

[@tutproweb]

"Порожняк", потому что...? Хотелось бы услышать факты, чтобы делать видео лучше.

[@user-frond-end_dev]

@@tutproweb некоторые твои советы, некорректны и введут в заблуждение новичков

[@user-frond-end_dev]

@@tutproweb сколько времени практикует вёрстку? Твой почерк говорит о том, что ты фрилансер

[@tutproweb]

Думаю, время которое я верстаю не имеет значения. Я готов обсуждать все замечания, если они будут по фактам, а не голословные фразы "Ты даешь неверные советы", "Твои советы неправильные", " Твои советы вводят в заблуждение новичков" или "порожняк". Продолжим диалог?)

[@shokerface4173]

@@tutproweb а как надо надо вообще с классами работать дай совет пж или ссылку на источники как нибудь? чето я вообще не догоняю как это работает

[@sergeibogomolov6179]

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

[@tutproweb]

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