{"action":"created","issue":{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/1061","repository_url":"https://api.github.com/repos/bem/bem-forum-content-ru","labels_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/1061/labels{/name}","comments_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/1061/comments","events_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/1061/events","html_url":"https://github.com/bem/bem-forum-content-ru/issues/1061","id":164899947,"number":1061,"title":"Problems? POBEMS! PostCSS плагин для BEM","user":{"login":"belozyorcev","id":1655916,"avatar_url":"https://avatars.githubusercontent.com/u/1655916?v=3","gravatar_id":"","url":"https://api.github.com/users/belozyorcev","html_url":"https://github.com/belozyorcev","followers_url":"https://api.github.com/users/belozyorcev/followers","following_url":"https://api.github.com/users/belozyorcev/following{/other_user}","gists_url":"https://api.github.com/users/belozyorcev/gists{/gist_id}","starred_url":"https://api.github.com/users/belozyorcev/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/belozyorcev/subscriptions","organizations_url":"https://api.github.com/users/belozyorcev/orgs","repos_url":"https://api.github.com/users/belozyorcev/repos","events_url":"https://api.github.com/users/belozyorcev/events{/privacy}","received_events_url":"https://api.github.com/users/belozyorcev/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/labels/bem-tools","name":"bem-tools","color":"bfe5bf"},{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/labels/css","name":"css","color":"c7def8"},{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/labels/tools","name":"tools","color":"c7def8"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":17,"created_at":"2016-07-11T18:13:34Z","updated_at":"2016-07-14T08:00:30Z","closed_at":null,"body":"Всем привет. Благодаря репозиторию @tadatuta наткнулся на интересный плагин к PostCSS - rebem-css. Изначально показался он показался менее удобным, чем написание по-старинке.\r\n```stylus\r\n// по-старинке\r\n.object-item\r\n  &_status_bad\r\n    .object-item__extended\r\n      background: #000\r\n\r\n// rebem-css\r\n:block(object-item)\r\n  &:mod(status bad)\r\n    :block(object-item):elem(extended)\r\n      background: #000\r\n```\r\n\r\n## Проблема 1\r\nПодсветка синтаксиса при таком написание режет глаза...\r\n\r\n## Проблема 2\r\nКод становится ещё длиннее... Утешает только то, что можно применять bem-naming\r\n\r\n## Проблема 3\r\nПисали, что такой синтаксис ближе к BEMHTML. Но как по мне, он не дотягивает немного.\r\n\r\nВ итоге я решил сделать PR. В репозиторий `rebem/css`, переписав практически весь плагин. Но т.к. на слитие нужно время, а мне он нужен уже сейчас, был сделан новый плагин с расширенным функционалом на основе rebem-css.\r\n\r\n[POBEMS](https://www.npmjs.com/package/pobems) поддерживает как синтаксис rebem-css, так и свой.\r\n## Решение 1-й проблемы\r\nДобавлена возможность написания через кавычки\r\n```\r\n:block('object-item')\r\n```\r\n## Решение 2-й проблемы\r\nДобавлен контекст блока при объявлениях элементов и модификаторов.\r\nТеперь можно писать так\r\n```stylus\r\n:block('block')\r\n  &:mod('mod val')\r\n\r\n    :elem('elem1')\r\n      background: #000\r\n\r\n    :elem('elem2'):mod('mod val')\r\n      width: 10px\r\n\r\n      :elem('elem3')\r\n        \r\n.block_mod_val .block__elem1 \r\n.block_mod_val .block__elem2_mod_val .block__elem3\r\n```\r\n\r\n## Решение 3-й проблемы\r\nДля объявления модификаторов добавил более привычный синтаксис через запятую `:mod('mod', 'value')`\r\n\r\n```stylus\r\n:block('block')\r\n  &:mod('mod' -> 'val')\r\n\r\n    :elem('elem1')\r\n      background: #000\r\n\r\n    :elem('elem2'):mod('mod' -> 'val'):mod('mod2' -> 'val2')\r\n      width: 10px\r\n        \r\n.block_mod_val .block__elem1 \r\n.block_mod_val .block__elem2_mod_val.block__elem2_mod2_val2\r\n```\r\n\r\nИли в LESS стиле\r\n```less\r\n:block('block') {\r\n    &:mod('mod', 'val') {\r\n        :elem('elem1') { }\r\n        :elem('elem2'):mod('mod', 'val'):mod('mod2', 'val2') {}\r\n    }\r\n}\r\n```\r\n# Что дальше...\r\nДалее часть изменений отправлю в репозиторий `rebem/css`, а в pobems буду добавлять более \"горячие\" нововведения. [Репозиторий POBEMS](https://github.com/belozyorcev/pobems)"},"comment":{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/comments/232591199","html_url":"https://github.com/bem/bem-forum-content-ru/issues/1061#issuecomment-232591199","issue_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/1061","id":232591199,"user":{"login":"Guria","id":36270,"avatar_url":"https://avatars.githubusercontent.com/u/36270?v=3","gravatar_id":"","url":"https://api.github.com/users/Guria","html_url":"https://github.com/Guria","followers_url":"https://api.github.com/users/Guria/followers","following_url":"https://api.github.com/users/Guria/following{/other_user}","gists_url":"https://api.github.com/users/Guria/gists{/gist_id}","starred_url":"https://api.github.com/users/Guria/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Guria/subscriptions","organizations_url":"https://api.github.com/users/Guria/orgs","repos_url":"https://api.github.com/users/Guria/repos","events_url":"https://api.github.com/users/Guria/events{/privacy}","received_events_url":"https://api.github.com/users/Guria/received_events","type":"User","site_admin":false},"created_at":"2016-07-14T08:00:30Z","updated_at":"2016-07-14T08:00:30Z","body":"А ещё можно моду css в bemhtml, чтобы само в файл эмитилось :)"}}
{"actor":{"display_login":"Guria"}}