{"action":"created","issue":{"url":"https://api.github.com/repos/threepointone/glamor/issues/107","repository_url":"https://api.github.com/repos/threepointone/glamor","labels_url":"https://api.github.com/repos/threepointone/glamor/issues/107/labels{/name}","comments_url":"https://api.github.com/repos/threepointone/glamor/issues/107/comments","events_url":"https://api.github.com/repos/threepointone/glamor/issues/107/events","html_url":"https://github.com/threepointone/glamor/issues/107","id":187626341,"number":107,"title":"Specificity with existing CSS","user":{"login":"kentcdodds","id":1500684,"avatar_url":"https://avatars.githubusercontent.com/u/1500684?v=3","gravatar_id":"","url":"https://api.github.com/users/kentcdodds","html_url":"https://github.com/kentcdodds","followers_url":"https://api.github.com/users/kentcdodds/followers","following_url":"https://api.github.com/users/kentcdodds/following{/other_user}","gists_url":"https://api.github.com/users/kentcdodds/gists{/gist_id}","starred_url":"https://api.github.com/users/kentcdodds/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kentcdodds/subscriptions","organizations_url":"https://api.github.com/users/kentcdodds/orgs","repos_url":"https://api.github.com/users/kentcdodds/repos","events_url":"https://api.github.com/users/kentcdodds/events{/privacy}","received_events_url":"https://api.github.com/users/kentcdodds/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2016-11-07T05:07:05Z","updated_at":"2016-11-15T15:19:01Z","closed_at":null,"body":"So I'd like to be able to have deterministic specificity priority to glamor styles when working with an existing framework (like bootstrap). I realize there are workarounds, but I'd like to do as little weird stuff as possible. So what if glamor add an ID to all of its CSS rules? Then it would almost always be more specific.\r\n\r\nI actually did this in a previous project. Basically, if there was already an `id` on the `body`, it would use that one, otherwise it would generate a random one and apply it to the `body`. Then all rules would be:\r\n\r\n```css\r\n#random-id-123 .css-selector-stuff {\r\n  /* rules that clash with framework stuff */\r\n}\r\n```\r\n\r\nWith the ID in there, it would be more specific 99% of the time."},"comment":{"url":"https://api.github.com/repos/threepointone/glamor/issues/comments/260669367","html_url":"https://github.com/threepointone/glamor/issues/107#issuecomment-260669367","issue_url":"https://api.github.com/repos/threepointone/glamor/issues/107","id":260669367,"user":{"login":"threepointone","id":18808,"avatar_url":"https://avatars.githubusercontent.com/u/18808?v=3","gravatar_id":"","url":"https://api.github.com/users/threepointone","html_url":"https://github.com/threepointone","followers_url":"https://api.github.com/users/threepointone/followers","following_url":"https://api.github.com/users/threepointone/following{/other_user}","gists_url":"https://api.github.com/users/threepointone/gists{/gist_id}","starred_url":"https://api.github.com/users/threepointone/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/threepointone/subscriptions","organizations_url":"https://api.github.com/users/threepointone/orgs","repos_url":"https://api.github.com/users/threepointone/repos","events_url":"https://api.github.com/users/threepointone/events{/privacy}","received_events_url":"https://api.github.com/users/threepointone/received_events","type":"User","site_admin":false},"created_at":"2016-11-15T15:19:01Z","updated_at":"2016-11-15T15:19:01Z","body":"yeah but the workaround seems simple enough, including bootstrap / other css frameworks before scripts? I'm trying to avoid adding anything more into the selector by _default_, and happy to include  this plugin in the docs. \r\n\r\nI'm also considering a helper that simply pushes up / pulls down glamor's style tag in `<head>` (like a photoshop layer). so you could call `lowerStyleSheet` or `raiseStyleSheet`, maybe.\r\n\r\nAnd for one off cases, you can use contextual selectors to kick up specificity\r\n`style({ '&&' : { color: 'red' }})`\r\n\r\n[and tbh, I don't personally like aph's !important behavior, though I see the value]"}}
{"actor":{"display_login":"threepointone"}}