Имена классов в верстке | Как лучше называть элементы в разметке

✏️ Разбираемся как лучше называть классы элементам пользовательского интерфейса.
🔴 Timeline:
▶ 00:00​ | Введение
▶ 00:35​ | Общие правила по неймингу классов
▶ 02:05​ | Структурные блоки с семантическими тегами
▶ 03:00​ | Структурные блоки с нейтральными тегами (div, span)
▶ 03:55​ | Списки
▶ 04:11​ | Карточки
▶ 04:22​ | Изображения
▶ 04:35​ | Текст
▶ 05:00​ | Элементы форм
▶ 05:52​ | Чекбоксы и радиокнопки
▶ 06:50​ | Разное
▶ 08:18​ | Модификаторы размеров
▶ 08:28​ | Модификаторы наличия чего-либо
▶ 08:59​ | Модификаторы состояний
▶ 09:45​ | Заключение
📚 Ссылки:
➖ Часто используемые имена классов в HTML-разметке: github.com/aleksanderlamkov/h...
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #html #css

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@REUTYO]

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

[@errorerror3564]

Когда чел в ютубе настолько шпарит в своей теме, что ты не успеваешь за потоком его мыслей и ставишь скорость в -0.5, чтобы успеть это переварить, но понимаешь, что он и при 0.25 жжёт и мощи замедления не хватает ) Спасибо большое за ролик, было полезно

[@jekakavaltchuk2714]

Очень качественно, спасибо

[@alexb.2616]

Понравилась подача "неправильно" \ "правильно". И готовые наборы имён для различных элементов - бесценно! Спасибо!

[@solvefixed]

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

[@akylbekbaizakov]

👍

[@yuriyvyatkin]

Спасибо большое, Александр. Вы делаете много добра, выпуская подобные видео.

[@carry-on-chaos4032]

Привет, Александр! Помню ты мне помогал в телеге пару лет назад, ревьил мой код!)) Сегодня наткнулся на твой канал! Респект и уважуха!

[@Napolion4ik]

Очень класная подача материала , однозначно лайк и подписка , жду следующих видео

[@alla6361]

Спаситель!!!!!

[@viktor_gazeof]

Спасибо! Все по полочкам. Хотелось бы побольше уроков, но только по Java Script🔥

[@AleksanderLamkov]

Ещё чуть-чуть контента по верстке, затем начнётся JavaScript! :)

[@arzamaskin_kirill]

было интересно послушать. Классная подача. Если не ошибаюсь, то еще при использовании article, внутри должен быть h заголовок.

[@AleksanderLamkov]

Спасибо :) Да, в article нужно помещать заголовок.

[@biscvie]

👍👍

[@egorrublev5529]

познавательно спасибо Александр

[@un_defined]

спасибо. все же если для фреймворка версия лучше сразу в кэмелкейсе называть - меньше проблем потом при подключении стиля. еще момент на всякий tiny - читается как 'тайни'

[@user-fd5le5bx9j]

Саня - красава! Очень ценно!)))

[@smotritelyoutube]

Как всегда супер, лайк!!!

[@vitaliydurov]

А будут уроки по js?:)

[@AleksanderLamkov]

Да, конечно, но чуть позже, скорее всего в следующем месяце начнем.

[@ezoflin_home]

Спасибо! Это было полезно! Очень много полезных именований, которые можно применить на практике при том же БЭМ о котором пишут тут некоторые. А не планируются видео с созданием своей сборки на webpack или vite? И вообще видео на эту тему? А так же по git (именно про работу в гит, не гитхаб)?

[@AleksanderLamkov]

Будет про сборку на Vite, где подключим как минимум шаблонизатор разметки и препроцессор стилей. Про гит будет, но после курса по JS.

[@myotraykt]

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

[@AleksanderLamkov]

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

[@AntonioBenderas]

Будет на канале плейлист по продвинутой вёрстке сложного макета?

[@AleksanderLamkov]

Привет! Да, будет, по БЭМ методологии с применением препроцессора стилей.

[@AntonioBenderas]

@@AleksanderLamkov крутотень! ещё бы желательно на сборщике, уж простите мою наглость, но без сборщиков никто не верстает сейчас)

[@AleksanderLamkov]

Понимаю. Верстку со сборщиком проектов планировал выпускать после курса по JS. Любой сборщик - черный ящик для любого начинающего, а без знаний JS лезть в его конфигурацию вообще нет смысла, поэтому не рискну спешить давать такой контент.

[@kalts_daniil]

Многие имена классов похожи на бутстраповские)

[@svitboomer8840]

Привет! Как относишься к tailwindcss?

[@AleksanderLamkov]

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

[@svitboomer8840]

@@AleksanderLamkov Уааааа, ты ответил. Спасибо, за высказанное мнение. Просто я смотрю, что к нему есть некий ажиотаж, но прикола понять не могу

[@AleksanderLamkov]

Он используется разве что в стартапах, где нужно «на коленке» набросать интерфейс для MVP, но если проект чуть более серьезный, тем более со своей дизайн-системой, то куда лучше будет использовать модульные стили или просто использовать БЭМ.

[@xOceanSpirit]

Почти 10 лет верстаю. До сих пор нейминг блоков на многостраничниках самое нелюбимое занятие. Я стили пишу быстрее чем имена придумываю адекватные.

[@mooneymangavlentmoon8850]

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

[@AleksanderLamkov]

Привет! Про гриды могу предложить для начала это глянуть: kzbin.info/www/bejne/gKOugHuEh9OFg8k Применять гриды удобно для различных каталогов товаров / услуг, где элементы зачастую имеют одинаковую ширину и размещаются плиткой друг за другом по 2 и больше штук в одном ряду. Гриды я бы не советовал использовать там, где нет четкого понимания количества колонок в одном ряду или же там, где разные отступы между дочерними элементами. В таких местах лучше использовать флексы. Про «макет с 5 колонками» мне не понятно. Может есть ссылка на пример дизайна в фигме?

[@BayOneTee]

Братух, давай по БЕМу лучше ))

[@AleksanderLamkov]

Эта тема как раз следующая :) И текущее видео будет дополнять его. Тут ведь сугубо про слова, которые можно юзать в именах классов, а БЭМ - больше про компонентный подход и сущности «блок» и «элемент».

[@KEMP-ln4dv]

а как же бэм😢

[@AleksanderLamkov]

Привет! Тема текущего ролика никак не противоречит методологии БЭМ, а напрямую её дополняет. Здесь я говорю про слова, которые можно использовать в качестве классов, в т. ч. для БЭМ-блоков, в части имени класса для БЭМ-элементов или БЭМ-модификаторов. Ну а про БЭМ в принципе на днях будет отдельное видео :)

[@user-id8rb6ks2c]

1. Я, перед началом просмотра: "Ну давай, опять всё БЭМ'ом обмазывать..." 2. "Новички выдумывают довольно странные и спорные сочетания..." Да. Например, вот такие: "чтобы ваша разметка была "качественной", "консенстентной", "понятной". Автор, уже сложно, относительно рассматриваемой темы. Понимаешь? Наугад ткнул на 3:37, о да... У нас же нет в распоряжении тега "section", так давайте будем называть тег section классом "section". А как же мы назовём тег "footer"? Мы дадим ему класс - footer! А если еще нагородить многосоставных модификаторов, значение которых в виде абстракции существует только в вашей (моей) голове и более ни кому не известно, (если не комментировать), становится совсем-совсем просто. Единственное что может вырасти вместе с объёмом навешанных на каждый тег, искусственно созданных сущностей, - это с ЧСВ у разработчика и количество человекочасов на расшифровку. А если, смысл в том, что все должны верстать на каком-то одном понятном всем языке, то такой язык - это HTML/CSS. Тебе НЕ в претензию, автор. Просто тема довольно вср*тая сама по себе.

[@AleksanderLamkov]

Есть теги, имена которых сами по себе довольно понятны любому человеку, что уж говорить про разработчика. Теги header, footer, section как раз из этой серии. Не задавать класс элементам в разметке мы не можем, иначе вес селекторов в CSS будет хаотичным. Задавать для иной класс, более осмысленный что ли, типа , стоит только в случае, если секции страницы нельзя подогнать под паттерн с одинаковыми вертикальными отступами. А по поводу «всратости темы» - подписчики просили, я сделал, люди благодны (звезды репозитория на гитхабе говорят сами за себя), я доволен. Твое мнение тоже имеет место быть, но похоже на ворчание ради ворчания 🙃

[@user-id8rb6ks2c]

@@AleksanderLamkov "но похоже на ворчание ради ворчания" - я приветствую идею того, что с самого начала освоения верстки нужно создавать для себя некие принципы именования кода, следовать им и попутно улучшать. Было бы неплохо если бы Вы попутно объяснили, что "нейминг" во первых: тема чисто локальная, для самого разработчика, а не панацея от всех бед; во-вторых, можно писать и прочее, если это работает, но желательно отказаться от "сахара" как можно раньше, если только не работаешь в Яндеске и в третьих, если "ты" приходишь на работу хоть куда-нибудь, где больше двух человек весь твой "нейминг" идет лесом и заменяется на актуальную версию bootstrap, например. А то ведь люди потом реально пишут: и . Насмотрелись. Кстати, если от отсутствия классов у человека ломается вес селекторов, может лучше видео про "каскадность" и "наследование" в CSS?

[@user-ww3br6qw6c]

Зачем изначально давать неправильную информацию людям , которые хотят освоить данную тему. Для начала расскажите им , что такое BEM, объясните. Например , называя класс user-name , вы нарушаете BEM. Уместнее назвать user__name тогда уже .

[@AleksanderLamkov]

Почему же информация неправильная? Разве она противоречит методологии БЭМ? Указывая имя класса как user для одного HTML-элемента и user-name для второго, мы, если пытаться оправдать такой нейминг по методологии БЭМ, создаем два БЭМ-блока, что, конечно, не совсем оптимально, но уж точно вполне валидно. Да и про БЭМ как раз будет следующее видео :) И текущее будет дополнять его. Тут ведь сугубо про слова, которые можно юзать в именах классов, а БЭМ - больше про компонентный подход и сущности «блок» и «элемент».

[@CoralLynx]

Где тут нарушение бэма? А как по твоему до него называли классы? Да и как по мне, инфа из ролика отлично накладывается на нейминг в самом бэме, я для себя парочку идей взял, спасибо автору! 🙏

[@user-ww3br6qw6c]

Неправильно потому , что если вы задаете класс user - по БЭМ это блок. А user__name и user__image это элементы блока . А так получается что вы просто ставите отдельные классы .

[@AleksanderLamkov]

В этом видео ни слова про БЭМ. Так и задумано. Не нужно пытаться натянуть эту тему на тему видео.

[@dofaqq]

​@@AleksanderLamkovа вообще сейчас без БЭМ ник и не пишет стили в проектах? Обязательно нужно БЭМ учить и только с ним все писать?

[@WERWOLION]

видео сразу в мусор название класса больше 2х слов уже не читаемый код а тут ещё и название сделал вложенным - это эпический слив ты бы ещё 47 слов залепил полным текстом в название каждого класса

[@AleksanderLamkov]

Видео про примеры слов, которые можно использовать в именах классов, а не про то, что стоит использовать как можно больше слов в имени одного класса. И если «3 слова в имени класса = нечитаемый код», то что остается? Плодить лишние подкомпоненты?

[@WERWOLION]

@@AleksanderLamkov Изучить БЭМ

[@AleksanderLamkov]

Хорошо. Тот же вопрос в новом контексте. Плодим избыточные БЭМ-блоки, которые используем лишь в одном месте, вместо условного header__menu-item?

[@WERWOLION]

@@AleksanderLamkov Нет не плодим т.к у тебя 10 раз вложенный модуль будет называться корень-10-раз-вверх__10-вложенность