{"action":"created","issue":{"url":"https://api.github.com/repos/basscss/basscss/issues/119","labels_url":"https://api.github.com/repos/basscss/basscss/issues/119/labels{/name}","comments_url":"https://api.github.com/repos/basscss/basscss/issues/119/comments","events_url":"https://api.github.com/repos/basscss/basscss/issues/119/events","html_url":"https://github.com/basscss/basscss/issues/119","id":77328445,"number":119,"title":"Styling components with Basscss","user":{"login":"nicolasiensen","id":208312,"avatar_url":"https://avatars.githubusercontent.com/u/208312?v=3","gravatar_id":"","url":"https://api.github.com/users/nicolasiensen","html_url":"https://github.com/nicolasiensen","followers_url":"https://api.github.com/users/nicolasiensen/followers","following_url":"https://api.github.com/users/nicolasiensen/following{/other_user}","gists_url":"https://api.github.com/users/nicolasiensen/gists{/gist_id}","starred_url":"https://api.github.com/users/nicolasiensen/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nicolasiensen/subscriptions","organizations_url":"https://api.github.com/users/nicolasiensen/orgs","repos_url":"https://api.github.com/users/nicolasiensen/repos","events_url":"https://api.github.com/users/nicolasiensen/events{/privacy}","received_events_url":"https://api.github.com/users/nicolasiensen/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-05-17T15:09:50Z","updated_at":"2015-05-20T21:44:13Z","closed_at":null,"body":"Hey,\r\n\r\nI'm having lots of fun using Basscss's utility classes in my React app, it's amazing how far we can go by reusing those classes.\r\n\r\nBut it turns out that sometimes we need more than what those utilities classes can do for us, take a complex React component for example.\r\n\r\nI like the idea of a set of utility classes to be used for simple things, and a set of component classes to be used for more complex styling.\r\n\r\nSo I was wondering, what's the best practice for styling components using Basscss? The following two HTML snippets are declaring and styling a React component using different approaches, but with the same result:\r\n\r\nStyle a component with Basscss classes\r\n```html\r\n<div class=\"p1 silver bg-black\">My component</div>\r\n```\r\n\r\nStyle a component with a custom class (using Basscss variables)\r\n```html\r\n<style>\r\n  .myComponent {\r\n    padding: var(--space-1);\r\n    color: var(--silver);\r\n    background-color: var(--black);\r\n  }\r\n</style>\r\n<div class=\"myComponent\">My component</div>\r\n```\r\n\r\nIn the first approach, the component is being fully styled using only utility classes from Basscss. In the next one, the same component have a custom class created to style it. In the end, both options results in the same thing.\r\n\r\nNow, let's say we want to add to our component a hover behavior, that needs more than just utility classes:\r\n\r\nStyle a component with Basscss classes\r\n```html\r\n<style>\r\n  .myComponent:hover {\r\n    color: var(--black);\r\n    background-color:var(--silver);\r\n  }\r\n</style>\r\n<div class=\"p1 silver bg-black myComponent\">My component</div>\r\n```\r\n\r\nStyle a component with a custom class (using Basscss variables)\r\n```html\r\n<style>\r\n  .myComponent {\r\n    padding: var(--space-1);\r\n    color: var(--silver);\r\n    background-color: var(--black);\r\n  }\r\n  .myComponent:hover {\r\n    color: var(--black);\r\n    background-color: var(--silver);\r\n  }\r\n</style>\r\n<div class=\"myComponent\">My component</div>\r\n```\r\n\r\nNow, in the first solution, we had to implement a custom class to add the hover behavior. While in the second solution, the only thing we had to do was to extend the ```.myComponent``` class to implement the hover state.\r\n\r\nAgain, both solutions have the same result. But IMO they have the following pros and cons:\r\n\r\nStyle a component with Basscss classes:\r\n* Pros: we kept the CSS DRY by reusing Basscss's utility classes\r\n* Cons: our component's style is now divided in many different classes: ```p1```, ```silver```, ```bg-black``` and ```myComponent``` making it more difficult to read, predict and track it's changes.\r\n\r\nStyle a component with a custom class:\r\n* Pros: we have all the component's style in one single class, making it easy to change and predict\r\n* Cons: we had to repeat the same CSS that we can find in the classes ```p1```, ```silver``` and ```bg-black```, making our CSS less DRY\r\n\r\nIn order to overcome the custom class issue of being less DRY, there is a third option which is using mixins (available in preprocessors):\r\n\r\n```html\r\n<style>\r\n  .myComponent {\r\n    @include \"p1\";\r\n    @include \"silver\";\r\n    @include \"bg-black\"\r\n  }\r\n  .myComponent:hover {\r\n    @include \"black\";\r\n    @include \"bg-silver\"\r\n  }\r\n</style>\r\n<div class=\"myComponent\">My component</div>\r\n```\r\n\r\nIn this approach, we are using a common feature of CSS preprocessors called [mixins](http://oocss.org/spec/css-mixins.html). Supposing that those mixins are created inside Basscss, and included in the ```p1```, ```black```, ```silver```, ```bg-black``` and ```bg-silver``` classes we have a much more DRY solution in our hands. Of course that those classes are extremely simple, but we could think of it for bigger things.\r\n\r\nSo the questions I would like to share with you are:\r\n\r\n* How far we should go mixing Basscss's utility classes with component custom classes? Should we even mix it?\r\n* Do you see any other pro or con with those approaches above? \r\n* What's your thoughts about using mixins to solve the DRY problem of the component custom class?\r\n* If we use custom classes to style components, where are we supposed to use utility classes?\r\n\r\nThanks for reading all my point here, I'm looking forward to read your comments.\r\n\r\nCheers :beers: "},"comment":{"url":"https://api.github.com/repos/basscss/basscss/issues/comments/104048149","html_url":"https://github.com/basscss/basscss/issues/119#issuecomment-104048149","issue_url":"https://api.github.com/repos/basscss/basscss/issues/119","id":104048149,"user":{"login":"jxnblk","id":3451712,"avatar_url":"https://avatars.githubusercontent.com/u/3451712?v=3","gravatar_id":"","url":"https://api.github.com/users/jxnblk","html_url":"https://github.com/jxnblk","followers_url":"https://api.github.com/users/jxnblk/followers","following_url":"https://api.github.com/users/jxnblk/following{/other_user}","gists_url":"https://api.github.com/users/jxnblk/gists{/gist_id}","starred_url":"https://api.github.com/users/jxnblk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jxnblk/subscriptions","organizations_url":"https://api.github.com/users/jxnblk/orgs","repos_url":"https://api.github.com/users/jxnblk/repos","events_url":"https://api.github.com/users/jxnblk/events{/privacy}","received_events_url":"https://api.github.com/users/jxnblk/received_events","type":"User","site_admin":false},"created_at":"2015-05-20T21:44:13Z","updated_at":"2015-05-20T21:44:13Z","body":"\r\nThanks, these are excellent questions. I think you've hit on a lot of great points, but I'll share some general thoughts.\r\n\r\nBasscss was used extensively in the Rails Kickstarter app to help DRY up the CSS. In the Rails world we used a fair amount of helpers instead of something more robust like React. Before refactoring a lot of the CSS, the approach they used was similar to the custom component class you're describing, but at a page-specific level, which resulted in a 1.1MB minified CSS file being served on desktop.\r\n\r\nAs far as React goes, I've only been working on smaller applications lately, and rarely, if ever, find the need for something like component-specific styles. Especially with the ability to use JavaScript and inline styles to keep things isolated to a component. Basscss seems to fill the need for consistency in colors, typography, spacing scales, and grid systems for what I've done. There are other JavaScript-based solutions for maintaining consistency that I'm very interested in, including https://github.com/petehunt/jsxstyle and https://github.com/jsstyles/jss.\r\n\r\nIf you do find the need for component-specific styles, I recommend following something similar to what Suit CSS does: https://github.com/suitcss/suit/blob/master/doc/components.md\r\n\r\nAs for the pros/cons with the two different approaches, I think I disagree slightly. Using Basscss to style a component feels far easier to read, predict, and track changes because everything is contained within the component, and making small iterative design changes can be handled in a single place.\r\n\r\nWhile mixins are very powerful to people who understand them, I've never seen an example of mixins used in a large scale application in a sensible way. That is, inevitably it ends up in a mess, and I think this is part of the reason why there isn't much traction for mixins being added to the CSS spec. My general advice when using Sass is to avoid nesting, mixins, functions, maps, and especially extends as much as possible. If you're using React already, there are a lot of other and better ways to achieve something similar to what those features offer.\r\n\r\nTo get back to your original example, if you do need to add hover states to a component, you'll probably want something like a component-specific style, and I think it's completely fine to mix the two approaches. E.g. `<div className=\"MyComponent p1 silver bg-black\" />` Take a look at Suit CSS and twitter.com for examples of that approach in the wild.\r\n\r\nAgain, thanks for the question, and feel free to continue the discussion here as this is a subject I'm very interested in.\r\n"}}