{"action":"created","issue":{"url":"https://api.github.com/repos/lessonly/lessonly.github.io/issues/14","labels_url":"https://api.github.com/repos/lessonly/lessonly.github.io/issues/14/labels{/name}","comments_url":"https://api.github.com/repos/lessonly/lessonly.github.io/issues/14/comments","events_url":"https://api.github.com/repos/lessonly/lessonly.github.io/issues/14/events","html_url":"https://github.com/lessonly/lessonly.github.io/pull/14","id":88293529,"number":14,"title":"Add Component-based CSS to CSS Stylegude","user":{"login":"stevegrossi","id":664341,"avatar_url":"https://avatars.githubusercontent.com/u/664341?v=3","gravatar_id":"","url":"https://api.github.com/users/stevegrossi","html_url":"https://github.com/stevegrossi","followers_url":"https://api.github.com/users/stevegrossi/followers","following_url":"https://api.github.com/users/stevegrossi/following{/other_user}","gists_url":"https://api.github.com/users/stevegrossi/gists{/gist_id}","starred_url":"https://api.github.com/users/stevegrossi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stevegrossi/subscriptions","organizations_url":"https://api.github.com/users/stevegrossi/orgs","repos_url":"https://api.github.com/users/stevegrossi/repos","events_url":"https://api.github.com/users/stevegrossi/events{/privacy}","received_events_url":"https://api.github.com/users/stevegrossi/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/lessonly/lessonly.github.io/labels/code%20review","name":"code review","color":"ededed"}],"state":"open","locked":false,"assignee":{"login":"armilam","id":430986,"avatar_url":"https://avatars.githubusercontent.com/u/430986?v=3","gravatar_id":"","url":"https://api.github.com/users/armilam","html_url":"https://github.com/armilam","followers_url":"https://api.github.com/users/armilam/followers","following_url":"https://api.github.com/users/armilam/following{/other_user}","gists_url":"https://api.github.com/users/armilam/gists{/gist_id}","starred_url":"https://api.github.com/users/armilam/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/armilam/subscriptions","organizations_url":"https://api.github.com/users/armilam/orgs","repos_url":"https://api.github.com/users/armilam/repos","events_url":"https://api.github.com/users/armilam/events{/privacy}","received_events_url":"https://api.github.com/users/armilam/received_events","type":"User","site_admin":false},"milestone":null,"comments":4,"created_at":"2015-06-15T02:30:38Z","updated_at":"2015-06-16T14:32:45Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/lessonly/lessonly.github.io/pulls/14","html_url":"https://github.com/lessonly/lessonly.github.io/pull/14","diff_url":"https://github.com/lessonly/lessonly.github.io/pull/14.diff","patch_url":"https://github.com/lessonly/lessonly.github.io/pull/14.patch"},"body":"This PR attempts to codify our use of component-based CSS (so that all the new CSS added by Studio Science will be consistent not with the hodgepodge we have, but the architecture we *want*). We already use CSS components in many places (just look in `app/assets/stylesheets/components`), but much of our CSS remains unintentional. In other words, with selectors as long and as specific as necessary, the length and specificity of which tends to escalate over time, leading to larger CSS file sizes, poorer rendering performance, and difficulty maintaining it. (For more on the downsides of unscalable CSS, [see my blog post](http://work.stevegrossi.com/2014/09/06/how-to-write-css-that-scales/).) This is how we get selectors like:\r\n\r\n```css\r\narticle.lesson_editor > aside ul.lesson_sections > li.active .lesson_section_title\r\n```\r\n\r\nI'd like to make the case for doubling down on component-based CSS which would let this instead be simply\r\n\r\n```css\r\n.StackedNav-item--active\r\n```\r\n\r\n### SuitCSS\r\n\r\nWhat this PR does introduce that's new is the set of [SuitCSS naming conventions](https://suitcss.github.io/) for components. This adds—at no cost—an extra layer of semantics to our component names. Currently we generally use hyphen-separated lowercase class names, e.g. `.progress-bar`. In this case, it's impossible to tell whether the component is `.progress` and this is its bar element, or this is the base `.progress-bar` component. With SuitCSS, this would be named `.Progress-bar` and we'd immediately know just by looking at the markup that this is the bar element within the `.Progress` component. We have to name things anyway: we might as well name them in such a way as to provide the greatest amount of context and direction to future developers. Twitter and [Medium](http://work.stevegrossi.com/2014/09/06/how-to-write-css-that-scales/) have begun using SuitCSS, and most apps these days are using some kind of component-based naming convention, if not SuitCSS then [BEM](https://en.bem.info/) or [SmaCSS](https://smacss.com/book/categorizing)."},"comment":{"url":"https://api.github.com/repos/lessonly/lessonly.github.io/issues/comments/112451036","html_url":"https://github.com/lessonly/lessonly.github.io/pull/14#issuecomment-112451036","issue_url":"https://api.github.com/repos/lessonly/lessonly.github.io/issues/14","id":112451036,"user":{"login":"armilam","id":430986,"avatar_url":"https://avatars.githubusercontent.com/u/430986?v=3","gravatar_id":"","url":"https://api.github.com/users/armilam","html_url":"https://github.com/armilam","followers_url":"https://api.github.com/users/armilam/followers","following_url":"https://api.github.com/users/armilam/following{/other_user}","gists_url":"https://api.github.com/users/armilam/gists{/gist_id}","starred_url":"https://api.github.com/users/armilam/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/armilam/subscriptions","organizations_url":"https://api.github.com/users/armilam/orgs","repos_url":"https://api.github.com/users/armilam/repos","events_url":"https://api.github.com/users/armilam/events{/privacy}","received_events_url":"https://api.github.com/users/armilam/received_events","type":"User","site_admin":false},"created_at":"2015-06-16T14:32:45Z","updated_at":"2015-06-16T14:32:45Z","body":"Thanks, @kpascascio! I'll go ahead and merge since we officially have majority vote :ballot_box_with_check: "}}