{"action":"created","comment":{"url":"https://api.github.com/repos/mobify/mobify-code-style/pulls/comments/55459997","id":55459997,"diff_hunk":"@@ -264,39 +279,45 @@ An exception is the use of ARIA roles for styling state. Where an ARIA role maps\n \n You'll have probably noticed by now that our class names have a variety of prefixes. If not, I will describe their usages now:\n \n-Prefix | Purpose | Scaffold Directory |\n+Prefix | Purpose | Location |\n ------ | ------- | ------------------ |\n-`.c-` | Classes that start with `.c-` are one of the three possible Component classes: `Component Class` (typically the class that defines the component itself), `Sub-Component Class`, `Modifier Class`. [See above](#component-oriented-naming) | */src/scss/components* |\n-`.t-` | Classes that start with `.t-` are Template specific classes. These class names are declared as the `template` in the corresponding [view](https://mobify.atlassian.net/wiki/display/PLAT/Views). Example template classes include: `.t-pdp`, `.t-home`, `.t-category`. | */src/scss/templates*\n-`.x-` | Classes that start with `x-` are considered global states or document states. That means these classes should only be applied to the `html` or `body` element. Example states include `x-ios`, `x-portrait`, `x-retina`, `x-header-is-sticky`, etc. | */src/scss/globals/*\n-`.m-` | **Deprecated** This class prefix is currently reserved for Mobify Modules. However, eventually we intend to deprecate this prefix entirely. At that time, our Mobify Modules will instead be prefixed by their module name. | */src/scss/components/vendor*\n+`.c-` | Component classes: this includes the root component (typically the class that defines the component itself), sub-component class, and the modifier class. [See above](#component-oriented-naming) | */app/components/[component-name]/_[component-name].scss* |\n+`.t-` | Template classes: These class names are declared as the `template` in the corresponding [view](https://mobify.atlassian.net/wiki/display/PLAT/Views). Example template classes include: `.t-pdp`, `.t-home`, `.t-category`. | */app/pages/[page-name]/_[page-name].scss* |\n+`.u-` | Utility classes: these are meant as one-off, strongly opinionated, high specificity overrides for very narrowly defined styles. | */app/global/styles/utilities/_[utility-name].scss* |\n+`.x-` | Classes that start with `x-` are considered global states or document states. That means these classes should only be applied to the `html` or `body` element. Example states include `x-ios`, `x-portrait`, `x-retina`, `x-header-is-sticky`, etc. | *varies* |\n+`.m-` (*) | Desktop embedded mobile markup classes: these are classes that we will use if we author Markup that is intended for clients to embed onto their desktop pages, but is for mobile content. | *n/a* |\n `.js-` | Javascript classes are used exclusively by scripts and should never have CSS styles applied to them. Repeat: **Do NOT** style Javascript classes. | *n/a*\n \n+> * The `m-` class prefix has an old, deprecated use: Mobify Modules. However, Mobify Modules have been replaced with plugins, and are treated as third party libraries with their own conventions.\n+\n+\n+## Parsing vs. Decorating\n \n-## Us versus Them (aka There's an x-ception to every rule)\n+It's important to understand that we have a few different ways of authoring our CSS, and the way we do this is depends a lot on how we convert the desktop markup for mobile. On one hand, we parse the desktop markup and take full control of the final HTML. On the other hand, sometimes we just output the desktop markup as is, untouched or perhaps wrapping certain chunks, and instead control the appearance entirely through CSS.\n \n-It's important to remember that we don't write our own markup. We write a bastardized version of existing markup. In many cases, we're simply adding wrappers or class names to markup that already exists. Rarely, we'll completely re-template something.\n+If you find yourself wondering \"should I be adding a new class, or should I use the classes from desktop?\" consider the following: If we're using their class names, we obviously can't follow our CSM syntax. But that said, sometimes we just have no choice; perhaps there are engineering requirements that force us to retain the markup structure. Under such circumstances, we must stick to the desktop classes.\n \n-Knowing that, how do we make the decision to use our class names or their class names in our styling and how does that affect the way we write our CSS? If we're using their class names, we obviously can't follow the CEM/BEM syntax laid out above. We've laid out some situational advice below on when to use their class names and when to use ours. We also talk about ways to adjust the code style laid out above when using their class names.\n+Below is laid out some situational advice that should clarify when to use desktop classes and when to author our own. We also talk about ways to adjust the code style when using their class names.\n \n-### When to use our selector naming scheme\n+### When to use our class naming convention\n \n-* Whenever you're writing your own markup in a template.\n-* Whenever you're remixing or adding markup through the konf.\n-* Whenever you're adding classes to existing markup.\n-* Whenever you find yourself using @extend.\n+* When writing your own markup in a template\n+* When decorating (adding, moving, or wrapping) markup in a View, Parser, Decorator or UI-Script\n+* When adding custom classes to existing markup\n+* When you find yourself using @extend\n \n ### When to use their existing selectors\n \n-* Whenever possible — when you're not required to do any of the things above. It's faster and easier to use their markup than it is to add our own.\n-* When their markup allows for it. For example, if they don't use classes or they don't use them with any consistency, it doesn't make sense to use their selectors.\n-* When their markup isn't easily changed. AJAXed content or content added after a page is loaded is an example of this.\n+* When it's fastest, easiest or most efficient to use their markup than it is to add our own.\n+* When their markup is too inconsistent, or makes parsing too difficult.\n+* When desktop functionality is tightly coupled to desktop's markup structure.","path":"css/class-naming-conventions/readme.md","position":181,"original_position":181,"commit_id":"4706f56271a7aa6e8b30ac36d77972192a1cf6fb","original_commit_id":"4706f56271a7aa6e8b30ac36d77972192a1cf6fb","user":{"login":"yourpalsonja","id":685539,"avatar_url":"https://avatars.githubusercontent.com/u/685539?v=3","gravatar_id":"","url":"https://api.github.com/users/yourpalsonja","html_url":"https://github.com/yourpalsonja","followers_url":"https://api.github.com/users/yourpalsonja/followers","following_url":"https://api.github.com/users/yourpalsonja/following{/other_user}","gists_url":"https://api.github.com/users/yourpalsonja/gists{/gist_id}","starred_url":"https://api.github.com/users/yourpalsonja/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yourpalsonja/subscriptions","organizations_url":"https://api.github.com/users/yourpalsonja/orgs","repos_url":"https://api.github.com/users/yourpalsonja/repos","events_url":"https://api.github.com/users/yourpalsonja/events{/privacy}","received_events_url":"https://api.github.com/users/yourpalsonja/received_events","type":"User","site_admin":false},"body":"Is this meant to say \"when *mobile* functionality...\"","created_at":"2016-03-09T01:34:18Z","updated_at":"2016-03-09T01:34:18Z","html_url":"https://github.com/mobify/mobify-code-style/pull/98#discussion_r55459997","pull_request_url":"https://api.github.com/repos/mobify/mobify-code-style/pulls/98","_links":{"self":{"href":"https://api.github.com/repos/mobify/mobify-code-style/pulls/comments/55459997"},"html":{"href":"https://github.com/mobify/mobify-code-style/pull/98#discussion_r55459997"},"pull_request":{"href":"https://api.github.com/repos/mobify/mobify-code-style/pulls/98"}}},"pull_request":{"url":"https://api.github.com/repos/mobify/mobify-code-style/pulls/98","id":61169710,"html_url":"https://github.com/mobify/mobify-code-style/pull/98","diff_url":"https://github.com/mobify/mobify-code-style/pull/98.diff","patch_url":"https://github.com/mobify/mobify-code-style/pull/98.patch","issue_url":"https://api.github.com/repos/mobify/mobify-code-style/issues/98","number":98,"state":"open","locked":false,"title":"[WIP] Update class naming conventions","user":{"login":"jeffkamo","id":734535,"avatar_url":"https://avatars.githubusercontent.com/u/734535?v=3","gravatar_id":"","url":"https://api.github.com/users/jeffkamo","html_url":"https://github.com/jeffkamo","followers_url":"https://api.github.com/users/jeffkamo/followers","following_url":"https://api.github.com/users/jeffkamo/following{/other_user}","gists_url":"https://api.github.com/users/jeffkamo/gists{/gist_id}","starred_url":"https://api.github.com/users/jeffkamo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jeffkamo/subscriptions","organizations_url":"https://api.github.com/users/jeffkamo/orgs","repos_url":"https://api.github.com/users/jeffkamo/repos","events_url":"https://api.github.com/users/jeffkamo/events{/privacy}","received_events_url":"https://api.github.com/users/jeffkamo/received_events","type":"User","site_admin":false},"body":"Status: **WIP**\r\nOwner: @jeffkamo\r\nReviewers: @cole-sanderson @bengroulx @mlworks @yourpalsonja @vivchen \r\n\r\n## Changes\r\n- Start updating the Class Naming Conventions to match our modern best practices.\r\n\r\n## Todos:\r\n- [ ] Developer +1\r\n- [ ] Developer +1","created_at":"2016-03-01T00:09:15Z","updated_at":"2016-03-09T01:34:18Z","closed_at":null,"merged_at":null,"merge_commit_sha":"ec66322df0d32310e5fd86b5c215b213dbb6e02b","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/mobify/mobify-code-style/pulls/98/commits","review_comments_url":"https://api.github.com/repos/mobify/mobify-code-style/pulls/98/comments","review_comment_url":"https://api.github.com/repos/mobify/mobify-code-style/pulls/comments{/number}","comments_url":"https://api.github.com/repos/mobify/mobify-code-style/issues/98/comments","statuses_url":"https://api.github.com/repos/mobify/mobify-code-style/statuses/4706f56271a7aa6e8b30ac36d77972192a1cf6fb","head":{"label":"mobify:jeffkamo-patch-class-naming-conventions","ref":"jeffkamo-patch-class-naming-conventions","sha":"4706f56271a7aa6e8b30ac36d77972192a1cf6fb","user":{"login":"mobify","id":73539,"avatar_url":"https://avatars.githubusercontent.com/u/73539?v=3","gravatar_id":"","url":"https://api.github.com/users/mobify","html_url":"https://github.com/mobify","followers_url":"https://api.github.com/users/mobify/followers","following_url":"https://api.github.com/users/mobify/following{/other_user}","gists_url":"https://api.github.com/users/mobify/gists{/gist_id}","starred_url":"https://api.github.com/users/mobify/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mobify/subscriptions","organizations_url":"https://api.github.com/users/mobify/orgs","repos_url":"https://api.github.com/users/mobify/repos","events_url":"https://api.github.com/users/mobify/events{/privacy}","received_events_url":"https://api.github.com/users/mobify/received_events","type":"Organization","site_admin":false},"repo":{"id":19261065,"name":"mobify-code-style","full_name":"mobify/mobify-code-style","owner":{"login":"mobify","id":73539,"avatar_url":"https://avatars.githubusercontent.com/u/73539?v=3","gravatar_id":"","url":"https://api.github.com/users/mobify","html_url":"https://github.com/mobify","followers_url":"https://api.github.com/users/mobify/followers","following_url":"https://api.github.com/users/mobify/following{/other_user}","gists_url":"https://api.github.com/users/mobify/gists{/gist_id}","starred_url":"https://api.github.com/users/mobify/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mobify/subscriptions","organizations_url":"https://api.github.com/users/mobify/orgs","repos_url":"https://api.github.com/users/mobify/repos","events_url":"https://api.github.com/users/mobify/events{/privacy}","received_events_url":"https://api.github.com/users/mobify/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/mobify/mobify-code-style","description":"Mobify's coding style and standards!","fork":false,"url":"https://api.github.com/repos/mobify/mobify-code-style","forks_url":"https://api.github.com/repos/mobify/mobify-code-style/forks","keys_url":"https://api.github.com/repos/mobify/mobify-code-style/keys{/key_id}","collaborators_url":"https://api.github.com/repos/mobify/mobify-code-style/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/mobify/mobify-code-style/teams","hooks_url":"https://api.github.com/repos/mobify/mobify-code-style/hooks","issue_events_url":"https://api.github.com/repos/mobify/mobify-code-style/issues/events{/number}","events_url":"https://api.github.com/repos/mobify/mobify-code-style/events","assignees_url":"https://api.github.com/repos/mobify/mobify-code-style/assignees{/user}","branches_url":"https://api.github.com/repos/mobify/mobify-code-style/branches{/branch}","tags_url":"https://api.github.com/repos/mobify/mobify-code-style/tags","blobs_url":"https://api.github.com/repos/mobify/mobify-code-style/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/mobify/mobify-code-style/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/mobify/mobify-code-style/git/refs{/sha}","trees_url":"https://api.github.com/repos/mobify/mobify-code-style/git/trees{/sha}","statuses_url":"https://api.github.com/repos/mobify/mobify-code-style/statuses/{sha}","languages_url":"https://api.github.com/repos/mobify/mobify-code-style/languages","stargazers_url":"https://api.github.com/repos/mobify/mobify-code-style/stargazers","contributors_url":"https://api.github.com/repos/mobify/mobify-code-style/contributors","subscribers_url":"https://api.github.com/repos/mobify/mobify-code-style/subscribers","subscription_url":"https://api.github.com/repos/mobify/mobify-code-style/subscription","commits_url":"https://api.github.com/repos/mobify/mobify-code-style/commits{/sha}","git_commits_url":"https://api.github.com/repos/mobify/mobify-code-style/git/commits{/sha}","comments_url":"https://api.github.com/repos/mobify/mobify-code-style/comments{/number}","issue_comment_url":"https://api.github.com/repos/mobify/mobify-code-style/issues/comments{/number}","contents_url":"https://api.github.com/repos/mobify/mobify-code-style/contents/{+path}","compare_url":"https://api.github.com/repos/mobify/mobify-code-style/compare/{base}...{head}","merges_url":"https://api.github.com/repos/mobify/mobify-code-style/merges","archive_url":"https://api.github.com/repos/mobify/mobify-code-style/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/mobify/mobify-code-style/downloads","issues_url":"https://api.github.com/repos/mobify/mobify-code-style/issues{/number}","pulls_url":"https://api.github.com/repos/mobify/mobify-code-style/pulls{/number}","milestones_url":"https://api.github.com/repos/mobify/mobify-code-style/milestones{/number}","notifications_url":"https://api.github.com/repos/mobify/mobify-code-style/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/mobify/mobify-code-style/labels{/name}","releases_url":"https://api.github.com/repos/mobify/mobify-code-style/releases{/id}","deployments_url":"https://api.github.com/repos/mobify/mobify-code-style/deployments","created_at":"2014-04-29T02:27:15Z","updated_at":"2016-03-08T19:57:03Z","pushed_at":"2016-03-08T17:53:20Z","git_url":"git://github.com/mobify/mobify-code-style.git","ssh_url":"git@github.com:mobify/mobify-code-style.git","clone_url":"https://github.com/mobify/mobify-code-style.git","svn_url":"https://github.com/mobify/mobify-code-style","homepage":"","size":348,"stargazers_count":66,"watchers_count":66,"language":null,"has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":7,"mirror_url":null,"open_issues_count":12,"forks":7,"open_issues":12,"watchers":66,"default_branch":"develop"}},"base":{"label":"mobify:develop","ref":"develop","sha":"21b7717118c33a3454b472e1e9de74fa509f7cfc","user":{"login":"mobify","id":73539,"avatar_url":"https://avatars.githubusercontent.com/u/73539?v=3","gravatar_id":"","url":"https://api.github.com/users/mobify","html_url":"https://github.com/mobify","followers_url":"https://api.github.com/users/mobify/followers","following_url":"https://api.github.com/users/mobify/following{/other_user}","gists_url":"https://api.github.com/users/mobify/gists{/gist_id}","starred_url":"https://api.github.com/users/mobify/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mobify/subscriptions","organizations_url":"https://api.github.com/users/mobify/orgs","repos_url":"https://api.github.com/users/mobify/repos","events_url":"https://api.github.com/users/mobify/events{/privacy}","received_events_url":"https://api.github.com/users/mobify/received_events","type":"Organization","site_admin":false},"repo":{"id":19261065,"name":"mobify-code-style","full_name":"mobify/mobify-code-style","owner":{"login":"mobify","id":73539,"avatar_url":"https://avatars.githubusercontent.com/u/73539?v=3","gravatar_id":"","url":"https://api.github.com/users/mobify","html_url":"https://github.com/mobify","followers_url":"https://api.github.com/users/mobify/followers","following_url":"https://api.github.com/users/mobify/following{/other_user}","gists_url":"https://api.github.com/users/mobify/gists{/gist_id}","starred_url":"https://api.github.com/users/mobify/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mobify/subscriptions","organizations_url":"https://api.github.com/users/mobify/orgs","repos_url":"https://api.github.com/users/mobify/repos","events_url":"https://api.github.com/users/mobify/events{/privacy}","received_events_url":"https://api.github.com/users/mobify/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/mobify/mobify-code-style","description":"Mobify's coding style and standards!","fork":false,"url":"https://api.github.com/repos/mobify/mobify-code-style","forks_url":"https://api.github.com/repos/mobify/mobify-code-style/forks","keys_url":"https://api.github.com/repos/mobify/mobify-code-style/keys{/key_id}","collaborators_url":"https://api.github.com/repos/mobify/mobify-code-style/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/mobify/mobify-code-style/teams","hooks_url":"https://api.github.com/repos/mobify/mobify-code-style/hooks","issue_events_url":"https://api.github.com/repos/mobify/mobify-code-style/issues/events{/number}","events_url":"https://api.github.com/repos/mobify/mobify-code-style/events","assignees_url":"https://api.github.com/repos/mobify/mobify-code-style/assignees{/user}","branches_url":"https://api.github.com/repos/mobify/mobify-code-style/branches{/branch}","tags_url":"https://api.github.com/repos/mobify/mobify-code-style/tags","blobs_url":"https://api.github.com/repos/mobify/mobify-code-style/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/mobify/mobify-code-style/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/mobify/mobify-code-style/git/refs{/sha}","trees_url":"https://api.github.com/repos/mobify/mobify-code-style/git/trees{/sha}","statuses_url":"https://api.github.com/repos/mobify/mobify-code-style/statuses/{sha}","languages_url":"https://api.github.com/repos/mobify/mobify-code-style/languages","stargazers_url":"https://api.github.com/repos/mobify/mobify-code-style/stargazers","contributors_url":"https://api.github.com/repos/mobify/mobify-code-style/contributors","subscribers_url":"https://api.github.com/repos/mobify/mobify-code-style/subscribers","subscription_url":"https://api.github.com/repos/mobify/mobify-code-style/subscription","commits_url":"https://api.github.com/repos/mobify/mobify-code-style/commits{/sha}","git_commits_url":"https://api.github.com/repos/mobify/mobify-code-style/git/commits{/sha}","comments_url":"https://api.github.com/repos/mobify/mobify-code-style/comments{/number}","issue_comment_url":"https://api.github.com/repos/mobify/mobify-code-style/issues/comments{/number}","contents_url":"https://api.github.com/repos/mobify/mobify-code-style/contents/{+path}","compare_url":"https://api.github.com/repos/mobify/mobify-code-style/compare/{base}...{head}","merges_url":"https://api.github.com/repos/mobify/mobify-code-style/merges","archive_url":"https://api.github.com/repos/mobify/mobify-code-style/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/mobify/mobify-code-style/downloads","issues_url":"https://api.github.com/repos/mobify/mobify-code-style/issues{/number}","pulls_url":"https://api.github.com/repos/mobify/mobify-code-style/pulls{/number}","milestones_url":"https://api.github.com/repos/mobify/mobify-code-style/milestones{/number}","notifications_url":"https://api.github.com/repos/mobify/mobify-code-style/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/mobify/mobify-code-style/labels{/name}","releases_url":"https://api.github.com/repos/mobify/mobify-code-style/releases{/id}","deployments_url":"https://api.github.com/repos/mobify/mobify-code-style/deployments","created_at":"2014-04-29T02:27:15Z","updated_at":"2016-03-08T19:57:03Z","pushed_at":"2016-03-08T17:53:20Z","git_url":"git://github.com/mobify/mobify-code-style.git","ssh_url":"git@github.com:mobify/mobify-code-style.git","clone_url":"https://github.com/mobify/mobify-code-style.git","svn_url":"https://github.com/mobify/mobify-code-style","homepage":"","size":348,"stargazers_count":66,"watchers_count":66,"language":null,"has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":7,"mirror_url":null,"open_issues_count":12,"forks":7,"open_issues":12,"watchers":66,"default_branch":"develop"}},"_links":{"self":{"href":"https://api.github.com/repos/mobify/mobify-code-style/pulls/98"},"html":{"href":"https://github.com/mobify/mobify-code-style/pull/98"},"issue":{"href":"https://api.github.com/repos/mobify/mobify-code-style/issues/98"},"comments":{"href":"https://api.github.com/repos/mobify/mobify-code-style/issues/98/comments"},"review_comments":{"href":"https://api.github.com/repos/mobify/mobify-code-style/pulls/98/comments"},"review_comment":{"href":"https://api.github.com/repos/mobify/mobify-code-style/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/mobify/mobify-code-style/pulls/98/commits"},"statuses":{"href":"https://api.github.com/repos/mobify/mobify-code-style/statuses/4706f56271a7aa6e8b30ac36d77972192a1cf6fb"}}}}