{"action":"created","comment":{"url":"https://api.github.com/repos/wework/wework.github.io/pulls/comments/41951989","id":41951989,"diff_hunk":"@@ -0,0 +1,279 @@\n+---\n+layout:       post\n+title:        Creating BEM Stylesheets for React Components\n+author:       Rae Farine\n+summary:\n+image:        http://res.cloudinary.com/wework/image/upload/s--EfXI0Su2--/c_fill,g_faces,h_1000,q_jpegmini:1,w_1600/v1444612528/bem-stylesheet-react.jpg\n+categories:   frontend\n+---\n+\n+There are plenty of options to choose from when it comes to frontend methodologies.  As I've learned while working with Ember and React.js, web interfaces are composed of powerful components.  When thinking about how to approach the organization of a project, I feel the CSS for each component needs to be just as concise and clear as the Javascript that creates it.\n+\n+Enter BEM: it stands for \"Block\", \"Element\", and \"Modifier\".  This is no new approach, but it's really begun to grow on me.  I've started to create BEM-style \"component\" stylesheets here at WeWork, and my main goal is to create \"blocks\" that are independent of each other, wholey reuseable. Remember, a block may be developed as a singular unit, but it can and **should** be able to appear on a page more than once.\n+\n+A **block** is *independent* and can be utilized on its own or can contain other blocks (ie. `.location-info {}`.) These can be thought of as parents. The children of blocks are their **elements**, written with two underscores (ie. `.location-info__content {}`.)  **Modifiers** specify the type of block that we're dealing with, so that we can style that component without affecting others (ie. `.location-info--with-background`.)\n+\n+The markup might look like this:\n+\n+\n+```html\n+<div class=\"location-info location-info--with-background\">\n+    <div class=\"location-info__content\">\n+        <div class=\"location-info__image\">\n+            <img src=\"...\" />\n+        </div>\n+        <div class=\"location-info__text\">\n+            <p>Welcome to Soho West!</p>\n+        </div>\n+    </div>\n+</div>\n+```\n+\n+\n+\n+\n+A few things to remember:\n+\n+- HTML Elements must not be used in CSS selectors. We want our classes to be context-free. (ie. In the example above, I should not be applying a style to `.location-info__image img`.)\n+- ID-based selectors must not be used. We are developing components that are non-unique! There could be multiple blocks/elements on one page.\n+- Avoid making parent elements when the child can exist by itself.\n+- You do not need to use BEM for absolutely everything. Just because there is an element in a block, it does not mean it is a BEM element.  Some things just won't fall under the category of BEM. For example, take the class: `.text-center { text-align: center; }`. This is a standalone class, not an element. No need to BEM it up!\n+\n+\n+## BEM in Action\n+\n+The BEM methodology has been very useful within our React components. Seeing as we're already creating objects that are wholey reuseable across the site, it only seems natural to make sure that our CSS is as concise.\n+\n+I was recently creating a new React component for our \"Book a Tour\" modal, called LocationCmInfo (\"Cm\" standing for Community Manager, the person giving the tour.)\n+\n+\n+```js\n+import React, {Component, PropTypes} from 'react';\n+\n+class LocationCmInfo extends Component {","path":"_posts/2015-10-12-creating-bem-stylesheets-for-react-components.markdown","position":53,"original_position":53,"commit_id":"c9e5aaf654df2e7feae02faa362145bcb3870037","original_commit_id":"c9e5aaf654df2e7feae02faa362145bcb3870037","user":{"login":"mattjstar","id":4423173,"avatar_url":"https://avatars.githubusercontent.com/u/4423173?v=3","gravatar_id":"","url":"https://api.github.com/users/mattjstar","html_url":"https://github.com/mattjstar","followers_url":"https://api.github.com/users/mattjstar/followers","following_url":"https://api.github.com/users/mattjstar/following{/other_user}","gists_url":"https://api.github.com/users/mattjstar/gists{/gist_id}","starred_url":"https://api.github.com/users/mattjstar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mattjstar/subscriptions","organizations_url":"https://api.github.com/users/mattjstar/orgs","repos_url":"https://api.github.com/users/mattjstar/repos","events_url":"https://api.github.com/users/mattjstar/events{/privacy}","received_events_url":"https://api.github.com/users/mattjstar/received_events","type":"User","site_admin":false},"body":"Let's chat about cleaning this up tomorrow! I feel like for the purposes of this article the reader shouldn't have to know about ES6 or jsx for that matter.\r\n\r\nLet's just assume that we're building a component with just html, and also include an image of the finished component as a frame of reference.","created_at":"2015-10-14T03:32:54Z","updated_at":"2015-10-14T03:32:54Z","html_url":"https://github.com/wework/wework.github.io/pull/4#discussion_r41951989","pull_request_url":"https://api.github.com/repos/wework/wework.github.io/pulls/4","_links":{"self":{"href":"https://api.github.com/repos/wework/wework.github.io/pulls/comments/41951989"},"html":{"href":"https://github.com/wework/wework.github.io/pull/4#discussion_r41951989"},"pull_request":{"href":"https://api.github.com/repos/wework/wework.github.io/pulls/4"}}},"pull_request":{"url":"https://api.github.com/repos/wework/wework.github.io/pulls/4","id":46714159,"html_url":"https://github.com/wework/wework.github.io/pull/4","diff_url":"https://github.com/wework/wework.github.io/pull/4.diff","patch_url":"https://github.com/wework/wework.github.io/pull/4.patch","issue_url":"https://api.github.com/repos/wework/wework.github.io/issues/4","number":4,"state":"open","locked":false,"title":"Creating BEM Stylesheets for React Components","user":{"login":"rfarine","id":1829422,"avatar_url":"https://avatars.githubusercontent.com/u/1829422?v=3","gravatar_id":"","url":"https://api.github.com/users/rfarine","html_url":"https://github.com/rfarine","followers_url":"https://api.github.com/users/rfarine/followers","following_url":"https://api.github.com/users/rfarine/following{/other_user}","gists_url":"https://api.github.com/users/rfarine/gists{/gist_id}","starred_url":"https://api.github.com/users/rfarine/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rfarine/subscriptions","organizations_url":"https://api.github.com/users/rfarine/orgs","repos_url":"https://api.github.com/users/rfarine/repos","events_url":"https://api.github.com/users/rfarine/events{/privacy}","received_events_url":"https://api.github.com/users/rfarine/received_events","type":"User","site_admin":false},"body":"- [ ] post to https://www.reddit.com/r/web_design/\r\n- [ ] https://www.reddit.com/r/Sass/","created_at":"2015-10-03T21:50:25Z","updated_at":"2015-10-14T03:32:54Z","closed_at":null,"merged_at":null,"merge_commit_sha":"6e79caa5220e7dff1e009a4adcb926b2684d92c3","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/wework/wework.github.io/pulls/4/commits","review_comments_url":"https://api.github.com/repos/wework/wework.github.io/pulls/4/comments","review_comment_url":"https://api.github.com/repos/wework/wework.github.io/pulls/comments{/number}","comments_url":"https://api.github.com/repos/wework/wework.github.io/issues/4/comments","statuses_url":"https://api.github.com/repos/wework/wework.github.io/statuses/c9e5aaf654df2e7feae02faa362145bcb3870037","head":{"label":"wework:post/bem-react","ref":"post/bem-react","sha":"c9e5aaf654df2e7feae02faa362145bcb3870037","user":{"login":"wework","id":4072897,"avatar_url":"https://avatars.githubusercontent.com/u/4072897?v=3","gravatar_id":"","url":"https://api.github.com/users/wework","html_url":"https://github.com/wework","followers_url":"https://api.github.com/users/wework/followers","following_url":"https://api.github.com/users/wework/following{/other_user}","gists_url":"https://api.github.com/users/wework/gists{/gist_id}","starred_url":"https://api.github.com/users/wework/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wework/subscriptions","organizations_url":"https://api.github.com/users/wework/orgs","repos_url":"https://api.github.com/users/wework/repos","events_url":"https://api.github.com/users/wework/events{/privacy}","received_events_url":"https://api.github.com/users/wework/received_events","type":"Organization","site_admin":false},"repo":{"id":32547526,"name":"wework.github.io","full_name":"wework/wework.github.io","owner":{"login":"wework","id":4072897,"avatar_url":"https://avatars.githubusercontent.com/u/4072897?v=3","gravatar_id":"","url":"https://api.github.com/users/wework","html_url":"https://github.com/wework","followers_url":"https://api.github.com/users/wework/followers","following_url":"https://api.github.com/users/wework/following{/other_user}","gists_url":"https://api.github.com/users/wework/gists{/gist_id}","starred_url":"https://api.github.com/users/wework/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wework/subscriptions","organizations_url":"https://api.github.com/users/wework/orgs","repos_url":"https://api.github.com/users/wework/repos","events_url":"https://api.github.com/users/wework/events{/privacy}","received_events_url":"https://api.github.com/users/wework/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/wework/wework.github.io","description":"WeWork Engineering Blog","fork":false,"url":"https://api.github.com/repos/wework/wework.github.io","forks_url":"https://api.github.com/repos/wework/wework.github.io/forks","keys_url":"https://api.github.com/repos/wework/wework.github.io/keys{/key_id}","collaborators_url":"https://api.github.com/repos/wework/wework.github.io/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/wework/wework.github.io/teams","hooks_url":"https://api.github.com/repos/wework/wework.github.io/hooks","issue_events_url":"https://api.github.com/repos/wework/wework.github.io/issues/events{/number}","events_url":"https://api.github.com/repos/wework/wework.github.io/events","assignees_url":"https://api.github.com/repos/wework/wework.github.io/assignees{/user}","branches_url":"https://api.github.com/repos/wework/wework.github.io/branches{/branch}","tags_url":"https://api.github.com/repos/wework/wework.github.io/tags","blobs_url":"https://api.github.com/repos/wework/wework.github.io/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/wework/wework.github.io/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/wework/wework.github.io/git/refs{/sha}","trees_url":"https://api.github.com/repos/wework/wework.github.io/git/trees{/sha}","statuses_url":"https://api.github.com/repos/wework/wework.github.io/statuses/{sha}","languages_url":"https://api.github.com/repos/wework/wework.github.io/languages","stargazers_url":"https://api.github.com/repos/wework/wework.github.io/stargazers","contributors_url":"https://api.github.com/repos/wework/wework.github.io/contributors","subscribers_url":"https://api.github.com/repos/wework/wework.github.io/subscribers","subscription_url":"https://api.github.com/repos/wework/wework.github.io/subscription","commits_url":"https://api.github.com/repos/wework/wework.github.io/commits{/sha}","git_commits_url":"https://api.github.com/repos/wework/wework.github.io/git/commits{/sha}","comments_url":"https://api.github.com/repos/wework/wework.github.io/comments{/number}","issue_comment_url":"https://api.github.com/repos/wework/wework.github.io/issues/comments{/number}","contents_url":"https://api.github.com/repos/wework/wework.github.io/contents/{+path}","compare_url":"https://api.github.com/repos/wework/wework.github.io/compare/{base}...{head}","merges_url":"https://api.github.com/repos/wework/wework.github.io/merges","archive_url":"https://api.github.com/repos/wework/wework.github.io/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/wework/wework.github.io/downloads","issues_url":"https://api.github.com/repos/wework/wework.github.io/issues{/number}","pulls_url":"https://api.github.com/repos/wework/wework.github.io/pulls{/number}","milestones_url":"https://api.github.com/repos/wework/wework.github.io/milestones{/number}","notifications_url":"https://api.github.com/repos/wework/wework.github.io/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/wework/wework.github.io/labels{/name}","releases_url":"https://api.github.com/repos/wework/wework.github.io/releases{/id}","created_at":"2015-03-19T21:36:55Z","updated_at":"2015-10-06T03:18:09Z","pushed_at":"2015-10-12T01:43:25Z","git_url":"git://github.com/wework/wework.github.io.git","ssh_url":"git@github.com:wework/wework.github.io.git","clone_url":"https://github.com/wework/wework.github.io.git","svn_url":"https://github.com/wework/wework.github.io","homepage":null,"size":1732,"stargazers_count":3,"watchers_count":3,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":0,"mirror_url":null,"open_issues_count":1,"forks":0,"open_issues":1,"watchers":3,"default_branch":"master"}},"base":{"label":"wework:master","ref":"master","sha":"6a15d9fc9e09a22bd51fcb7c4cf507ecb01f3f75","user":{"login":"wework","id":4072897,"avatar_url":"https://avatars.githubusercontent.com/u/4072897?v=3","gravatar_id":"","url":"https://api.github.com/users/wework","html_url":"https://github.com/wework","followers_url":"https://api.github.com/users/wework/followers","following_url":"https://api.github.com/users/wework/following{/other_user}","gists_url":"https://api.github.com/users/wework/gists{/gist_id}","starred_url":"https://api.github.com/users/wework/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wework/subscriptions","organizations_url":"https://api.github.com/users/wework/orgs","repos_url":"https://api.github.com/users/wework/repos","events_url":"https://api.github.com/users/wework/events{/privacy}","received_events_url":"https://api.github.com/users/wework/received_events","type":"Organization","site_admin":false},"repo":{"id":32547526,"name":"wework.github.io","full_name":"wework/wework.github.io","owner":{"login":"wework","id":4072897,"avatar_url":"https://avatars.githubusercontent.com/u/4072897?v=3","gravatar_id":"","url":"https://api.github.com/users/wework","html_url":"https://github.com/wework","followers_url":"https://api.github.com/users/wework/followers","following_url":"https://api.github.com/users/wework/following{/other_user}","gists_url":"https://api.github.com/users/wework/gists{/gist_id}","starred_url":"https://api.github.com/users/wework/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wework/subscriptions","organizations_url":"https://api.github.com/users/wework/orgs","repos_url":"https://api.github.com/users/wework/repos","events_url":"https://api.github.com/users/wework/events{/privacy}","received_events_url":"https://api.github.com/users/wework/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/wework/wework.github.io","description":"WeWork Engineering Blog","fork":false,"url":"https://api.github.com/repos/wework/wework.github.io","forks_url":"https://api.github.com/repos/wework/wework.github.io/forks","keys_url":"https://api.github.com/repos/wework/wework.github.io/keys{/key_id}","collaborators_url":"https://api.github.com/repos/wework/wework.github.io/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/wework/wework.github.io/teams","hooks_url":"https://api.github.com/repos/wework/wework.github.io/hooks","issue_events_url":"https://api.github.com/repos/wework/wework.github.io/issues/events{/number}","events_url":"https://api.github.com/repos/wework/wework.github.io/events","assignees_url":"https://api.github.com/repos/wework/wework.github.io/assignees{/user}","branches_url":"https://api.github.com/repos/wework/wework.github.io/branches{/branch}","tags_url":"https://api.github.com/repos/wework/wework.github.io/tags","blobs_url":"https://api.github.com/repos/wework/wework.github.io/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/wework/wework.github.io/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/wework/wework.github.io/git/refs{/sha}","trees_url":"https://api.github.com/repos/wework/wework.github.io/git/trees{/sha}","statuses_url":"https://api.github.com/repos/wework/wework.github.io/statuses/{sha}","languages_url":"https://api.github.com/repos/wework/wework.github.io/languages","stargazers_url":"https://api.github.com/repos/wework/wework.github.io/stargazers","contributors_url":"https://api.github.com/repos/wework/wework.github.io/contributors","subscribers_url":"https://api.github.com/repos/wework/wework.github.io/subscribers","subscription_url":"https://api.github.com/repos/wework/wework.github.io/subscription","commits_url":"https://api.github.com/repos/wework/wework.github.io/commits{/sha}","git_commits_url":"https://api.github.com/repos/wework/wework.github.io/git/commits{/sha}","comments_url":"https://api.github.com/repos/wework/wework.github.io/comments{/number}","issue_comment_url":"https://api.github.com/repos/wework/wework.github.io/issues/comments{/number}","contents_url":"https://api.github.com/repos/wework/wework.github.io/contents/{+path}","compare_url":"https://api.github.com/repos/wework/wework.github.io/compare/{base}...{head}","merges_url":"https://api.github.com/repos/wework/wework.github.io/merges","archive_url":"https://api.github.com/repos/wework/wework.github.io/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/wework/wework.github.io/downloads","issues_url":"https://api.github.com/repos/wework/wework.github.io/issues{/number}","pulls_url":"https://api.github.com/repos/wework/wework.github.io/pulls{/number}","milestones_url":"https://api.github.com/repos/wework/wework.github.io/milestones{/number}","notifications_url":"https://api.github.com/repos/wework/wework.github.io/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/wework/wework.github.io/labels{/name}","releases_url":"https://api.github.com/repos/wework/wework.github.io/releases{/id}","created_at":"2015-03-19T21:36:55Z","updated_at":"2015-10-06T03:18:09Z","pushed_at":"2015-10-12T01:43:25Z","git_url":"git://github.com/wework/wework.github.io.git","ssh_url":"git@github.com:wework/wework.github.io.git","clone_url":"https://github.com/wework/wework.github.io.git","svn_url":"https://github.com/wework/wework.github.io","homepage":null,"size":1732,"stargazers_count":3,"watchers_count":3,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":0,"mirror_url":null,"open_issues_count":1,"forks":0,"open_issues":1,"watchers":3,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/wework/wework.github.io/pulls/4"},"html":{"href":"https://github.com/wework/wework.github.io/pull/4"},"issue":{"href":"https://api.github.com/repos/wework/wework.github.io/issues/4"},"comments":{"href":"https://api.github.com/repos/wework/wework.github.io/issues/4/comments"},"review_comments":{"href":"https://api.github.com/repos/wework/wework.github.io/pulls/4/comments"},"review_comment":{"href":"https://api.github.com/repos/wework/wework.github.io/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/wework/wework.github.io/pulls/4/commits"},"statuses":{"href":"https://api.github.com/repos/wework/wework.github.io/statuses/c9e5aaf654df2e7feae02faa362145bcb3870037"}}}}