Jump to content
  • 0

BEM с человеческим лицом


nerv
 Share

Question

В статье BEM с человеческим лицом есть комментарий:

БЭМ — был полезен, но морально устарел. При современной компонентной разработке фронтенда, с возможностью инкапсуляции и байндинга стилей — вообще не нужен. Народ по иннерции пихает его куда можно и куда нельзя, но пора уже посмотреть на него свежим взглядом. Главная польза БЭМа в том, что в свое время он показал, что в стилях — должен быть порядок и за это ему спасибо.

кто что думает по этому поводу?

Link to comment
Share on other sites

23 answers to this question

Recommended Posts

  • 0
58 минут назад, nerv сказал:

кто что думает по этому поводу?

Мое мнение не поменялось. БЭМ - шлак :D

Точнее, как почти всегда у яндекса, идея была неплохая, но реализация шлак. 

Link to comment
Share on other sites

  • 0
1 час назад, alexriz сказал:

Мое мнение не поменялось. БЭМ - шлак

тогда, какой подход ты используешь? Например, согласной моей ссылке под альтернативой BEM понимаются css modules

http://www.sitepoint.com/understanding-css-modules-methodology/

http://glenmaddern.com/articles/css-modules

https://github.com/css-modules/css-modules

https://habrahabr.ru/post/270103/

Link to comment
Share on other sites

  • 0

Я отделил тему про БЭМ, а то к теме что читают форумчане, это как-то не очень относится.

2 часа назад, nerv сказал:

тогда, какой подход ты используешь? Например, согласной моей ссылке под альтернативой BEM понимаются css modules

Скажем так, модульность появляется в любой методологии, сама собой. Просто потому, что это логично и естественно. Ну правда. Тот же БЭМ элементарно разбивается на модули, более того они прямо к этому призывают. 
Другой вопрос в самом подходе организации имен селекторов для компонентов. Хоть они упорно пытаются навязать, что это прям не так уж важно, и писать нечто подобное .block--element__mod - это норм, хотя это нифига не норм. Ну да черт с ним с самим синтакисом, это не так принципиально, при том, что по тому же БЭМ можно прикрутить и менее адовое именование. Да в статье правильно написано все, вцелом. Потому что в БЭМ и правда слишком много жести, надо быть гибче. Но в статье не описан один важный момент, как и во всех про БЭМ. Не нужно в понятие модификатора пихать все подряд. Я искренне считаю, что это слишком очевидно. По БЭМ модификатор это чуть ли не все, начиная от просто чуть другого цвета фона в элементе, заканчивая какими-то опциональными вещами, вроде отображения элемента. А всего-то нужно разделить понятия модификатора на модификатор (mod) и состояине (state). Так жить становится на много проще.
Это что касается моего отношения к БЭМ.

Что касается меня, то у меня тут свой подход в организации css. Кстати, похож на OPoR. Но свой вариант я вывел намного раньше чем узнал об OPoR, честно :)
У меня есть следующие понятия:
block, element, mod, state и js-*

Никаких лишних префиксов не нужно. Использую только .js-*, для навешивания js функционала, но это как отдельный слой. 
В частности тот же SASS позволяет избавиться от необходимости писать в HTML всякого рода дублирования вроде
class="block-element block-element_mod", а просто class="block-element_mod". Потому что всей компановкой занимается SASS и мне не нужно об этом задумываться вообще.
В SASS это выглядет примерно так:

.block {
    $root: &;
    some: css;
    &-element {
        some: css;
        &_mod {
            @extend #{$root}-element;
            some: css;
        }
        &.state {
            somestate: css;
        }
    }
}

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

Относительно состояний в моем понимании могут быть глобальные состояния, вроде .hide, .show и тому подобное, и некоторые индивидуальные специфические для какого-то рода компонентов. Тогда они описываются внутри этого компонента, как показано выше.

Так же в статье есть речь о том, что нужно под каждый компонент выделять свою ноду в html. В общем я с этим согласен. Кроме ситуаций с иконками. К ним я отношусь по разному, в большинстве случаев, я стараюсь вешать их на ПЭ, а не как отдельную ноду. Ну если уж другого выхода нет, то тогда это отдельная нода, хотя меня это невероятно бесит :)
Для иконок у меня есть отдельный компонент, например .icon. И чтобы добавить к чему-то иконку просто достаточно добавить .icon_iconame

<div class="block-element icon_iconame">Some Text</div>

Но так как в самом .icon описано самое базовое поведение конки, можно выполнить уточнения в следсивии слияния двух компонент.

.block {
    $root: &;
    some: css;
    &-element {
        some: css;
        &_mod {
            @extend #{$root}-element;
            some: css;
        }
        &.state {
            somestate: css;
        }
        &[class^="icon_"], &[class*=" icon_"] {
            somechange: forelem;
            &:before {
                somechange: foricons;
                change: size;
              	some: color;
            }
        }
    }
}

Да это несколько нарушает понятие инкапсуляции, но все таки: "Сейчас к людям надо помягше. А на вопросы смотреть ширше." :)

Вот в общем-то мои мысли по поводу БЭМ, модульности и вообще подходу к css. Для меня это работает, вероятно для кого-то нет, по каким-то причинам. Но тут уж я ничего поделать не могу :)

  • Like 1
Link to comment
Share on other sites

  • 0
40 минуты назад, alexriz сказал:

Никаких лишних префиксов не нужно.

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

  • Like 1
Link to comment
Share on other sites

  • 0
2 минуты назад, wwt сказал:

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

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

  • Like 1
Link to comment
Share on other sites

  • 0
18 час назад, alexriz сказал:

и писать нечто подобное .block--element__mod - это норм

Так это ересь какая то а не БЭМ )))

18 час назад, alexriz сказал:

В SASS это выглядет примерно так:

Хорошо, а в чём принципиальное отличие от БЭМ подхода, кроме неосмысленного именования (block)? И что мешает использовать модификатор d БЭМ, аналогичным образом ? Собственно &--mod  и &--state .

 

Link to comment
Share on other sites

  • 0
55 минут назад, andrey7287 сказал:

Так это ересь какая то а не БЭМ )))

Ну открой соглашение по именованию в БЭМ и посмотри...
Модификатор элемента: .block-name__elem-name_mod-name
 

55 минут назад, andrey7287 сказал:

кроме неосмысленного именования (block)?

Неосмысленное именование. Это пример вообще-то :facepalmxd:

55 минут назад, andrey7287 сказал:

И что мешает использовать модификатор d БЭМ, аналогичным образом ? Собственно &--mod  и &--state .

ничего не мешает, в БЭМ так и есть да. Но это неудобно.

И потом, я не собираюсь навязывать что-то, все равно это неблагодарное занятие и никому не интересно. Используйте что хотите, мне то какое дело, в общем-то :) @nerv задал мне вопрос, я ответил как я к этому подхожу. Все.

  • Like 1
Link to comment
Share on other sites

  • 0
1 час назад, alexriz сказал:

Ну открой соглашение по именованию в БЭМ и посмотри...
Модификатор элемента: .block-name__elem-name_mod-name

Да, только модификатор сейчас через "--" делается, по этому приведённая запись и вызвала недоумение. 

2 часа назад, alexriz сказал:

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

Мне интересно. По сути у тебя тот же БЭМ, только в профиль. Хотя идеи возможно и полезные, возьму на заметку.

Link to comment
Share on other sites

  • 0

Я согласен с этим утверждением на все сто. БЭМ дал главное - научил людей избавляться от мусорной свалки в CSS. А ещё я считаю, что все эти ваши SASS, SCSS и т.п. вместе с переменными должны умереть. Как только везде заюзают Web Components всё это станет ненужно. Вот тогда и наступит верстальческий рай :)

  • Like 2
Link to comment
Share on other sites

  • 0
3 минуты назад, Great Rash сказал:

А ещё я считаю, что все эти ваши SASS, SCSS и т.п. вместе с переменными должны умереть.

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

7 минут назад, Great Rash сказал:

БЭМ дал главное - научил людей избавляться от мусорной свалки в CSS.

только добавил свалки в html xD

  • Like 2
Link to comment
Share on other sites

  • 0
55 минут назад, andrey7287 сказал:

Да, только модификатор сейчас через "--" делается, по этому приведённая запись и вызвала недоумение. 

модификатор ваще то через одно подчеркивае, а елемент либо __, либо --. Так в доках написано. А как кто делает это уже его личное дело.

  • Like 1
Link to comment
Share on other sites

  • 0
1 час назад, alexriz сказал:

только добавил свалки в html xD

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

Опять же БЭМ идеально подходит только для больших порталов где есть 100500 повторяющихся элементов с разными скинами.  Для лендингов БЕМ бесполезен чуть менее чем полностью.

  • Like 1
Link to comment
Share on other sites

  • 0
9 минут назад, Great Rash сказал:

На самом деле нет. Просто надо уметь его готовить :)

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

<div class="block-name__elem-name block-name__elem-name_mod-name block-name__elem-name_mod-state">Some Text</div>

То есть прописать целых три класса вместо одного.
В итоге на выходе в коде получается какая-то нечитабельная помойка

  • Like 1
Link to comment
Share on other sites

  • 0
21 минуты назад, alexriz сказал:

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


<div class="block-name__elem-name block-name__elem-name_mod-name block-name__elem-name_mod-state">Some Text</div>

То есть прописать целых три класса вместо одного.
В итоге на выходе в коде получается какая-то нечитабельная помойка

Ты так пишешь будто длинные названия классов - это что-то плохое. Ну и что, что их три? Главное ведь не длина атрибута class, а понятность чтения кода. Не понимаю чем это хуже той лапши на SASS, которую ты привёл в пример. Особенно забавно получается если приходится разбираться в таком коде, не имея исходников (был у меня такой случай).

UPD:

Дополню справедливости ради, что я тоже не в восторге от системы модификаторов, предложенной яндексом. Сам то я примерно так пишу:

<div class="block-name__elem-name _mod-1 _mod-2"></div>

философия БЭМ сохраняется, но код при этом читабельней. Однако это только потому, что ИЕ6 помер наконец. А ведь БЭМ придумывали ещё в эпоху актуальности ИЕ6, в котором (сюрприз-сюрприз) в CSS не работала запись такого вида:

.block-name__elem-name._mod-1 {
  /* ... */
}

Именно оттуда растут ноги такого длинного объявления модификаторов.

  • Like 2
Link to comment
Share on other sites

  • 0
33 минуты назад, Great Rash сказал:

Ты так пишешь будто длинные названия классов - это что-то плохое. Ну и что, что их три? Главное ведь не длина атрибута class, а понятность чтения кода.

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

33 минуты назад, Great Rash сказал:

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

У меня как раз лапши и не получается, в html подобный пример я бы записал максимум так:

<div class="block-elem_mod state">Some Text</div>

Ничего лишнего, сразу понятно, что за элемент, к какому блоку относится, какую модификацию имеет, в каком состоянии находится.

.block {
   padding: 10px;
}
.block-elem,
.block-elem_mod {
    margin: 5px;
}
.block-elem_mod {
    color: #800;
}
.block-elem.state {
    background: #080;
}

Так примерно css будет выглядеть. .block-elem_mod стакается вместе с базовым block-elem, т.к. расширяется от него, дальше уточняется индивидуально mod версия. .state может быть как глобальным, так и индивидуальным, как в данном случае. 

Все вполне понятно.

На sass это вообще будет выглядить цельным блоком

.block {
    $root: &;
    padding: 10px;
    &-elem {
        margin: 5px;
        &_mod {
            @extend #{$root}-elem;
            color: #800;
        }
        &.state {
            background: #080;
        }
    }
}

На чем писать это уже выбор каждого (конечно на css)

33 минуты назад, Great Rash сказал:

Особенно забавно получается если приходится разбираться в таком коде, не имея исходников (был у меня такой случай).

Ну это уже отдельная проблема, всяких препроцессоро-дротеров, которые не думают над тем, что получается на выходе. Тогда да, налепят такого, что никаких концов не найти

  • Like 1
Link to comment
Share on other sites

  • 0

Ну собственно твоя реализация ничем не отличается от классического БЭМ. Вопрос вкуса как писать модификаторы, через 2 подчёркивания или через одно. Например в твоей реализации элементов придётся в CSS использовать camel case, про который тоже куча народу скажет своё "фи". Так что вкусовщина всё это.

Почему в яндексе твой подход не прокатил бы я уже написал собственно.

  • Like 1
Link to comment
Share on other sites

  • 0

Я очень часто замечаю, что многие фукают на БЭМ, но по сути используют его принципы в какой-либо интерпретации. 

БЭМ не умер и никуда не денется, даже после появления CSS Modules с его неймспейсами. Он позволяет писать css стили модульно и в этом его преимущество, особенно для внедрения в различные стеки по типу Angular 2 или React based архитектуры.

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

Edited by Svatov
  • Like 2
Link to comment
Share on other sites

  • 0
В 3/24/2016 в 15:09, Great Rash сказал:

Я согласен с этим утверждением на все сто. БЭМ дал главное - научил людей избавляться от мусорной свалки в CSS. А ещё я считаю, что все эти ваши SASS, SCSS и т.п. вместе с переменными должны умереть. Как только везде заюзают Web Components всё это станет ненужно. Вот тогда и наступит верстальческий рай

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

а) с одной стороны очень прохоже на то, что с приходом неймспейсов в css (css_modules/web_conponents) БЕМ станет не нужен

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
12 часа назад, Great Rash сказал:

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

даже разработчики браузеров уходят от практики "выключения js", к примеру в Firefox убрали из настроек отключение скриптов, оно осталось только через about:config,

Link to comment
Share on other sites

  • 0

 

26.03.2016 в 12:33, Great Rash сказал:

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

Как минимум JS необходим, но для аналитики не обязателен, Можно чисто на PHP написать аналитику, которая даже время пребывания на странице будет показывать и ни какая метрика не нужна станет. 

Я вот большой не сторонник транспайлеров и препроцессоров(пусть сдохнет еще и TS с React и VUE). БЕМ мне начал нравится года два назад. Раньше я на OOCSS работал обычно, но на форуме даже ни одной темы. БЕМ реально хороший.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Kaido
      Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
       
        <div class="content"> <button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button> </div> <div class="modal"> <div class="modal__wrapp" data-target="first"> <div class="modal__content"> <button class="modal__close">Закрыть</button> модальное окно <button data-path="policy">Политика</button> </div> </div> <div class="modal__wrapp" data-target="policy"> <div class="modal__content"> <button class="modal__close">Закрыть</button> политика </div> </div> </div> .modal { --transition-time: 0.3s; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; cursor: pointer; overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp { display: none; cursor: default; width: fit-content; height: fit-content; } .modal__content{ position: absolute; left: 500px; width: 500px; height: 500px; display: flex; color: white; flex-direction: column; text-align: left; background-color: #000; } .modal__content button{ width: 200px; height: 50px; margin: 50px 0; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp.modal-open { display: flex; } .disable-scroll { position: relative; overflow: hidden; height: 100vh; position: fixed; left: 0; top: 0; width: 100%; } .fade { opacity: 0; transition: opacity var(--transition-time); } .fade.animate-open { opacity: 1; transition: opacity var(--transition-time); } .fadeInUp { opacity: 0; transform: translateY(vw(-100)); transition: opacity var(--transition-time), transform var(--transition-time); } .fadeInUp.animate-open { opacity: 1; transform: translateY(0); transition: opacity var(--transition-time), transform var(--transition-time); } .modal__wrapp[data-target="policy"] .modal__content{ left: 1050px; background-color: #000; opacity: .5; } class Modal { constructor(options) { let defaultOptions = { isOpen: () => {}, isClose: () => {}, } this.options = Object.assign(defaultOptions, options); this.modal = document.querySelector('.modal'); this.speed = false; this.animation = false; this.isOpen = false; this.modalContainer = false; this.previousActiveElement = false; this.fixBlocks = document.querySelectorAll('.fix-block'); this.focusElements = [ 'a[href]', 'input', 'button', 'select', 'textarea', '[tabindex]' ]; this.events(); } events() { if (this.modal) { document.addEventListener('click', function(e){ const clickedElement = e.target.closest('[data-path]'); if (clickedElement) { let target = clickedElement.dataset.path; let animation = clickedElement.dataset.animation; if (clickedElement.classList.contains('modal-close')) { this.close(); } let speed = clickedElement.dataset.speed; this.animation = animation ? animation : 'fade'; this.speed = speed ? parseInt(speed) : 300; this.modalContainer = document.querySelector(`[data-target="${target}"]`); this.open(); return; } if (e.target.closest('.modal__close')) { this.close(); return; } }.bind(this)); window.addEventListener('keydown', function(e) { if (e.keyCode == 27) { if (this.isOpen) { this.close(); } } if (e.keyCode == 9 && this.isOpen) { this.focusCatch(e); return; } }.bind(this)); this.modal.addEventListener('click', function(e) { if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) { this.close(); } }.bind(this)); } } open() { this.previousActiveElement = document.activeElement; this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`); this.modal.classList.add('is-open'); this.disableScroll(); this.modalContainer.classList.add('modal-open'); this.modalContainer.classList.add(this.animation); setTimeout(() => { this.options.isOpen(this); this.modalContainer.classList.add('animate-open'); this.isOpen = true; this.focusTrap(); }, this.speed); } close() { if (this.modalContainer) { this.modalContainer.classList.remove('animate-open'); this.modalContainer.classList.remove(this.animation); this.modal.classList.remove('is-open'); this.modalContainer.classList.remove('modal-open'); this.enableScroll(); this.options.isClose(this); this.isOpen = false; this.focusTrap(); } } focusCatch(e) { const focusable = this.modalContainer.querySelectorAll(this.focusElements); const focusArray = Array.prototype.slice.call(focusable); const focusedIndex = focusArray.indexOf(document.activeElement); if (e.shiftKey && focusedIndex === 0) { focusArray[focusArray.length - 1].focus(); e.preventDefault(); } if (!e.shiftKey && focusedIndex === focusArray.length - 1) { focusArray[0].focus(); e.preventDefault(); } } focusTrap() { const focusable = this.modalContainer.querySelectorAll(this.focusElements); if (this.isOpen) { focusable[0].focus(); } else { this.previousActiveElement.focus(); } } disableScroll() { let pagePosition = window.scrollY; this.lockPadding(); document.body.classList.add('disable-scroll'); document.body.dataset.position = pagePosition; document.body.style.top = -pagePosition + 'px'; } enableScroll() { let pagePosition = parseInt(document.body.dataset.position, 10); this.unlockPadding(); document.body.style.top = 'auto'; document.body.classList.remove('disable-scroll'); window.scroll({ top: pagePosition, left: 0 }); document.body.removeAttribute('data-position'); } lockPadding() { let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px'; this.fixBlocks.forEach((el) => { el.style.paddingRight = paddingOffset; }); document.body.style.paddingRight = paddingOffset; } unlockPadding() { this.fixBlocks.forEach((el) => { el.style.paddingRight = '0px'; }); document.body.style.paddingRight = '0px'; } } const modal = new Modal({ isOpen: (modal) => { console.log(modal); console.log('opened'); }, isClose: () => { console.log('closed'); }, });  
    • By stasN1
      Мне нужен такой результат :

      Не понимаю почему background не применяется вокруг иконок:

       
      Сам код:
      Html:
      css:

      Html:
      <section class="finish"> <div class="container"> <h2 class="finish_header">По окончании обучения Вы сможете!</h2> <div class="finish_divider"></div> <div class="finish_wrapper"> <finish_item> <div class="finish_round"> <img src="/icons/finish/1 (1).png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/2.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/3.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/4.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/5.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> </div> </div> </section>  
      Css:
      .finish .finish_wrapper { margin-top: 41px; display: flex; justify-content: space-between; } .finish .finish_wrapper .finish_item { width: 204px; } .finish .finish_wrapper .finish_item .finish_round { width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; } .finish_descr { font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо!
       

      Уже решил, спасибо!
      У меня CSS селектор вида:
      .finish .finish_wrapper .finish_item .finish_round

      А должен быть:
      .finish .finish_wrapper finish_item .finish_round
      Т.е. без точки перед finish_item, так как это не класс, а элемент
    • By Dos1er
      Приветствую! 
      Подскажите, плиз, как сделать чекбокс как на скрине? 
      Я новичок в верстке и что-то не могу разобраться в кастомизации данной штуки

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy