Вопрос возник из-за наличия уровней в bem-components с реализациями под разные платформы?

https://github.com/bem/bem-components/tree/v2/desktop.blocks/input https://github.com/bem/bem-components/tree/v2/touch.blocks/input

Или это и есть ответ? ;-)

:) Да, частично ответ. Спасибо, @zxqfox. А если для своих блоков, не компонентных, как делить стили? Так например не только для desktop/touch, а разных соотношений сторон (4:3; 16:9), мобильных/планшетов. Применяя адаптивную верстку, что можно посоветовать? Конечно скорее всего на основе "@media", врятли есть альтернативы универсальней.

Можно точно так же распилить на уровни. Но для разных соотношений сторон, на мой взгляд, нет смысла делить, потому что нет случаев, когда в сборку попадут только стили для 4:3 или только 16:9. Стили будут всегда вместе. Для @media могу посоветовать использовать хелперы препроцессоров (того же стайлуса).

Например (если меня не побъет @tadatuta), можно делать так в базовом файле (это less):

    // breakpoints
    @bpMobile:  480px;
    @bpTablet:  768px;  @bpPreTablet: @bpTablet - 1;
    @bpDesktop: 1024px; @bpPreDesktop: @bpDesktop - 1;
    @bpWide:    1440px; @bpPreWide: @bpWide - 1;

    // presets
    @thin: ~"screen and (max-width: @{bpMobile})";; // [0-480]
    @mobile: ~"screen and (max-width: @{bpPreTablet})"; // [0-767]
    @tablet: ~"screen and (min-width: @{bpTablet}) and (max-width: @{bpPreDesktop})"; // [768-1023]
    @desktop: ~"screen and (min-width: @{bpDesktop}) and (max-width: @{bpPreWide})"; // [1024-1439]
    @wide: ~"screen and (min-width: @{bpWide})"; // [1440-∞)

И в ваших блоках:

    // usage
    .my-block {
        width: 200px;
        @media @wide {
            width: 300px;
        }
        @media @tablet {
            width: 100px;
        }
        @media @mobile {
            display: none;
        }
    }

На выходе будет:

.my-block {
  width: 200px;
}
@media screen and (min-width: 1440px) {
  .my-block {
    width: 300px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px - 1) {
  .my-block {
    width: 100px;
  }
}
@media screen and (max-width: 768px - 1) {
  .my-block {
    display: none;
  }
}

Пример для стилуса: https://github.com/verybigman/bem-grid/blob/master/common.blocks/variables/variables.styl https://github.com/verybigman/bem-grid/blob/master/common.blocks/mq/mq.styl

если меня не побъет @tadatuta

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

Спасибо :)

@zxqfox Написал stulys-ом в директории common.blocks/mq/mq.styl

bpMobile  =  480px;
bpTablet  =  768px;   bpPreTablet   = bpTablet - 1;
bpDesktop = 1024px;   bpPreDesktop  = bpDesktop - 1;
bpWide    = 1440px;   bpPreWide     = bpWide - 1;

thin    = "screen and (max-width: bpMobile)"; // [0-480]
mobile  = "screen and (max-width: bpPreTablet)"; // [0-767]
tablet  = "screen and (min-width: bpTablet) and (max-width: bpPreDesktop)"; // [768-1023]
desktop = "screen and (min-width: bpDesktop) and (max-width: bpPreWide)"; // [1024-1439]
wide    = "screen and (min-width: bpWide)"; // [1440-∞)

В блоке page (common.blocks/page/page.deps.js) сделал:

[{
    mustDeps : [
        { block : 'mq' }
    ]
}]

Теперь в других блоках проекта применяю: например:

.content
  @media desktop
       width: 69%;

Еще раз спасибо за помощь, вроде работает :)

@media screen and (min-width: 1024px) and (max-width: 1439px) {
  .content {
    width: 69%;
  }
}