Комментарии

[rbelmega]

angular2 rocks! it works well with it

[GM2mars]

Какая-то бесполезная шляпа. Если мы хотим соблюдать область видимости в css достаточно использовать составные классы типа .menu .menu-links .menu-block и так далее (ну или просто использовать бэм). По моему некоторые разработчики уже просто не знают чем заняться и выдумывают всякую ерунду. Тем более css модули не решают никакую проблему (кроме надуманных). Для удобной классификации элементов достаточно использовать любой препроцессор и все будет на своих местах.

[iamstarkov]

@GM2mars

[olehreznichenko]

<style scoped>

[SilentImp]

@GM2mars нет, не достаточно. Никакой БЭМ не обеспечит изоляцию стилей.

@Nonlimit Поддержка на данный момент только в FF и то, кажется, с оговорками.

[radist2s]

Было бы интересно понять, как это можно использовать, например, с php-файлами. А так же было бы круто, если бы IDE делала авоткомплит для такого рода штук:

${styles.title}

[dzhiriki]

@radist2s postcss-modules создает JSON с маппингом имен для каждого файла стилей. А JSON можно читать уже на любом бекенде.

[kattiperk]

Кажется, изначально подразумевалось, что модули будуь независимыми по стилям. Но теперь засунули в js и сделали нечитаемые классы. Хотя используя подход CSS модулей легко создать свои и переиспользовать их без вреда для макета.

[virtyaluk]

@Nonlimit, неделю-две назад была статья о том, что "style scoped" помечен как deprecated в официальной спецификации в силу того, что только FF его поддерживает.

[virtyaluk]

Соглашусь с оратором выше, эти CSS-модули - бестолковый самопал, который добавляет больше проблем, чем решает. И пол беды если бы этот проект имел шансы стать частью официальной спецификации и получить нормальную поддержку в браузерах, а так, в силу своей "дырявости", бьюсь об заклад, этого никогда не случится. Разработчиков только недавно начали отучивать от мешанины разметки, стилей и кода, а здесь опять предлагают "вшивать" стили в код. Зачем? Почему то вспомнил WebComponents и Polymer, которые так и заглохли в силу несовершенности технологии и слабого желания производителей браузеров делать поддержку таких рисковых технологий. Гугл даже решили повременить с захватом мира Полимером.

[lexkrstn]

.font-size__serif--large - ни разу не БЭМ, а говнокод.

[iamstarkov]

@coderlex умерьте пыл, это другая нотация, но всё ещё бэм

[lexkrstn]

@iamstarkov я не про нотацию, сам такой пользуюсь. Обратите внимательнее на название блока. Вероятно подразумевается его использование в качестве миксина, но родительского блока font-size в реальности нет. Также как и элемента serif. Это противоречит идеологии БЭМ само по себе. Строго говоря этот код вообще не БЭМ, а просто что-то визуально похожее.

Но даже если выкинуть из головы идеологию БЭМ есть ошибка более низкого уровня - нарушение семантичности. Класс типа font-size__serif--large по сути ничем не отличаются от какого-нибудь margin__bottom--large. Всё это - смешивание разметки и стилей.

Если хочется вынести общие настройки в какое-то определенное место, то это реализуется не так, а переменной SASS/LESS:

.modal {
    ...
    &__title {
        font-family: $font-family-serif;
        font-size: $font-size-large;
    }
}

[petermihailov]

ну зато можно называть вещи своими именами и наконец избавиться от бесполезных префиксов в класснеймах типа btn__) В каждом файлике стилей писать просто .disable {...} .large {...} и не беспокоиться о том, что они перекроют другие стили или заматчатся на другие стили

[Pentaprizm]

У меня на проекте есть реальная боль. И я не понимаю как ее решат ЦСС-модули. Вот смотрите, допустим есть разметка

Text

Это мой виджет, встраиваемый на любые сайты клиентов. Окей, в CSS я пишу стили пытаясь изолировать их с помощью контейрнерного префикса , типа .widget p {}, .widget a{} К примеру мне важны лишь цвет текста и цвет ссылки и я задаю их.

Потом виджет встраиватеся на произвольный сайт на котором задано глобально a{margin-top: 50px}; Но моим ссылкам внутри виджета совершенно не нужен такой стиль. Я лезу в свой CSS и пишу .widget a{margin-top:0} чтобы победить это. Потом встраиваюсь на другой сайт, а там для параграфов задано вообще что-то невообразимое, например трансформация) Что мне делать? Для каждого элемента разметки внутри виджета писать полный набор стилей, а в виджете у меня 100 html тегов? Все равно можно что-то упустить, и глобальные стили сайта сработают непредсказуемо. К тому же CSS файл виджета при таком подходе раздуется неимоверно. Короче, я не понимаю как замена одного класса другим нечитабельным избавит меня от такой проблемы.

[Pentaprizm]

В посте выше я имел ввиду разметку вот такую -

Text

Link

[lexkrstn]

@Pentaprizm в любом стаилгайде в числе первых пунктов обычно есть правило: "Не применять стили к именам тегов глобально".