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

Подписаться 22 тыс.

Просмотров 3,4 тыс.

50% 1

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

Опубликовано:

30 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 57

@AleksanderLamkov 5 месяцев назад

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

@REUTYO 5 месяцев назад

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

@alexb.2616 5 месяцев назад

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

@errorerror3564 4 месяца назад

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

@solvefixed 5 месяцев назад

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

@biscvie 4 месяца назад

👍👍

@carry-on-chaos4032 5 месяцев назад

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

@yuriyvyatkin 5 месяцев назад

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

@alla6361 3 месяца назад

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

@Napolion4ik 5 месяцев назад

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

@ezoflin_home 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@arzamaskin_kirill 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@egorrublev5529 5 месяцев назад

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

@viktor_short 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@un_defined 16 дней назад

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

@smotritelyoutube 5 месяцев назад

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

@user-fd5le5bx9j 5 месяцев назад

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

@vitaliydurov 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@AntonioBenderas 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@AntonioBenderas 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@myotraykt 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@svitboomer8840 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@svitboomer8840 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@xOceanSpirit 4 месяца назад

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

@kalts_daniil 3 месяца назад

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

@mooneymangavlentmoon8850 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

Привет! Про гриды могу предложить для начала это глянуть: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JrKOHNRnRMg.html Применять гриды удобно для различных каталогов товаров / услуг, где элементы зачастую имеют одинаковую ширину и размещаются плиткой друг за другом по 2 и больше штук в одном ряду. Гриды я бы не советовал использовать там, где нет четкого понимания количества колонок в одном ряду или же там, где разные отступы между дочерними элементами. В таких местах лучше использовать флексы. Про «макет с 5 колонками» мне не понятно. Может есть ссылка на пример дизайна в фигме?

@BayOneTee 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@KEMP-ln4dv 5 месяцев назад

а как же бэм😢

@AleksanderLamkov 5 месяцев назад

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

@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 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@CoralLynx 5 месяцев назад

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

@user-ww3br6qw6c 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@dofaqq 5 месяцев назад

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

@WERWOLION 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@WERWOLION 5 месяцев назад

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

@AleksanderLamkov 5 месяцев назад

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

@WERWOLION 5 месяцев назад

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