По промокоду «YouMeow» скидка 900 рублей на интенсив или программу профессии в Академии - tml.io/mbf87

Помню-помню: "Вы можете выбрать любую методологию для верстки учебного проекта. Главное, чтобы это был БЭМ" (Николай Громов). :)

@GriNAME

7 жыл бұрын

Ага) или как меня устроит любой твой положительный ответ))

Очень кратко, ясно, понятно все. Спасибо за урок🤝

Делайте дальше) отличный формат

Первое видео о кодинге/верстке, где вместо ускорения 1,25 или 1,5 полезно будет даже замедлить))

Очень круто! Спасибо!

всё чётко объяснили спасибо

Спасибо за видео. Интересно было бы послушать про веб компоненты.

Спасибо вам за HTML Шорты. Отличный формат. Все четко и по делу.

Пожалуйста, больше видео о методологиях

У него на футболке кулак с шестью пальцами 😂

Вы заметили, что на футболке изображен кулак с шестью пальцами?

@Raccoon_ph

5 жыл бұрын

Это кулак святого верстальщика!

@slavkapiyavka

5 жыл бұрын

это было не сложно, особенно когда ни слова не понял про бэм.

@alitim5139

5 жыл бұрын

Вячеслав Медовый бля точно

Приятный чувак

Было бы интересно послушать про Flex-магию и как она меняет (поменяет) стандартную разметку страниц.

@HTMLAcademyTV

7 жыл бұрын

Спасибо за вопрос!

Спасибо! Можете пожалуйста рассказать подробнее про модификаторы? Какие есть "зарезервированные" имена них. Как придумывать дополнительные имена, если у элемента, по задумке дизайнера, очень много вариаций внешнего вида. Например взять заголовок .card__title в блоке .card. К примеру дизайнер решил что будет 2 цвета карточек и два цвета заголовков (инверсия), карточки будут 3х размеров и соответственно заголовок будет иметь 3 варианта отступов. Текст обычный и заглавными буквами, и 2 варианта размера шрифтов. Пример конечно надуманный, но мне встречались несколько раз дизайны с таким огромным количеством вариаций для элементов и блоков. Подскажите как максимально правильно и рационально создавать модификаторы и как их правильно именовать, если их все равно довольно много. Этот вопрос меня интересует больше всего, как я стал пользоваться БЭМ. Сам БЭМ мне очень нравится и теперь не представляю верстку без него, но все равно хотелось бы улучшить свое качество организации классов модификаторов для блока и его элементов.

@HTMLAcademyTV

7 жыл бұрын

Спасибо за подробный вопрос!

@DmitriyVereschagin

4 жыл бұрын

@@HTMLAcademyTV Чудесный, содержательный ответ.

@user-jd7ub3tq2b

2 жыл бұрын

@@DmitriyVereschagin ор

Расскажите пожалуйста про Веб компоненты, CSS-модули и CSS -в-JS - Поподробней. Создайте обзорку с примерами =))) - Очень нужно.

Здравствуйте, а можно подробнее про веб компоненты?

5:19 "... руками и возможны конфликты". Конфликты возможны, только если писать селекторы через пробел. Если же необходимо для элемента указать его хитрую ручную вложенность, то, если не употреблять миксы по БЭМу, можно пользоваться селекторами без пробелов типа .list__item.--in-root1-block или же эту вложенность воспринимать как модификатор и писать в качестве значения атрибута (использовать возможности CSS2.1), это уже iAMcss.

Спасибо, что делаете такой контент. И, Вадим, это не шоу, это выпуск!

@pepelsbey

7 жыл бұрын

Oleksandr про БЭМ - это выпуск, а в целом - шоу, по мотивам американского «TV show», то есть сериал.

есть ли репо на гитхабе, с таким каноничным кодом

В HTML 5.2 добавили возможность подключать стили в конце страницы, можно уже сейчас это использовать и как поведут себя браузеры которые пока или совсем не поддерживают такой способ подключения стилей? Спасибо за ответ!

@HTMLAcademyTV

7 жыл бұрын

Спасибо за вопрос!

@kyrylo_alekseev

7 жыл бұрын

Стили и так можно подключать в любом месте на странице

@GraxGool

7 жыл бұрын

Но не нужно

@user-wd3tk1jg8p

7 жыл бұрын

Я так уже делал

Привет! Только начал изучение БЭМ, появился вопрос - возможно ли использовать связку БЭМ + bootstrap (или другой фреймворк)? В интернете оч мало инфы по этому поводу, а все примеры что есть - представляют франкенштейнов, которые ни туда ни сюда. Или же БЭМ не совместим с фреймворками и только самому все компоненты описывать?

@HTMLAcademyTV

2 жыл бұрын

Привет! Бум совместим со всем. На примере Bootstrap мы можем описывать интерфейс с помощью БЭМ, а функциональную часть будет брать на себя Bootstrap. Смешивать БЭМ и Bootstrap - нормально. Но из-за нехватки опыта, конечно, может получиться Франкенштейн.

Спасибо, очень актуально! А может кто-нибудь привести примеры "правильной" верстки по БЭМ-методологии, пожалуйста? Или где их можно посмотреть? Я имею ввиду сайты полностью, не только отдельные блоки.

@jaygatsby5745

7 жыл бұрын

яндекс :)

@Denistrator

7 жыл бұрын

Как ни парадоксально, но Яндекс не лучший пример. А вот bem.info отличный пример

@hippycore0

7 жыл бұрын

Сам весь стек не использую и считаю его не естесвенным чтоли ) но очень люблю саму методологию наименования. вот пример от гугла, где поступают так же ) getmdl.io/components/index.html -

@doombu

7 жыл бұрын

вот сайтик от гугла на бэм - getmdl.io/ . И сама эта библиотека тоже используем бэм внутри.

@svetlana_wo

7 жыл бұрын

Здорово, всем спасибо!

[вопрос] а что ещё с transition не дружит, кроме text-decoration?

@HTMLAcademyTV

7 жыл бұрын

Спасибо за вопрос 🙂

@maksymleonidov7059

7 жыл бұрын

Жаль, что для значений auto не работает. Например height: auto

@Cj_segr

6 жыл бұрын

font-weight, text-transform лучше это в процессе верстки узнавать т.к. есть свойства который раньше не анимировались и со временем стали

@user-ed5rs4ne2y

6 жыл бұрын

display: block/none;

Хм, уже 5 утра, почему бы не позадротить ролики по Вебу?

Валим, рад видеть во-первых! Во-вторых, многие хорошие разрабы за рубежом не пользуются БЭМ. Почему?

С моей точки зрения, CSS модули, как менее радикальный способ избежать конфликты в CSS - один из лучших, на сегодняшний день. Преемущество перед бем - не нужно выдумывать названия для блоков, достаточно органично интегрируется с JS.

ну Блок_элемент понятно...Что за модификатор, так и не понял...

элементы элементов - это БЁМ (с) kizu :)

Ну как, как переносить блоки между проектами, если каждый дизайнер делает свои марджины, паддинги, расположение элементов? Всё равно ведь чуть ли не с нуля приходится всё переделывать. Или может я слишком буквально понимаю методологию? Далее, для каждого блока своя папка. Не совсем представляю, как это: получается, лендинг с 15 секциями на этапе разработки разрастается в огромный проект? Не очередной ли это маразм от мира фронтенда? Или БЭМ неприменим для лендингов?

@sweetestsurrender1109

7 жыл бұрын

Dmitriy Mamaev Но если добавить модификатор к body, то мы вернемся к использованию наследования, но ведь бэм методология этого не предусматривает? или в этом случае предусматривает?

@Denistrator

7 жыл бұрын

Sweetest Surrender, да, предусматривает

@sweetestsurrender1109

7 жыл бұрын

Спасибо! Всё равно это выглядит очень теплично: из проекта в проект появляются одни и те же блоки, которые можно приспособить к проекту одним-двумя css-классами. Допускаю, что это может быть строка поиска, навигация, логотипы. А что делать с информационными блоками, где тексты располагаются то в одном месте, то в другом, то в столбик, то в два, то в три, может текста вообще не быть, только картинки. Может, я просто не могу постичь необходимый уровень абстракции для всего этого)) Посоветуйте пожалуйста что-нибудь почитать, чтобы понять, что БЭМ действительно ускоряет процесс разработки. Потому что сейчас это выглядит, как переписывание старой разметки раз за разом в каждом проекте, разве это быстро?) Или использование БЭМа обусловлено ТОЛЬКО удобством дальнейшей поддержки (тут я абсолютно согласна)?

Реквестирую шорты про использование заголовков h1-h6

@HTMLAcademyTV

7 жыл бұрын

Обязательно расскажем (:

Хочу такую же футболку😣

Если у меня есть две одинаковые разметки, но одна из них содержит 5 элементов на всю ширину, а другая нет, то мне по логике БЭМ-а нужно добавить каждому модфикатор. А используя обычное наследование - всего один класс родителю. И таких примеров можно привести немало.

@r45her

6 жыл бұрын

Добавь модификатор родителю и задай стили элементам через вложенность. Какие проблемы? По БЭМу так делать можно.

что за книга оранжевая справа?) И да - интересно было бы узнать что там за библиотека)

@juliahtml

7 жыл бұрын

Книга «Пиши, сокращай» book.glvrd.ru/

@TheKoloky

7 жыл бұрын

спасибо)

Вроде очень удобно делать адаптив используя smartgrid (CSS Grid), но поддержка этих сеток не очень. Что использовать? Тот же bootstrap? Или по-старинке через медиазапросы?

@HTMLAcademyTV

7 жыл бұрын

Спасибо за вопрос

@olegplahotniy7307

5 жыл бұрын

bootstrap 4 самое оно.

Вопрос: Рекомендуют псевдоэлементы начинать с двойного двоеточия :: (::before например), допустимо ли использовать одинарное двуеточие?

@HTMLAcademyTV

7 жыл бұрын

Спасибо за вопрос!

@nbot3000

3 жыл бұрын

Допустимо, и так и так.

"Это HTML шорты и Вадим Макеев"

Вадим, CSS Модули или БЭМ?

@Hazratgs6

7 жыл бұрын

В чем преимущества БЭМ перед CSS Модулями? По моему, усложнение, это каждый раз писать блок, элемент и модификатор (header--menu--active), мне больше нравится CSS Модули

@kuzvas

7 жыл бұрын

Кода веб-компоненты придут во всю силу, то они может просто изменят спеку css-modules и её все будут использовать.

@Hazratgs6

7 жыл бұрын

Хороший комментарий, естественно CSS Модули в паре с компонентами

@kuzvas

7 жыл бұрын

Во vue.js, с их подходом с однофайловыми компонентами css-modules это вообще отлично заходит. Один файл-один компонент и внутри у него стили для этого компонента.

@Hazratgs6

7 жыл бұрын

А разве в reactjs по другому? там ведь тоже, один компонент, один css модуль

Насколько совместим БЭМ с семантическими тэгами HTML5? Можно ли и нужно ли использовать , , или все блоки делать только на дивах?

@AbraKadabra000

5 жыл бұрын

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

Так что же смягчает буква ё? =) 4:17

Что значит используемый код повторно или другими? Это же просто классы, чтобы понимать что за блок мы описываем и проще было разбираться в коде. О чем постоянно говорят? Это же не какая то библиотека, чтобы ее повторно использовать. Пожалуйста дайте ответ, чувствую себя необразованность от такого

@AbraKadabra000

5 жыл бұрын

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

BEM не нужен. Веб компоненты в массы.

@hippycore0

7 жыл бұрын

github.com/styled-components/styled-components

@SARFEX

7 жыл бұрын

www.polymer-project.org/

История БЭМ: kzread.info/dash/bejne/h42Xw9apZcKvqLQ.html

Miss me?

Да Яндекс рулит...Однако о_О

Вадим левша? :)

Что за 6-ти пальцевая кисть?!?)))))

Да отстой этот бэм... Все css классы надо хэшировать вэбпаком

@AbraKadabra000

5 жыл бұрын

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

BEM ruuulzzz! :)

Дикция хорошая, но он тараторит ппц...

Shadow DOM похоронит БЭМ

@AbraKadabra000

5 жыл бұрын

@Neo это оно и есть

БЭМ это недотехнология . То что предлагает БЭМ ( многакратное использование модулей ) , уже давно реализовано в React , Angular . Только работодатель разработчикам на React платит 200 000 р. , а разработчикам на БЭМ 20 000.

@MrVinnyvan

5 жыл бұрын

К чему это ёрничание? Что такое "разработчики на БЭМ"? Ниже правильно сказали: БЭМ это не технология, а методология.

@AbraKadabra000

5 жыл бұрын

без бэма в реакт-проекте разработчики занимаются деланьем_сайтов а с бэмом у нас высркокачественный конвеер где все делают как один человек. бем же это не только правила именования

на майке кулак с 6 пальцами

"ЦЭ ЭС ЭС" facepalm

Слушал и прослезился. К каждому проекту этот парень придумывал что-то новенькое. Апосля этого он будет нас учить. Так он еще и не сам до этого додумался? А рассказывает, как про пришествие апостолов. Если верстальщик так туп и с первого раза не поймет, что на любой странице существуют независимые блоки, то ему никакой бэм и джем не помогут.

почему шорты а не трусы?

@HTMLAcademyTV

7 жыл бұрын

Short - по английски короткий, трусы - underpants.

@svetlana_wo

7 жыл бұрын

Двусмысленность (преднамеренная или нет, не знаю) и правда есть :) Но да, одно из из значений "short" - короткометражный фильм. Думаю, здесь это и имеется ввиду.

@juliahtml

7 жыл бұрын

У трусов можно ошибиться с ударением и получить нечто совсем другое