{"action":"created","issue":{"url":"https://api.github.com/repos/bem/bem-forum-content-en/issues/4","labels_url":"https://api.github.com/repos/bem/bem-forum-content-en/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/bem/bem-forum-content-en/issues/4/comments","events_url":"https://api.github.com/repos/bem/bem-forum-content-en/issues/4/events","html_url":"https://github.com/bem/bem-forum-content-en/issues/4","id":75325616,"number":4,"title":"Mixes","user":{"login":"tadatuta","id":475746,"avatar_url":"https://avatars.githubusercontent.com/u/475746?v=3","gravatar_id":"","url":"https://api.github.com/users/tadatuta","html_url":"https://github.com/tadatuta","followers_url":"https://api.github.com/users/tadatuta/followers","following_url":"https://api.github.com/users/tadatuta/following{/other_user}","gists_url":"https://api.github.com/users/tadatuta/gists{/gist_id}","starred_url":"https://api.github.com/users/tadatuta/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tadatuta/subscriptions","organizations_url":"https://api.github.com/users/tadatuta/orgs","repos_url":"https://api.github.com/users/tadatuta/repos","events_url":"https://api.github.com/users/tadatuta/events{/privacy}","received_events_url":"https://api.github.com/users/tadatuta/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/bem/bem-forum-content-en/labels/css","name":"css","color":"c7def8"},{"url":"https://api.github.com/repos/bem/bem-forum-content-en/labels/documentation","name":"documentation","color":"c7def8"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":7,"created_at":"2015-05-11T19:08:23Z","updated_at":"2015-06-13T17:28:09Z","closed_at":null,"body":"In the simplest form a block is represented by a single DOM node but generally blocks and DOM nodes are not the same thing.\r\n\r\n`Mixes` are just the way to use several blocks and/or elements on the same DOM node.\r\n\r\nThat makes possible\r\n* combining behaviour and/or styling of different BEM entities without copy/paste\r\n* building new semantic components based on existed blocks.\r\n\r\nFor instance, we have a universal block `logo` (a block with a logotype) that could be used anywhere on a page: in header, inside copy, in the footer, etc. We can specify its width, height and a background image but what we do with its margins that differ from case to case?\r\n\r\nOf course, we could use modifiers like `logo_type_header` or `logo_type_content` to do so. However it is wrong semantically, because such things should lay down within a scope of parent block’s responsibility. And giving the right to define such things to an inner block contradicts the whole idea of blocks independency.\r\n\r\nThat's where `mixes` shine:\r\n```html\r\n<div class=\"header\">\r\n    <div class=\"header__logo logo\"></div>\r\n</div>\r\n```\r\n\r\n```css\r\n.logo\r\n{\r\n    width: 120px;\r\n    height: 60px;\r\n    background-image: url(logo.svg);\r\n}\r\n\r\n.header__logo\r\n{\r\n    margin: 12px 26px;\r\n}\r\n```\r\n\r\nAs you know there's no global modifiers in BEM methodology but again — `mixes` gives us possibility to achieve the same result with several different blocks on same DOM node.\r\n\r\nAlso you may want to use `mixes` to provide some arbitrary block with JS logic.\r\n\r\nA single DOM node can represent:\r\n* several blocks `<div class=\"menu head-menu\"></div>`\r\n* a block and an element of the same block `<div class=\"menu menu__layout\"></div>`\r\n* a block and an element of another block `<div class=\"link menu__link\"></div>`\r\n* elements of different blocks `<div class=\"menu__item head-menu__item\"></div>`\r\n* a block with a modifier and another block `<div class=\"menu menu_layout_horiz head-menu\">`\r\n* several different blocks with modifiers `<div class=\"menu menu_layout_horiz head-toolbar head-toolbar_theme_black\"><div>`\r\n\r\nSo try to develop your blocks as small and reusable as possible and then combine them in any way you want to build huge applications!"},"comment":{"url":"https://api.github.com/repos/bem/bem-forum-content-en/issues/comments/111734939","html_url":"https://github.com/bem/bem-forum-content-en/issues/4#issuecomment-111734939","issue_url":"https://api.github.com/repos/bem/bem-forum-content-en/issues/4","id":111734939,"user":{"login":"tadatuta","id":475746,"avatar_url":"https://avatars.githubusercontent.com/u/475746?v=3","gravatar_id":"","url":"https://api.github.com/users/tadatuta","html_url":"https://github.com/tadatuta","followers_url":"https://api.github.com/users/tadatuta/followers","following_url":"https://api.github.com/users/tadatuta/following{/other_user}","gists_url":"https://api.github.com/users/tadatuta/gists{/gist_id}","starred_url":"https://api.github.com/users/tadatuta/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tadatuta/subscriptions","organizations_url":"https://api.github.com/users/tadatuta/orgs","repos_url":"https://api.github.com/users/tadatuta/repos","events_url":"https://api.github.com/users/tadatuta/events{/privacy}","received_events_url":"https://api.github.com/users/tadatuta/received_events","type":"User","site_admin":false},"created_at":"2015-06-13T17:28:09Z","updated_at":"2015-06-13T17:28:09Z","body":"@hendore sure"}}