Задать вопрос
eruditecat

Кот Учёный

Красноглазик
Ответы пользователя по тегу Веб-разработка

  • Как использовать BEM+JADE+GULP?

    eruditecat
    @eruditecat
    Красноглазик
    Попробуйте это:

    const pug = require('pug');
const pbem = require('pbem');

const scope = pbem({
  blocksDir: __dirname + 'views/blocks'
}).precompile();

const separateTemplate = pug.compileFile(__dirname + 'views/page.pug');

let renderedSeparateTemplate = separateTemplate({
  block: scope.createBlock
});

    В шаблонах:

    index.pug:
    != block('block-name').local('varName', 'varValue')

    blocks/block-name/block-name.pug:
    div&attributes( attributes() )
!= element('element-name').local('varName', varName)


    https://github.com/bigslycat/pbem
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно сделать идеальную структуру less или scss файлов в случае больших адаптивных проектов?

    eruditecat
    @eruditecat
    Красноглазик
    Методология БЭМ придётся Вам по вкусу. Но, я так понимаю, в Вашем текущем проекте — уже поздно. Тем не менее, на текущем этапе разработки Вам будет полезно использовать эти принципы. Изучите вопрос. А Ваша проблема решается так:

    @mobile: (max-width: 460px);
@tablet:  (min-width: 461px) and (max-width: 970px);
@desktop: (min-width: 971px);

// Значения придуманы от балды

.selector {
  @media @mobile {
    // ...
  }
  @media @tablet {
    // ...
  }
  @media @desktop {
    // ...
  }
}


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

    Тем временем, где-то в идеальном мире:

    /* Файл /bem/block/block.less */
.block {
  @media @mobile {
    // ...
  }
  @media @tablet {
    // ...
  }
  @media @desktop {
    // ...
  }
}

/* Файл /bem/block/__element/block__element.less */
.block {
  &__element {
    @media @mobile {
      // ...
    }
    @media @tablet {
      // ...
    }
    @media @desktop {
      // ...
    }
  }
}
    Ответ написан
    Комментировать
    Комментировать