{"action":"opened","issue":{"url":"https://api.github.com/repos/palantir/blueprint/issues/248","repository_url":"https://api.github.com/repos/palantir/blueprint","labels_url":"https://api.github.com/repos/palantir/blueprint/issues/248/labels{/name}","comments_url":"https://api.github.com/repos/palantir/blueprint/issues/248/comments","events_url":"https://api.github.com/repos/palantir/blueprint/issues/248/events","html_url":"https://github.com/palantir/blueprint/issues/248","id":191892656,"number":248,"title":"Customizing styles : Just take classNames","user":{"login":"basarat","id":874898,"avatar_url":"https://avatars.githubusercontent.com/u/874898?v=3","gravatar_id":"","url":"https://api.github.com/users/basarat","html_url":"https://github.com/basarat","followers_url":"https://api.github.com/users/basarat/followers","following_url":"https://api.github.com/users/basarat/following{/other_user}","gists_url":"https://api.github.com/users/basarat/gists{/gist_id}","starred_url":"https://api.github.com/users/basarat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/basarat/subscriptions","organizations_url":"https://api.github.com/users/basarat/orgs","repos_url":"https://api.github.com/users/basarat/repos","events_url":"https://api.github.com/users/basarat/events{/privacy}","received_events_url":"https://api.github.com/users/basarat/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-11-27T23:09:20Z","updated_at":"2016-11-27T23:09:20Z","closed_at":null,"body":"Reading through the FAQ : https://github.com/palantir/blueprint/wiki/Frequently-Asked-Questions Specifically `Blueprint with a traditional global CSS stylesheet for a few reasons` I would like to argue against the reasons presented using [typestyle](http://typestyle.io) as an example.\r\n\r\n\r\n> Tooling for inline styles is still pretty nascent, while Sass and Stylelint are wonderful tools we love using.\r\n\r\nWith TypeStyle you get to use TypeScript tooling for CSS just like you use TypeScript tooling for JSX for HTML. \r\n\r\n> Regular CSS is easier to for consumers override and theme\r\n\r\nNote the case, e.g. You should't need to go into a CSS specificity war to customise components : https://github.com/palantir/blueprint/issues/184. With TypeStyle you just take a className in your props and use `classes` to compose the final style. This is mentioned here : http://typestyle.io/#/core And demonstrated below (and you can play with it here : http://bit.ly/2fpylJl) : \r\n\r\n```ts\r\nconst messageClass = style({\r\n  color: 'grey',\r\n  fontSize: '24px',\r\n  width: '100%'\r\n});\r\n\r\nconst Message = (props:{className?:string,text:string}) => {\r\n  return (\r\n    <p className={classes(messageClass,props.className)}>{props.text}</p>\r\n  );\r\n};\r\n\r\n<div>\r\n  {/** Without customization */}\r\n  <Message text=\"Hello\"/>\r\n  {/** With customization */}\r\n  <Message text=\"World\" className={style({color:'red'})}/>\r\n</div>\r\n```\r\n\r\nNote: Using `className` like TypeStyle, gives you *all the power of CSS*, something that cannot be done with the `style` attribute. \r\n\r\nHope that helps, this trick will work even without TypeStyle. This is definitely a learning area, and I present more reasons here as well http://typestyle.io/#/why :rose: :heart:"}}
{"actor":{"display_login":"basarat"}}