Ребят, подскажите кто что думает о методологии верстки БЭМ. Это уже стандарт среди многих верстальщиков практически, но меня интересует в чем преимущества данного подхода?
Я лично использую самый упрощенный вариант БЭМа — просто верстаю блоками. Например:

HTML:

<div class="person">
    <div class="hand">
        ...
    </div>
    <div class="leg">
    </div>
</div>

CSS:

.person .hand {...}
.person .leg {...}
Оценить:|
  
Комментировать
Раздел: Обучение    
Просмотров: 3133
Комментариев (15)
  1. Greg
    Григорий Кочнев [Greg]
    02.10.2013 в 22:20

    А где тут у вас БЭМ? Вроде бы как обычный код. ;)
    На сколько мне известно, технология БЭМ имеет смысл в больших проектах.
    Я не использую. Мало того, был случай когда просили переделать БЭМ верстку не большого проекта в человеческий вид ))

    • almac
      02.10.2013 в 22:27

      Ну в моем случае блок — это ‘person’, а ‘leg’ и ‘hand’ — элементы блока
      К каждому блоку и элементу можно применить модификатор, и будет что нить типа ‘person modified-margin’

      • slaffko
        02.10.2013 в 22:57

        Если уж БЭМ то ваш код должен выглядеть так:

        <div class="person">
            <div class="person_hand">
               ...
            </div>
            <div class="person_leg">
               ...
            </div>
        </div>
        .person {...}
        .person_hand{...}
        .person_leg {...}
  2. slaffko
    02.10.2013 в 22:53

    Мое мнение: если сравнивать с автомобилестроением то БЭМ это большой конвеер. Если вы работаете над большим проектом в комманде нескольких верстальщиков — то есть необходимость работать по единым правилам, как вариант БЭМ. Иначе, я не вижу смысла его использовать: куча ограничений в написании кода, и громоздкие избыточные классы.

  3. kukushka
    02.10.2013 в 23:07

    Как раз БЭМ и придумался для того, чтобы в css не было таких конструкций:

    .person .hand {...}

    В данной методологии как раз предполагается схема «1 тег — 1 класс». Для чего это нужно? Например, если вдруг код

    <div class="person">
    
        <div class="hand">
    
            ...
    
        </div>
    
        <div class="leg">
    
        </div>
    
    </div>

    задумаете превратить в такой:

    <div class="hand">
    
        <div class="person">
    
            ...
    
        </div>
    
        <div class="leg">
    
        </div>
    
    </div>

    чтобы у вас не поломались стили в исходном css.

    • slaffko
      02.10.2013 в 23:13

      Мне кажется странной боязнь вложенных классов.
      А пример который вы привели — не понимаю зачем такое делать

      • kukushka
        02.10.2013 в 23:29

        Не знаю, насколько плотно вы занимаетесь версткой и занимались ли поддержкой сайтов, которые сверстали — в любой момент программист может каким угодно образом изменить верстку, что даже может произойти так, как в моем примере. Очень часто с таким встречался и встречаюсь. И чтобы после того, как вы сверстали страницу, человек, который в дальнейшем будет работать с вашей версткой — не плевался, что вы прописали в стилях, что один блок должен быть обязательно внутри другого, чтобы у него сработали определенные стили — а в примере из топика — .hand должен быть всегда внутри .person — даже чтобы тупо добавить блок .hand еще куда-то на странице, нужно будет тащить за собой блок .person, тем самым замусоривая верстку лишней разметкой.

        • slaffko
          03.10.2013 в 00:33

          Если программист меняет разметку как ему вздумается, без понимания последствий — лучше поменять программиста, а не верстку. Надо поменять верстку — я поменяю.
          Я делаю разметку такой что нет смысла ТАК менять. Также я стараюсь предвидеть возможные изменения и учесть в верстке.
          А насчет разбираться в чужой верстке и не плеваться — БЭМ не поможет криворукому верстальщику сверстать так чтоб другой человек легко разобрался.

          • kukushka
            03.10.2013 в 00:44

            Да, вы правы конечно. Но есть много всяких но: вы можете делать верстку типовой страницы, не зная, какими будут другие страницы, после этого верстка попадает к программисту, который не может связаться с вами, но ему нужно встроить вашу верстку в движок, донастроить страницы, которые будут содержать в себе другие блоки и элементы, либо потом окажется, что нужно поменять расположение блоков, что-то убрать или добавить — и вот тут все узкие места верстки сразу будут видны. Хорошо, если просто встречаются двойные селекторы типа .person .head, а когда верстальщик вместо классов использует теги, типа такого: .header .menu ul li или что-то подобное, вот тут и начинается тот ад, от которого БЭМ частично спасает. Понятно, что всего не учтешь, но такие очевидные моменты сразу всплывают при использовании каскада.
            Кстати, расскажите, взаимодействуете ли вы с программистом? Если да, то насколько часто, какие проблемы приходится решать? Поддерживаете ли дальше проекты, которые используют вашу верстку? Просто интересно.

            Оценить:|0
              
          • slaffko
            03.10.2013 в 14:49

            Я внештатный сотрудник Новосибирской студии. У них в штате только дизайнеры и программисты. Иногда требуется доверстать, страницы, но ни разу не было проблем у программистов с готовой версткой. Я спрашивал у программистов, какие есть пожелания к верстке, может что не так делаю — все ОК.
            Иногда при работе с другими программерами бывали трудности, особенно в связи с их желаним использовать таблицы и тег br.
            Не во всех проектах требуется поддержка, в основном в тех, где я кроме верстки делал весь сайт на CMS. Иногда, если найдут баг в верстке — исправляю

            Оценить:|0
              
  4. dimka
    Dimka Klusevich [dimka]
    03.10.2013 в 08:43

    Грубо сказано, но БЭМ это:
    Нет селектора кроме класса .
    Нет вложенных селекторов — всё определяется одним селектором класса (одноуровневая структура селекторов). БЭМ конечно, хорош для сапорта средних и больших проекто, но я лично склонюсь больше к техники многослойного CSS.. Вот небольшой доклад . http://vimeo.com/60204943

Оставить комментарий