{"action":"created","issue":{"url":"https://api.github.com/repos/salsify/ember-css-modules/issues/24","repository_url":"https://api.github.com/repos/salsify/ember-css-modules","labels_url":"https://api.github.com/repos/salsify/ember-css-modules/issues/24/labels{/name}","comments_url":"https://api.github.com/repos/salsify/ember-css-modules/issues/24/comments","events_url":"https://api.github.com/repos/salsify/ember-css-modules/issues/24/events","html_url":"https://github.com/salsify/ember-css-modules/issues/24","id":150438717,"number":24,"title":"Dealing with modifiers","user":{"login":"max","id":111631,"avatar_url":"https://avatars.githubusercontent.com/u/111631?v=3","gravatar_id":"","url":"https://api.github.com/users/max","html_url":"https://github.com/max","followers_url":"https://api.github.com/users/max/followers","following_url":"https://api.github.com/users/max/following{/other_user}","gists_url":"https://api.github.com/users/max/gists{/gist_id}","starred_url":"https://api.github.com/users/max/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/max/subscriptions","organizations_url":"https://api.github.com/users/max/orgs","repos_url":"https://api.github.com/users/max/repos","events_url":"https://api.github.com/users/max/events{/privacy}","received_events_url":"https://api.github.com/users/max/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/salsify/ember-css-modules/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-04-22T18:20:46Z","updated_at":"2016-04-22T20:38:56Z","closed_at":null,"body":"Another one for support docs. What's a good pattern to deal with modifiers? For example let's say I have a button:\r\n\r\n```html\r\n<my-button destructive=true>Beep Boop</my-button>\r\n<my-button destructive=true primary=true>Beep Boop</my-button>\r\n<my-button size=\"lg\">Beep Boop</my-button>\r\n<my-button plain=true iconButton=true><icon name=\"cat\" /></my-button>\r\n```\r\n\r\n```js\r\nimport Ember from 'ember';\r\n\r\nexport default Ember.Component.extend({\r\n  attributeBindings: ['disabled', 'type'],\r\n  classNameBindings: [\r\n    'styles.my-button',\r\n    'destructive:styles.destructive',\r\n    'iconButton:styles.icon',\r\n    'full:styles.full',\r\n    'plain:styles.plain',\r\n    'primary:styles.primary',\r\n  ],\r\n  tagName: 'button',\r\n  type: 'button',\r\n\r\n  click() {\r\n    return this.attrs.action && this.attrs.action();\r\n  },\r\n});\r\n```\r\n\r\nIs the concept of modifiers not really a good pattern for CSS Modules? I'm translating BEM code.\r\n\r\nEdit: This doesn't work and is pseudo code."},"comment":{"url":"https://api.github.com/repos/salsify/ember-css-modules/issues/comments/213581491","html_url":"https://github.com/salsify/ember-css-modules/issues/24#issuecomment-213581491","issue_url":"https://api.github.com/repos/salsify/ember-css-modules/issues/24","id":213581491,"user":{"login":"max","id":111631,"avatar_url":"https://avatars.githubusercontent.com/u/111631?v=3","gravatar_id":"","url":"https://api.github.com/users/max","html_url":"https://github.com/max","followers_url":"https://api.github.com/users/max/followers","following_url":"https://api.github.com/users/max/following{/other_user}","gists_url":"https://api.github.com/users/max/gists{/gist_id}","starred_url":"https://api.github.com/users/max/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/max/subscriptions","organizations_url":"https://api.github.com/users/max/orgs","repos_url":"https://api.github.com/users/max/repos","events_url":"https://api.github.com/users/max/events{/privacy}","received_events_url":"https://api.github.com/users/max/received_events","type":"User","site_admin":false},"created_at":"2016-04-22T20:38:56Z","updated_at":"2016-04-22T20:38:56Z","body":"The Ember examples are definitely the right direction. Setting `tagName` to `''` is somewhat discouraged but glimmer components will make away with `classNameBindings` so that's a good solution and I'm sure we can come up with an idiomatic helper. 👍 \r\n\r\nI'm trying to balance the use of components. I want to avoid bloated stylesheets (which `compose` similarly to Sass's `extend` encourages).\r\n\r\nAs far as this example goes:\r\n\r\n```\r\n<my-button class={{styles.confirm}}>BOOM</my-button>\r\n<my-button class={{styles.cancel}}>Nevermind</my-button>\r\n```\r\n\r\nThat's semantically a little different. Reaching into a component from the parent context and restyling vs the component itself having an API to change its appearance:\r\n\r\n```\r\n<my-button destructive=true size=\"small\">Beep Boop</my-button>\r\n```\r\n\r\nIn the latter example you don't need to know anything about the implementation details of Beep Boop since it exposes an API to modify appearance.\r\n\r\nFor now I'm going to stick with computed properties and investigate a helper approach."}}