{"action":"created","issue":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/131","repository_url":"https://api.github.com/repos/css-modules/css-modules","labels_url":"https://api.github.com/repos/css-modules/css-modules/issues/131/labels{/name}","comments_url":"https://api.github.com/repos/css-modules/css-modules/issues/131/comments","events_url":"https://api.github.com/repos/css-modules/css-modules/issues/131/events","html_url":"https://github.com/css-modules/css-modules/issues/131","id":145745362,"number":131,"title":"Philosophy nested selectors, tag selectors","user":{"login":"aft-luke","id":13787895,"avatar_url":"https://avatars.githubusercontent.com/u/13787895?v=3","gravatar_id":"","url":"https://api.github.com/users/aft-luke","html_url":"https://github.com/aft-luke","followers_url":"https://api.github.com/users/aft-luke/followers","following_url":"https://api.github.com/users/aft-luke/following{/other_user}","gists_url":"https://api.github.com/users/aft-luke/gists{/gist_id}","starred_url":"https://api.github.com/users/aft-luke/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aft-luke/subscriptions","organizations_url":"https://api.github.com/users/aft-luke/orgs","repos_url":"https://api.github.com/users/aft-luke/repos","events_url":"https://api.github.com/users/aft-luke/events{/privacy}","received_events_url":"https://api.github.com/users/aft-luke/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2016-04-04T17:08:18Z","updated_at":"2016-04-05T22:06:16Z","closed_at":"2016-04-05T15:09:37Z","body":"I'm hoping someone can clarify a conceptual issue I'm having with css modules. Are we throwing away nested selectors to use css-modules? I understand some of the problems it introduces with regards to specificity of selectors and complex overrides/inheritance... but what's the alternative? Do I have to attach a class to absolutely every element I want to style?\r\n\r\n```\r\n<div class=\"my-component\">\r\n  <header>\r\n    <h1>Some Component</h1>\r\n    <h2>subheader</h2>\r\n  </header>\r\n</div>\r\n```\r\n\r\nIf I were doing this without css-modules in stylus, I would simply write:\r\n```\r\n.my-component\r\n  display flex\r\n  header\r\n    display flex\r\n    h1\r\n      font-size 2em\r\n    h2\r\n      font-size 1.5em\r\n```\r\n\r\nAnd the module is somewhat \"contained\". Not perfect, but it goes a very long way to keeping things modular. \r\n\r\nIf I want to approach this from a css-modules angle, how do I do the same?\r\n\r\n```\r\n.my-component {...}\r\n.header {...}\r\n.h1 {...}\r\n.h2 {...}\r\n```\r\n\r\nAnd I have to attach a class to every single element? Is it not possible to export tag-level selectors as js modules?\r\n\r\n```\r\n.my-component {...}\r\nheader {...}\r\nh1 {...}\r\nh2 {...}\r\n```\r\n\r\n```\r\n// jsx\r\n<div className={styles['my-component']}>\r\n  <header>\r\n    <h1>Some Component</h1>\r\n    <h2>subheader</h2>\r\n  </header>\r\n</div>\r\n```\r\nWhat I really, really don't want to do is have to attach a class to every single element in my entire dom.\r\n\r\n```\r\n// jsx\r\n<div className={styles['my-component']}>\r\n  <header className={styles.header}>\r\n    <h1 className={styles.h1}>Some Component</h1>\r\n    <h2 className={styles.h2}>subheader</h2>\r\n  </header>\r\n</div>\r\n```\r\n\r\nThis is very verbose and introduces a whole lot of boilerplate, and makes the html more difficult to read (imo)."},"comment":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/comments/206003396","html_url":"https://github.com/css-modules/css-modules/issues/131#issuecomment-206003396","issue_url":"https://api.github.com/repos/css-modules/css-modules/issues/131","id":206003396,"user":{"login":"joshwnj","id":36711,"avatar_url":"https://avatars.githubusercontent.com/u/36711?v=3","gravatar_id":"","url":"https://api.github.com/users/joshwnj","html_url":"https://github.com/joshwnj","followers_url":"https://api.github.com/users/joshwnj/followers","following_url":"https://api.github.com/users/joshwnj/following{/other_user}","gists_url":"https://api.github.com/users/joshwnj/gists{/gist_id}","starred_url":"https://api.github.com/users/joshwnj/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joshwnj/subscriptions","organizations_url":"https://api.github.com/users/joshwnj/orgs","repos_url":"https://api.github.com/users/joshwnj/repos","events_url":"https://api.github.com/users/joshwnj/events{/privacy}","received_events_url":"https://api.github.com/users/joshwnj/received_events","type":"User","site_admin":false},"created_at":"2016-04-05T22:06:15Z","updated_at":"2016-04-05T22:06:15Z","body":"cheers @aft-luke , let us know how you go. I've been using css modules on a pretty large and non-trivial frontend, coming up to 1 year and it's definitely removed a lot of the headaches of similar projects in the past."}}