{"action":"created","comment":{"url":"https://api.github.com/repos/dockyard/reefpoints/pulls/comments/22529146","id":22529146,"diff_hunk":"@@ -0,0 +1,42 @@\n+---\n+layout: post\n+title: 'BEM Tips: Avoid Chaining Modifiers'\n+twitter: 'acacheung'\n+github: 'acacheung'\n+author: 'Amanda Cheung'\n+tags: css\n+social: true\n+comments: true\n+published: false\n+---\n+\n+At DockYard, we use the BEM methodology for naming our CSS classes. If\n+you aren&rsquo;t already familiar with BEM, it would be helpful to take a look at\n+[Harry Robert&rsquo;s MindBEMding blog post](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)\n+and the [BEM website](https://bem.info/) first.\n+\n+When I started looking into using BEM, I thought it would definitely work well\n+for large web applications. The more rules we could put in place\n+regarding naming conventions, the better. What I didn&rsquo;t understand\n+was what to do when an element could be considered an element of a block *or* a\n+modifier. If I had a button that was in the footer and it was styled differently\n+than other buttons in the website, should it be named `.footer__button`\n+or `.button--footer`? Arguments could be made for both sides, so is one better\n+than the other?\n+\n+After trying out both ways, `.footer__button` proved more scalable because\n+this rule could be consistently applied in more situations. Could there\n+be more types of buttons in the footer?\n+If there are also social buttons in the footer, our choices now become\n+`.footer__button--social` or `.button--footer--social`. In the second one, is social modifying\n+footer and footer modifying button? Or is social modifying button as\n+well? To avoid confusion, I would call it `.footer__button--social`\n+and not chain my modifiers. This doesn&rsquo;t mean we\n+shouldn&rsquo;t use multiple modifiers in a class name at all.\n+`.person--female__hand--right` is still fair game. It&rsquo;s clear that female\n+is modifying person and right is modifying hand.\n+\n+## TL;DR\n+If I had an element that could potentially be either an element of a\n+block or modifying an element, the latter is better because\n+chaining modifiers can be confusing.","path":"source/posts/2015-01-05-avoid-chaining-modifiers.md","position":42,"original_position":42,"commit_id":"5e1873599ed9a6deb899222eb813b13c34f7a056","original_commit_id":"5e1873599ed9a6deb899222eb813b13c34f7a056","user":{"login":"NetOperatorWibby","id":1288356,"avatar_url":"https://avatars.githubusercontent.com/u/1288356?v=3","gravatar_id":"","url":"https://api.github.com/users/NetOperatorWibby","html_url":"https://github.com/NetOperatorWibby","followers_url":"https://api.github.com/users/NetOperatorWibby/followers","following_url":"https://api.github.com/users/NetOperatorWibby/following{/other_user}","gists_url":"https://api.github.com/users/NetOperatorWibby/gists{/gist_id}","starred_url":"https://api.github.com/users/NetOperatorWibby/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NetOperatorWibby/subscriptions","organizations_url":"https://api.github.com/users/NetOperatorWibby/orgs","repos_url":"https://api.github.com/users/NetOperatorWibby/repos","events_url":"https://api.github.com/users/NetOperatorWibby/events{/privacy}","received_events_url":"https://api.github.com/users/NetOperatorWibby/received_events","type":"User","site_admin":false},"body":"I remember this from our convo a few weeks ago. Nice and succinct.","created_at":"2015-01-06T15:42:56Z","updated_at":"2015-01-06T15:42:56Z","html_url":"https://github.com/dockyard/reefpoints/pull/233#discussion_r22529146","pull_request_url":"https://api.github.com/repos/dockyard/reefpoints/pulls/233","_links":{"self":{"href":"https://api.github.com/repos/dockyard/reefpoints/pulls/comments/22529146"},"html":{"href":"https://github.com/dockyard/reefpoints/pull/233#discussion_r22529146"},"pull_request":{"href":"https://api.github.com/repos/dockyard/reefpoints/pulls/233"}}},"pull_request":{"url":"https://api.github.com/repos/dockyard/reefpoints/pulls/233","id":26895313,"html_url":"https://github.com/dockyard/reefpoints/pull/233","diff_url":"https://github.com/dockyard/reefpoints/pull/233.diff","patch_url":"https://github.com/dockyard/reefpoints/pull/233.patch","issue_url":"https://api.github.com/repos/dockyard/reefpoints/issues/233","number":233,"state":"open","locked":false,"title":"BEM avoid chaining modifiers blog post","user":{"login":"acacheung","id":1054686,"avatar_url":"https://avatars.githubusercontent.com/u/1054686?v=3","gravatar_id":"","url":"https://api.github.com/users/acacheung","html_url":"https://github.com/acacheung","followers_url":"https://api.github.com/users/acacheung/followers","following_url":"https://api.github.com/users/acacheung/following{/other_user}","gists_url":"https://api.github.com/users/acacheung/gists{/gist_id}","starred_url":"https://api.github.com/users/acacheung/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acacheung/subscriptions","organizations_url":"https://api.github.com/users/acacheung/orgs","repos_url":"https://api.github.com/users/acacheung/repos","events_url":"https://api.github.com/users/acacheung/events{/privacy}","received_events_url":"https://api.github.com/users/acacheung/received_events","type":"User","site_admin":false},"body":"","created_at":"2015-01-06T15:27:58Z","updated_at":"2015-01-06T15:42:56Z","closed_at":null,"merged_at":null,"merge_commit_sha":"86739ed218088cd04fb0cba538da885810a2f02b","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/dockyard/reefpoints/pulls/233/commits","review_comments_url":"https://api.github.com/repos/dockyard/reefpoints/pulls/233/comments","review_comment_url":"https://api.github.com/repos/dockyard/reefpoints/pulls/comments/{number}","comments_url":"https://api.github.com/repos/dockyard/reefpoints/issues/233/comments","statuses_url":"https://api.github.com/repos/dockyard/reefpoints/statuses/5e1873599ed9a6deb899222eb813b13c34f7a056","head":{"label":"dockyard:ac-bem-double-modifiers","ref":"ac-bem-double-modifiers","sha":"5e1873599ed9a6deb899222eb813b13c34f7a056","user":{"login":"dockyard","id":873981,"avatar_url":"https://avatars.githubusercontent.com/u/873981?v=3","gravatar_id":"","url":"https://api.github.com/users/dockyard","html_url":"https://github.com/dockyard","followers_url":"https://api.github.com/users/dockyard/followers","following_url":"https://api.github.com/users/dockyard/following{/other_user}","gists_url":"https://api.github.com/users/dockyard/gists{/gist_id}","starred_url":"https://api.github.com/users/dockyard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dockyard/subscriptions","organizations_url":"https://api.github.com/users/dockyard/orgs","repos_url":"https://api.github.com/users/dockyard/repos","events_url":"https://api.github.com/users/dockyard/events{/privacy}","received_events_url":"https://api.github.com/users/dockyard/received_events","type":"Organization","site_admin":false},"repo":{"id":2262874,"name":"reefpoints","full_name":"dockyard/reefpoints","owner":{"login":"dockyard","id":873981,"avatar_url":"https://avatars.githubusercontent.com/u/873981?v=3","gravatar_id":"","url":"https://api.github.com/users/dockyard","html_url":"https://github.com/dockyard","followers_url":"https://api.github.com/users/dockyard/followers","following_url":"https://api.github.com/users/dockyard/following{/other_user}","gists_url":"https://api.github.com/users/dockyard/gists{/gist_id}","starred_url":"https://api.github.com/users/dockyard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dockyard/subscriptions","organizations_url":"https://api.github.com/users/dockyard/orgs","repos_url":"https://api.github.com/users/dockyard/repos","events_url":"https://api.github.com/users/dockyard/events{/privacy}","received_events_url":"https://api.github.com/users/dockyard/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/dockyard/reefpoints","description":"DockYard Blog","fork":false,"url":"https://api.github.com/repos/dockyard/reefpoints","forks_url":"https://api.github.com/repos/dockyard/reefpoints/forks","keys_url":"https://api.github.com/repos/dockyard/reefpoints/keys{/key_id}","collaborators_url":"https://api.github.com/repos/dockyard/reefpoints/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/dockyard/reefpoints/teams","hooks_url":"https://api.github.com/repos/dockyard/reefpoints/hooks","issue_events_url":"https://api.github.com/repos/dockyard/reefpoints/issues/events{/number}","events_url":"https://api.github.com/repos/dockyard/reefpoints/events","assignees_url":"https://api.github.com/repos/dockyard/reefpoints/assignees{/user}","branches_url":"https://api.github.com/repos/dockyard/reefpoints/branches{/branch}","tags_url":"https://api.github.com/repos/dockyard/reefpoints/tags","blobs_url":"https://api.github.com/repos/dockyard/reefpoints/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/dockyard/reefpoints/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/dockyard/reefpoints/git/refs{/sha}","trees_url":"https://api.github.com/repos/dockyard/reefpoints/git/trees{/sha}","statuses_url":"https://api.github.com/repos/dockyard/reefpoints/statuses/{sha}","languages_url":"https://api.github.com/repos/dockyard/reefpoints/languages","stargazers_url":"https://api.github.com/repos/dockyard/reefpoints/stargazers","contributors_url":"https://api.github.com/repos/dockyard/reefpoints/contributors","subscribers_url":"https://api.github.com/repos/dockyard/reefpoints/subscribers","subscription_url":"https://api.github.com/repos/dockyard/reefpoints/subscription","commits_url":"https://api.github.com/repos/dockyard/reefpoints/commits{/sha}","git_commits_url":"https://api.github.com/repos/dockyard/reefpoints/git/commits{/sha}","comments_url":"https://api.github.com/repos/dockyard/reefpoints/comments{/number}","issue_comment_url":"https://api.github.com/repos/dockyard/reefpoints/issues/comments/{number}","contents_url":"https://api.github.com/repos/dockyard/reefpoints/contents/{+path}","compare_url":"https://api.github.com/repos/dockyard/reefpoints/compare/{base}...{head}","merges_url":"https://api.github.com/repos/dockyard/reefpoints/merges","archive_url":"https://api.github.com/repos/dockyard/reefpoints/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/dockyard/reefpoints/downloads","issues_url":"https://api.github.com/repos/dockyard/reefpoints/issues{/number}","pulls_url":"https://api.github.com/repos/dockyard/reefpoints/pulls{/number}","milestones_url":"https://api.github.com/repos/dockyard/reefpoints/milestones{/number}","notifications_url":"https://api.github.com/repos/dockyard/reefpoints/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/dockyard/reefpoints/labels{/name}","releases_url":"https://api.github.com/repos/dockyard/reefpoints/releases{/id}","created_at":"2011-08-24T16:55:40Z","updated_at":"2015-01-03T18:56:18Z","pushed_at":"2015-01-05T20:44:13Z","git_url":"git://github.com/dockyard/reefpoints.git","ssh_url":"git@github.com:dockyard/reefpoints.git","clone_url":"https://github.com/dockyard/reefpoints.git","svn_url":"https://github.com/dockyard/reefpoints","homepage":"http://reefpoints.dockyard.com","size":54410,"stargazers_count":29,"watchers_count":29,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":true,"forks_count":54,"mirror_url":null,"open_issues_count":6,"forks":54,"open_issues":6,"watchers":29,"default_branch":"master"}},"base":{"label":"dockyard:master","ref":"master","sha":"fc0506768c775ae8b7d00d431af996b0802fe6ad","user":{"login":"dockyard","id":873981,"avatar_url":"https://avatars.githubusercontent.com/u/873981?v=3","gravatar_id":"","url":"https://api.github.com/users/dockyard","html_url":"https://github.com/dockyard","followers_url":"https://api.github.com/users/dockyard/followers","following_url":"https://api.github.com/users/dockyard/following{/other_user}","gists_url":"https://api.github.com/users/dockyard/gists{/gist_id}","starred_url":"https://api.github.com/users/dockyard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dockyard/subscriptions","organizations_url":"https://api.github.com/users/dockyard/orgs","repos_url":"https://api.github.com/users/dockyard/repos","events_url":"https://api.github.com/users/dockyard/events{/privacy}","received_events_url":"https://api.github.com/users/dockyard/received_events","type":"Organization","site_admin":false},"repo":{"id":2262874,"name":"reefpoints","full_name":"dockyard/reefpoints","owner":{"login":"dockyard","id":873981,"avatar_url":"https://avatars.githubusercontent.com/u/873981?v=3","gravatar_id":"","url":"https://api.github.com/users/dockyard","html_url":"https://github.com/dockyard","followers_url":"https://api.github.com/users/dockyard/followers","following_url":"https://api.github.com/users/dockyard/following{/other_user}","gists_url":"https://api.github.com/users/dockyard/gists{/gist_id}","starred_url":"https://api.github.com/users/dockyard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dockyard/subscriptions","organizations_url":"https://api.github.com/users/dockyard/orgs","repos_url":"https://api.github.com/users/dockyard/repos","events_url":"https://api.github.com/users/dockyard/events{/privacy}","received_events_url":"https://api.github.com/users/dockyard/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/dockyard/reefpoints","description":"DockYard Blog","fork":false,"url":"https://api.github.com/repos/dockyard/reefpoints","forks_url":"https://api.github.com/repos/dockyard/reefpoints/forks","keys_url":"https://api.github.com/repos/dockyard/reefpoints/keys{/key_id}","collaborators_url":"https://api.github.com/repos/dockyard/reefpoints/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/dockyard/reefpoints/teams","hooks_url":"https://api.github.com/repos/dockyard/reefpoints/hooks","issue_events_url":"https://api.github.com/repos/dockyard/reefpoints/issues/events{/number}","events_url":"https://api.github.com/repos/dockyard/reefpoints/events","assignees_url":"https://api.github.com/repos/dockyard/reefpoints/assignees{/user}","branches_url":"https://api.github.com/repos/dockyard/reefpoints/branches{/branch}","tags_url":"https://api.github.com/repos/dockyard/reefpoints/tags","blobs_url":"https://api.github.com/repos/dockyard/reefpoints/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/dockyard/reefpoints/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/dockyard/reefpoints/git/refs{/sha}","trees_url":"https://api.github.com/repos/dockyard/reefpoints/git/trees{/sha}","statuses_url":"https://api.github.com/repos/dockyard/reefpoints/statuses/{sha}","languages_url":"https://api.github.com/repos/dockyard/reefpoints/languages","stargazers_url":"https://api.github.com/repos/dockyard/reefpoints/stargazers","contributors_url":"https://api.github.com/repos/dockyard/reefpoints/contributors","subscribers_url":"https://api.github.com/repos/dockyard/reefpoints/subscribers","subscription_url":"https://api.github.com/repos/dockyard/reefpoints/subscription","commits_url":"https://api.github.com/repos/dockyard/reefpoints/commits{/sha}","git_commits_url":"https://api.github.com/repos/dockyard/reefpoints/git/commits{/sha}","comments_url":"https://api.github.com/repos/dockyard/reefpoints/comments{/number}","issue_comment_url":"https://api.github.com/repos/dockyard/reefpoints/issues/comments/{number}","contents_url":"https://api.github.com/repos/dockyard/reefpoints/contents/{+path}","compare_url":"https://api.github.com/repos/dockyard/reefpoints/compare/{base}...{head}","merges_url":"https://api.github.com/repos/dockyard/reefpoints/merges","archive_url":"https://api.github.com/repos/dockyard/reefpoints/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/dockyard/reefpoints/downloads","issues_url":"https://api.github.com/repos/dockyard/reefpoints/issues{/number}","pulls_url":"https://api.github.com/repos/dockyard/reefpoints/pulls{/number}","milestones_url":"https://api.github.com/repos/dockyard/reefpoints/milestones{/number}","notifications_url":"https://api.github.com/repos/dockyard/reefpoints/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/dockyard/reefpoints/labels{/name}","releases_url":"https://api.github.com/repos/dockyard/reefpoints/releases{/id}","created_at":"2011-08-24T16:55:40Z","updated_at":"2015-01-03T18:56:18Z","pushed_at":"2015-01-05T20:44:13Z","git_url":"git://github.com/dockyard/reefpoints.git","ssh_url":"git@github.com:dockyard/reefpoints.git","clone_url":"https://github.com/dockyard/reefpoints.git","svn_url":"https://github.com/dockyard/reefpoints","homepage":"http://reefpoints.dockyard.com","size":54410,"stargazers_count":29,"watchers_count":29,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":true,"forks_count":54,"mirror_url":null,"open_issues_count":6,"forks":54,"open_issues":6,"watchers":29,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/dockyard/reefpoints/pulls/233"},"html":{"href":"https://github.com/dockyard/reefpoints/pull/233"},"issue":{"href":"https://api.github.com/repos/dockyard/reefpoints/issues/233"},"comments":{"href":"https://api.github.com/repos/dockyard/reefpoints/issues/233/comments"},"review_comments":{"href":"https://api.github.com/repos/dockyard/reefpoints/pulls/233/comments"},"review_comment":{"href":"https://api.github.com/repos/dockyard/reefpoints/pulls/comments/{number}"},"commits":{"href":"https://api.github.com/repos/dockyard/reefpoints/pulls/233/commits"},"statuses":{"href":"https://api.github.com/repos/dockyard/reefpoints/statuses/5e1873599ed9a6deb899222eb813b13c34f7a056"}}}}