{"action":"closed","issue":{"url":"https://api.github.com/repos/css-modules/css-modules/issues/63","labels_url":"https://api.github.com/repos/css-modules/css-modules/issues/63/labels{/name}","comments_url":"https://api.github.com/repos/css-modules/css-modules/issues/63/comments","events_url":"https://api.github.com/repos/css-modules/css-modules/issues/63/events","html_url":"https://github.com/css-modules/css-modules/issues/63","id":109614527,"number":63,"title":"Why no selectors?","user":{"login":"tslocke","id":360,"avatar_url":"https://avatars.githubusercontent.com/u/360?v=3","gravatar_id":"","url":"https://api.github.com/users/tslocke","html_url":"https://github.com/tslocke","followers_url":"https://api.github.com/users/tslocke/followers","following_url":"https://api.github.com/users/tslocke/following{/other_user}","gists_url":"https://api.github.com/users/tslocke/gists{/gist_id}","starred_url":"https://api.github.com/users/tslocke/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tslocke/subscriptions","organizations_url":"https://api.github.com/users/tslocke/orgs","repos_url":"https://api.github.com/users/tslocke/repos","events_url":"https://api.github.com/users/tslocke/events{/privacy}","received_events_url":"https://api.github.com/users/tslocke/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-10-03T09:51:46Z","updated_at":"2015-10-05T16:40:03Z","closed_at":"2015-10-05T16:40:03Z","body":"In the [Welcome to the Future](https://github.com/gajus/react-css-modules) article, we're advised that \"In CSS Modules each class should have all the styles needed for that variant\". i.e.:\r\n\r\n    .common { ... }\r\n    .normal { composes: common; ... }\r\n    .disabled { composes: common; ... }\r\n    .error { composes: common; ... }\r\n    \r\nThat's all nice and clean. However, what if I have multiple independent states that can be combined. E.g. I have an component that can be \"active\" and/or \"selected\":\r\n\r\n    .common { ... }\r\n    .normal { composes: common; ... }\r\n    .selected { composes: common; ... }\r\n    .active { composes: common; ... }\r\n    .selected_active { composes: selected active; ... }\r\n    \r\nIf there are three or more such things, it's going to get pretty ugly.\r\n\r\nCSS selectors are a very powerful way to capture situations like this (and a thousand others) in a very elegant and concise way. If the editor is both selected and active, just put both the classes on there. i.e. use it the way it was designed to be used.\r\n\r\nWe've all been burnt at some point by selector bugs, and many have decided that complex selectors are just not worth it. Personally this always struck me as a great shame. I want that expressivity! \r\n\r\nThe fact that we're finally talking about local vs. global CSS is like someone at last found the light switch. CSS selectors were never the problem. The problem was having everything global.\r\n\r\nWith local CSS, I should be able to just look at one small file of CSS at a time, and satisfy myself that there are no selector bugs. I no longer have to worry about the way these rules interact with every other damn rule in the entire codebase. That should mean that I am free to use all the nice features of CSS selectors, and still be able to sleep at night.\r\n\r\nSo... I guess I'm missing something? Why is it that we still need restricting rules like \"each class should have all the styles needed for that variant\"?"}}