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

  Рет қаралды 3,647

Александр Ламков — Friendly Frontend

Александр Ламков — Friendly Frontend

Күн бұрын

✏️ Разбираемся как лучше называть классы элементам пользовательского интерфейса.
🔴 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

Пікірлер: 58
@AleksanderLamkov
@AleksanderLamkov 5 ай бұрын
📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
@REUTYO
@REUTYO 6 ай бұрын
хочу присоединиться к другим комментаторам и подтвердить что подача материала выше всяких похвал. спасибо тебе
@errorerror3564
@errorerror3564 5 ай бұрын
Когда чел в ютубе настолько шпарит в своей теме, что ты не успеваешь за потоком его мыслей и ставишь скорость в -0.5, чтобы успеть это переварить, но понимаешь, что он и при 0.25 жжёт и мощи замедления не хватает ) Спасибо большое за ролик, было полезно
@alexb.2616
@alexb.2616 6 ай бұрын
Понравилась подача "неправильно" \ "правильно". И готовые наборы имён для различных элементов - бесценно! Спасибо!
@solvefixed
@solvefixed 6 ай бұрын
огромное тебе спасибо, продолжай делать эти видео, пожалуйста) ты лучший кто подает материал из тех кого смотрел. даже мне, опытному сеньору, интересно смотреть тебя) рекомендую тебя своим знакомым кто только входит во фронтенд
@carry-on-chaos4032
@carry-on-chaos4032 6 ай бұрын
Привет, Александр! Помню ты мне помогал в телеге пару лет назад, ревьил мой код!)) Сегодня наткнулся на твой канал! Респект и уважуха!
@akylbekbaizakov
@akylbekbaizakov Күн бұрын
👍
@Napolion4ik
@Napolion4ik 6 ай бұрын
Очень класная подача материала , однозначно лайк и подписка , жду следующих видео
@yuriyvyatkin
@yuriyvyatkin 6 ай бұрын
Спасибо большое, Александр. Вы делаете много добра, выпуская подобные видео.
@egorrublev5529
@egorrublev5529 6 ай бұрын
познавательно спасибо Александр
@alla6361
@alla6361 3 ай бұрын
Спаситель!!!!!
@un_defined
@un_defined Ай бұрын
спасибо. все же если для фреймворка версия лучше сразу в кэмелкейсе называть - меньше проблем потом при подключении стиля. еще момент на всякий tiny - читается как 'тайни'
@viktor_gazeof
@viktor_gazeof 6 ай бұрын
Спасибо! Все по полочкам. Хотелось бы побольше уроков, но только по Java Script🔥
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Ещё чуть-чуть контента по верстке, затем начнётся JavaScript! :)
@smotritelyoutube
@smotritelyoutube 6 ай бұрын
Как всегда супер, лайк!!!
@arzamaskin_kirill
@arzamaskin_kirill 6 ай бұрын
было интересно послушать. Классная подача. Если не ошибаюсь, то еще при использовании article, внутри должен быть h заголовок.
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Спасибо :) Да, в article нужно помещать заголовок.
@ezoflin_home
@ezoflin_home 6 ай бұрын
Спасибо! Это было полезно! Очень много полезных именований, которые можно применить на практике при том же БЭМ о котором пишут тут некоторые. А не планируются видео с созданием своей сборки на webpack или vite? И вообще видео на эту тему? А так же по git (именно про работу в гит, не гитхаб)?
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Будет про сборку на Vite, где подключим как минимум шаблонизатор разметки и препроцессор стилей. Про гит будет, но после курса по JS.
@biscvie
@biscvie 4 ай бұрын
👍👍
@vitaliydurov
@vitaliydurov 6 ай бұрын
А будут уроки по js?:)
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Да, конечно, но чуть позже, скорее всего в следующем месяце начнем.
@user-fd5le5bx9j
@user-fd5le5bx9j 6 ай бұрын
Саня - красава! Очень ценно!)))
@myotraykt
@myotraykt 6 ай бұрын
Александр, здравствуйте! Планирую взять курс на фронтенд-разработчика на платформе «хекслет», что можете сказать об этой школе? И другие комментаторы, если вам есть что написать, буду рад иметь в виду)
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Привет! О хекслете у меня только хорошие впечатления, у них отличные вводные курсы, хорошие тренажеры, да и многие отзывались о них, как «сложно, но оно того стоит».
@kalts_daniil
@kalts_daniil 3 ай бұрын
Многие имена классов похожи на бутстраповские)
@AntonioBenderas
@AntonioBenderas 6 ай бұрын
Будет на канале плейлист по продвинутой вёрстке сложного макета?
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Привет! Да, будет, по БЭМ методологии с применением препроцессора стилей.
@AntonioBenderas
@AntonioBenderas 6 ай бұрын
@@AleksanderLamkov крутотень! ещё бы желательно на сборщике, уж простите мою наглость, но без сборщиков никто не верстает сейчас)
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Понимаю. Верстку со сборщиком проектов планировал выпускать после курса по JS. Любой сборщик - черный ящик для любого начинающего, а без знаний JS лезть в его конфигурацию вообще нет смысла, поэтому не рискну спешить давать такой контент.
@xOceanSpirit
@xOceanSpirit 4 ай бұрын
Почти 10 лет верстаю. До сих пор нейминг блоков на многостраничниках самое нелюбимое занятие. Я стили пишу быстрее чем имена придумываю адекватные.
@svitboomer8840
@svitboomer8840 6 ай бұрын
Привет! Как относишься к tailwindcss?
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Привет! Негативно. На выходе получается каша в разметке, которую очень сложно поддерживать.
@svitboomer8840
@svitboomer8840 6 ай бұрын
@@AleksanderLamkov Уааааа, ты ответил. Спасибо, за высказанное мнение. Просто я смотрю, что к нему есть некий ажиотаж, но прикола понять не могу
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Он используется разве что в стартапах, где нужно «на коленке» набросать интерфейс для MVP, но если проект чуть более серьезный, тем более со своей дизайн-системой, то куда лучше будет использовать модульные стили или просто использовать БЭМ.
@mooneymangavlentmoon8850
@mooneymangavlentmoon8850 6 ай бұрын
Можешь подробно рассказать про Гриды, когда нужно использовать, а когда нет, у тебя профессиональные видео сразу виден опыт, особенно интересуют сложные части макета с 5 колонками и разными отступами и пробелами.
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Привет! Про гриды могу предложить для начала это глянуть: kzbin.info/www/bejne/gKOugHuEh9OFg8k Применять гриды удобно для различных каталогов товаров / услуг, где элементы зачастую имеют одинаковую ширину и размещаются плиткой друг за другом по 2 и больше штук в одном ряду. Гриды я бы не советовал использовать там, где нет четкого понимания количества колонок в одном ряду или же там, где разные отступы между дочерними элементами. В таких местах лучше использовать флексы. Про «макет с 5 колонками» мне не понятно. Может есть ссылка на пример дизайна в фигме?
@BayOneTee
@BayOneTee 6 ай бұрын
Братух, давай по БЕМу лучше ))
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Эта тема как раз следующая :) И текущее видео будет дополнять его. Тут ведь сугубо про слова, которые можно юзать в именах классов, а БЭМ - больше про компонентный подход и сущности «блок» и «элемент».
@KEMP-ln4dv
@KEMP-ln4dv 6 ай бұрын
а как же бэм😢
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Привет! Тема текущего ролика никак не противоречит методологии БЭМ, а напрямую её дополняет. Здесь я говорю про слова, которые можно использовать в качестве классов, в т. ч. для БЭМ-блоков, в части имени класса для БЭМ-элементов или БЭМ-модификаторов. Ну а про БЭМ в принципе на днях будет отдельное видео :)
@user-id8rb6ks2c
@user-id8rb6ks2c 2 ай бұрын
1. Я, перед началом просмотра: "Ну давай, опять всё БЭМ'ом обмазывать..." 2. "Новички выдумывают довольно странные и спорные сочетания..." Да. Например, вот такие: "чтобы ваша разметка была "качественной", "консенстентной", "понятной". Автор, уже сложно, относительно рассматриваемой темы. Понимаешь? Наугад ткнул на 3:37, о да... У нас же нет в распоряжении тега "section", так давайте будем называть тег section классом "section". А как же мы назовём тег "footer"? Мы дадим ему класс - footer! А если еще нагородить многосоставных модификаторов, значение которых в виде абстракции существует только в вашей (моей) голове и более ни кому не известно, (если не комментировать), становится совсем-совсем просто. Единственное что может вырасти вместе с объёмом навешанных на каждый тег, искусственно созданных сущностей, - это с ЧСВ у разработчика и количество человекочасов на расшифровку. А если, смысл в том, что все должны верстать на каком-то одном понятном всем языке, то такой язык - это HTML/CSS. Тебе НЕ в претензию, автор. Просто тема довольно вср*тая сама по себе.
@AleksanderLamkov
@AleksanderLamkov 2 ай бұрын
Есть теги, имена которых сами по себе довольно понятны любому человеку, что уж говорить про разработчика. Теги header, footer, section как раз из этой серии. Не задавать класс элементам в разметке мы не можем, иначе вес селекторов в CSS будет хаотичным. Задавать для иной класс, более осмысленный что ли, типа , стоит только в случае, если секции страницы нельзя подогнать под паттерн с одинаковыми вертикальными отступами. А по поводу «всратости темы» - подписчики просили, я сделал, люди благодны (звезды репозитория на гитхабе говорят сами за себя), я доволен. Твое мнение тоже имеет место быть, но похоже на ворчание ради ворчания 🙃
@user-id8rb6ks2c
@user-id8rb6ks2c 2 ай бұрын
@@AleksanderLamkov "но похоже на ворчание ради ворчания" - я приветствую идею того, что с самого начала освоения верстки нужно создавать для себя некие принципы именования кода, следовать им и попутно улучшать. Было бы неплохо если бы Вы попутно объяснили, что "нейминг" во первых: тема чисто локальная, для самого разработчика, а не панацея от всех бед; во-вторых, можно писать и прочее, если это работает, но желательно отказаться от "сахара" как можно раньше, если только не работаешь в Яндеске и в третьих, если "ты" приходишь на работу хоть куда-нибудь, где больше двух человек весь твой "нейминг" идет лесом и заменяется на актуальную версию bootstrap, например. А то ведь люди потом реально пишут: и . Насмотрелись. Кстати, если от отсутствия классов у человека ломается вес селекторов, может лучше видео про "каскадность" и "наследование" в CSS?
@user-ww3br6qw6c
@user-ww3br6qw6c 6 ай бұрын
Зачем изначально давать неправильную информацию людям , которые хотят освоить данную тему. Для начала расскажите им , что такое BEM, объясните. Например , называя класс user-name , вы нарушаете BEM. Уместнее назвать user__name тогда уже .
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Почему же информация неправильная? Разве она противоречит методологии БЭМ? Указывая имя класса как user для одного HTML-элемента и user-name для второго, мы, если пытаться оправдать такой нейминг по методологии БЭМ, создаем два БЭМ-блока, что, конечно, не совсем оптимально, но уж точно вполне валидно. Да и про БЭМ как раз будет следующее видео :) И текущее будет дополнять его. Тут ведь сугубо про слова, которые можно юзать в именах классов, а БЭМ - больше про компонентный подход и сущности «блок» и «элемент».
@CoralLynx
@CoralLynx 6 ай бұрын
Где тут нарушение бэма? А как по твоему до него называли классы? Да и как по мне, инфа из ролика отлично накладывается на нейминг в самом бэме, я для себя парочку идей взял, спасибо автору! 🙏
@user-ww3br6qw6c
@user-ww3br6qw6c 6 ай бұрын
Неправильно потому , что если вы задаете класс user - по БЭМ это блок. А user__name и user__image это элементы блока . А так получается что вы просто ставите отдельные классы .
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
В этом видео ни слова про БЭМ. Так и задумано. Не нужно пытаться натянуть эту тему на тему видео.
@dofaqq
@dofaqq 6 ай бұрын
​@@AleksanderLamkovа вообще сейчас без БЭМ ник и не пишет стили в проектах? Обязательно нужно БЭМ учить и только с ним все писать?
@WERWOLION
@WERWOLION 6 ай бұрын
видео сразу в мусор название класса больше 2х слов уже не читаемый код а тут ещё и название сделал вложенным - это эпический слив ты бы ещё 47 слов залепил полным текстом в название каждого класса
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Видео про примеры слов, которые можно использовать в именах классов, а не про то, что стоит использовать как можно больше слов в имени одного класса. И если «3 слова в имени класса = нечитаемый код», то что остается? Плодить лишние подкомпоненты?
@WERWOLION
@WERWOLION 6 ай бұрын
@@AleksanderLamkov Изучить БЭМ
@AleksanderLamkov
@AleksanderLamkov 6 ай бұрын
Хорошо. Тот же вопрос в новом контексте. Плодим избыточные БЭМ-блоки, которые используем лишь в одном месте, вместо условного header__menu-item?
@WERWOLION
@WERWOLION 6 ай бұрын
@@AleksanderLamkov Нет не плодим т.к у тебя 10 раз вложенный модуль будет называться корень-10-раз-вверх__10-вложенность
Универ. 13 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:07:11
Комедии 2023
Рет қаралды 5 МЛН
터키아이스크림🇹🇷🍦Turkish ice cream #funny #shorts
00:26
Byungari 병아리언니
Рет қаралды 19 МЛН
She ruined my dominos! 😭 Cool train tool helps me #gadget
00:40
Go Gizmo!
Рет қаралды 54 МЛН
БЭМ методология за 10 минут | Основы для начинающих
10:01
Александр Ламков — Friendly Frontend
Рет қаралды 12 М.
Ускоряем верстку | Гайд по препроцессору стилей | Sass (SCSS)
27:02
Александр Ламков — Friendly Frontend
Рет қаралды 17 М.
CSS Функции calc(), min(), max(), clamp()
10:06
Александр Ламков — Friendly Frontend
Рет қаралды 4 М.
Как быстро стать JUNIOR frontend разработчиком | Что нужно знать | Roadmap 2024
18:14
Frontend Fundamentals | Александр Караджиков
Рет қаралды 1,5 М.
Фронтенд и моё первое тестовое задание - прожарка, анализ ошибок.
16:53
Александр Ламков — Friendly Frontend
Рет қаралды 11 М.
Frontend Roadmap 2024 | Что должен учить фронтенд-разработчик в 2024 году
14:35
Александр Ламков — Friendly Frontend
Рет қаралды 50 М.
Методология БЭМ. Теория + пример
15:16
MaxGraph - cайты как страсть
Рет қаралды 33 М.
Универ. 13 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:07:11
Комедии 2023
Рет қаралды 5 МЛН