{"action":"created","comment":{"url":"https://api.github.com/repos/shopware/devdocs/pulls/comments/76388334","id":76388334,"diff_hunk":"@@ -0,0 +1,340 @@\n+---\n+title: CSS coding guidelines\n+tags:\n+- cache\n+- http\n+\n+categories:\n+- dev\n+\n+authors: [stp]\n+indexed: true\n+\n+github_link: blog/_posts/2016-08-26-css-coding-guidelines.md\n+---\n+\n+Coding guidelines are important to improving collaboration & code quality. A lot of question regarding our CSS coding\n+guidelines are coming up our various platform. In this blog post we're taking a closer look on the guidelines.\n+\n+## Background\n+There are quite a few guides & principles how you should write your CSS code. Two of the most popular ones are [BEM](http://getbem.com/introduction/)\n+& [SMACSS](https://smacss.com/). Our guidelines are based on these two. We took the best parts of them & modified them to\n+our needs.\n+\n+### Element sizing\n+The size of elements should be declared in percentage or REM values to provide relative values to provide us with the\n+biggest flexibility. The EM unit is relative to the `font-size` of the parent, which causes the compounding issue. The\n+REM unit on the other hand is relative to the root element (`html`). That means that we can define a single `font-size`\n+on the `html` element and define all REM units to be a percentage of that.\n+\n+Let's take a quick look on the browser support:\n+\n+<iframe src=\"http://caniuse.bitsofco.de/embed/index.html?feat=rem&periods=future_1,current,past_1\" style=\"width: 100%; height: 375px;\">\n+    We're sorry but your browser doesn't support the `iframe` element\n+</iframe>\n+\n+As you can, the browser support is pretty good & all of our target platforms are supported. Our best friend the Internet\n+Explorer 10 just has a partial support of the feature but that's not an issue for us.\n+\n+Due to the fact that we're using LESS in the storefront, we created helpers, so called *mixins*, which are making it easy\n+to work with REM unit values. They're converting your pixel based values to REM values.\n+\n+```\n+.my--class {\n+\n+    .unitize(font-size, 16);             // Single properties\n+\n+    .unitize-width(200);                 // Helpers for width and height\n+\n+    .unitize-padding(20, 20);            // Helper for padding accepting the four value syntax\n+\n+    .unitize-margin(10, 0, 0, 0);        // Helper for margin accepting the four value syntax\n+}\n+```\n+\n+You can learn more on how to use the helpers in this [comprehensive guide](https://developers.shopware.com/designers-guide/less/).\n+\n+## Think in objects\n+\n+To write modular CSS you have to push yourself to think in objects. What are objects in this case? Objects are small\n+independent parts of functionality. UI elements like headers, footers, buttons or form elements are objects.\n+ \n+Object are **always** declared using a class selector. ID & tag based selectors not that easy to customize. For example\n+to override an ID based selector you have to declare a selector chain with 255 classes to override one ID.\n+\n+```\n+.button {\n+    background: linear-gradient(#eee, #ccc);\n+    border: 1px solid #999;\n+    color: #333;\n+    cursor: pointer;\n+    padding: 1em 1.5em;\n+     \n+    &:hover {\n+        background: linear-gradient(#fff, #ddd);\n+        color: #111;\n+    }\n+}\n+```\n+\n+The `&` selector in LESS makes it easy to define different \"states\" of object. In the above example we define the\n+\"hover\" state for the button.\n+\n+## Parent-child relationshop\n+Using a consistent naming scheme to define the parent-child relationship between objects helps to write much cleaner \n+CSS code. Here's an example:\n+\n+```\n+/** LESS code */\n+.post {\n+    margin: 2em;\n+     \n+    .title {\n+        font-size: 2em;\n+        font-weight: normal;\n+    }\n+}\n+  \n+/** Processed result */\n+.post {\n+    margin: 2em\n+}\n+.post .title {\n+    font-size: 2em;\n+    font-weight: normal;\n+}\n+```\n+\n+As you can see in the above example we came up a hard relationship parent element `.post` & the child element `.title`.\n+The styling of the title will only be applyed when the parent element has the class `.post`. That means we don't have the\n+chance to use the post title in a modified version for another object. So let's try to get rid of the hard relationship\n+between these two selector:\n+\n+```\n+/** LESS code and processed result */\n+.post {\n+    margin: 2em;\n+}\n+.post--title {\n+    font-size: 2em;\n+    font-weight: normal;\n+}\n+```\n+\n+The main benefit of this approach is that the defined styles can be used throughout the application & we don't have\n+to worry about conflicts with similar named objects.\n+\n+## Subclassing objects\n+The most object oriented concept are using the concept of extending classes from other objects. This technique is called\n+*\"subclassing\"*. THis is useful when you want to extend the properties of the object & define additional properties.\n+\n+Let's go back to the button example & extend it to a drop down button:\n+\n+```\n+.button {\n+    background: linear-gradient(#eee, #ccc);\n+    border: 1px solid #999;\n+    color: #333;\n+    cursor: pointer;\n+    padding: 1em 1.5em;\n+     \n+    &:hover {\n+        background: linear-gradient(#fff, #ddd);\n+        color: #111;\n+    }\n+}\n+  \n+.dropdown--button {\n+    &::after {\n+        content: '&#9662;'\n+    }\n+}\n+```\n+\n+In this example we extended the button & transformed it to a drop down button. To use this button styles we have to\n+apply both classes to the \"button\" element:\n+  \n+```\n+<button class=\"button dropdown-button\">\n+    Dropdown\n+</button>\n+```\n+\n+## Using modifiers\n+The next topic are *\"modifiers\"*. A modifier can be used to define a certain state for a element or apply modifications\n+to the behavior and / or styling.\n+\n+For states we're using the prefix `is--` as the [SMACSS](https://smacss.com/)'s naming scheme defines it. One of the most\n+popular use cases are active states:\n+\n+```\n+.tab {\n+    background: #f7f7f7;\n+    color: #999;\n+    padding: 1em 1.5em;\n+     \n+    &.is--active {\n+        background: #fff;\n+        color: #545454;\n+        font-weight: bold\n+    }\n+}\n+```\n+\n+Another example would be do modify the behavior of the element. In the following example we can modify the size of a\n+form element using modifiers:\n+\n+```\n+\n+.textbox {\n+    font: 13px sans-serif;\n+    padding: 2px 4px;\n+  \n+    &.is--large {\n+        font-size: 18px;\n+    }\n+    &.is--small {\n+        font-size: 11px;\n+        padding: 1px 2px;\n+    }\n+}\n+```\n+\n+In the above example we defined the modifiers only for this specific object. That's why we're using `&` parent selector.\n+\n+## Global modifiers\n+As a counterpart to the element's specific modifiers we're having global modifiers which can be used in the layouting\n+process. Here are few examples:\n+\n+```\n+.is--rounded { .border-radius(); }\n+\n+.is--block { display: block !important; }\n+.is--inline { display: inline !important; }\n+.is--inline-block { display: inline-block !important; }\n+.is--hidden { display: none !important; }\n+.is--invisible { visibility: hidden !important; }\n+\n+.is--align-left { text-align: left !important; }\n+.is--align-right { text-align: right !important; }\n+.is--align-center { text-align: center !important; }\n+.is--underline { text-decoration: underline !important; }\n+.is--line-through { text-decoration: line-through !important; }\n+.is--uppercase { text-transform: uppercase !important; }\n+.is--strong { font-weight: 600 !important; }\n+.is--bold { font-weight: bold !important; }\n+.is--italic { font-style: italic; }\n+.is--nowrap { white-space: nowrap !important; }\n+\n+.is--dark { color: @text-color-dark !important; }\n+.is--light { color: darken(@gray-dark, 20%) !important; }\n+.is--soft { color: @gray-dark !important; }\n+\n+.is--fluid { width: 100% !important; }\n+```\n+\n+Global modifiers are mostly just setting one property. We're using the `!important` flag to override the property from\n+tthe original object styles.","path":"source/blog/_posts/2016-08-26-css-coding-guidelines.md","position":237,"original_position":237,"commit_id":"380b5ab780a5a53f3813bb63557a002c2ea48bd4","original_commit_id":"380b5ab780a5a53f3813bb63557a002c2ea48bd4","user":{"login":"bcremer","id":55820,"avatar_url":"https://avatars.githubusercontent.com/u/55820?v=3","gravatar_id":"","url":"https://api.github.com/users/bcremer","html_url":"https://github.com/bcremer","followers_url":"https://api.github.com/users/bcremer/followers","following_url":"https://api.github.com/users/bcremer/following{/other_user}","gists_url":"https://api.github.com/users/bcremer/gists{/gist_id}","starred_url":"https://api.github.com/users/bcremer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bcremer/subscriptions","organizations_url":"https://api.github.com/users/bcremer/orgs","repos_url":"https://api.github.com/users/bcremer/repos","events_url":"https://api.github.com/users/bcremer/events{/privacy}","received_events_url":"https://api.github.com/users/bcremer/received_events","type":"User","site_admin":false},"body":"Typo: tthe -> the","created_at":"2016-08-26T09:10:00Z","updated_at":"2016-08-26T09:10:00Z","html_url":"https://github.com/shopware/devdocs/pull/344#discussion_r76388334","pull_request_url":"https://api.github.com/repos/shopware/devdocs/pulls/344","_links":{"self":{"href":"https://api.github.com/repos/shopware/devdocs/pulls/comments/76388334"},"html":{"href":"https://github.com/shopware/devdocs/pull/344#discussion_r76388334"},"pull_request":{"href":"https://api.github.com/repos/shopware/devdocs/pulls/344"}}},"pull_request":{"url":"https://api.github.com/repos/shopware/devdocs/pulls/344","id":82854531,"html_url":"https://github.com/shopware/devdocs/pull/344","diff_url":"https://github.com/shopware/devdocs/pull/344.diff","patch_url":"https://github.com/shopware/devdocs/pull/344.patch","issue_url":"https://api.github.com/repos/shopware/devdocs/issues/344","number":344,"state":"open","locked":false,"title":"Add new blog post about our css coding guidelines","user":{"login":"klarstil","id":170133,"avatar_url":"https://avatars.githubusercontent.com/u/170133?v=3","gravatar_id":"","url":"https://api.github.com/users/klarstil","html_url":"https://github.com/klarstil","followers_url":"https://api.github.com/users/klarstil/followers","following_url":"https://api.github.com/users/klarstil/following{/other_user}","gists_url":"https://api.github.com/users/klarstil/gists{/gist_id}","starred_url":"https://api.github.com/users/klarstil/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/klarstil/subscriptions","organizations_url":"https://api.github.com/users/klarstil/orgs","repos_url":"https://api.github.com/users/klarstil/repos","events_url":"https://api.github.com/users/klarstil/events{/privacy}","received_events_url":"https://api.github.com/users/klarstil/received_events","type":"User","site_admin":false},"body":"Can someone proof-read this blog post pls?","created_at":"2016-08-26T09:04:38Z","updated_at":"2016-08-26T09:10:00Z","closed_at":null,"merged_at":null,"merge_commit_sha":"5fd19782d3c73dc107c3e24756fe622083817c49","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/shopware/devdocs/pulls/344/commits","review_comments_url":"https://api.github.com/repos/shopware/devdocs/pulls/344/comments","review_comment_url":"https://api.github.com/repos/shopware/devdocs/pulls/comments{/number}","comments_url":"https://api.github.com/repos/shopware/devdocs/issues/344/comments","statuses_url":"https://api.github.com/repos/shopware/devdocs/statuses/380b5ab780a5a53f3813bb63557a002c2ea48bd4","head":{"label":"shopware:blogpost/css-coding-guidelines","ref":"blogpost/css-coding-guidelines","sha":"380b5ab780a5a53f3813bb63557a002c2ea48bd4","user":{"login":"shopware","id":612628,"avatar_url":"https://avatars.githubusercontent.com/u/612628?v=3","gravatar_id":"","url":"https://api.github.com/users/shopware","html_url":"https://github.com/shopware","followers_url":"https://api.github.com/users/shopware/followers","following_url":"https://api.github.com/users/shopware/following{/other_user}","gists_url":"https://api.github.com/users/shopware/gists{/gist_id}","starred_url":"https://api.github.com/users/shopware/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shopware/subscriptions","organizations_url":"https://api.github.com/users/shopware/orgs","repos_url":"https://api.github.com/users/shopware/repos","events_url":"https://api.github.com/users/shopware/events{/privacy}","received_events_url":"https://api.github.com/users/shopware/received_events","type":"Organization","site_admin":false},"repo":{"id":32542624,"name":"devdocs","full_name":"shopware/devdocs","owner":{"login":"shopware","id":612628,"avatar_url":"https://avatars.githubusercontent.com/u/612628?v=3","gravatar_id":"","url":"https://api.github.com/users/shopware","html_url":"https://github.com/shopware","followers_url":"https://api.github.com/users/shopware/followers","following_url":"https://api.github.com/users/shopware/following{/other_user}","gists_url":"https://api.github.com/users/shopware/gists{/gist_id}","starred_url":"https://api.github.com/users/shopware/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shopware/subscriptions","organizations_url":"https://api.github.com/users/shopware/orgs","repos_url":"https://api.github.com/users/shopware/repos","events_url":"https://api.github.com/users/shopware/events{/privacy}","received_events_url":"https://api.github.com/users/shopware/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/shopware/devdocs","description":"Shopware Developers Website","fork":false,"url":"https://api.github.com/repos/shopware/devdocs","forks_url":"https://api.github.com/repos/shopware/devdocs/forks","keys_url":"https://api.github.com/repos/shopware/devdocs/keys{/key_id}","collaborators_url":"https://api.github.com/repos/shopware/devdocs/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/shopware/devdocs/teams","hooks_url":"https://api.github.com/repos/shopware/devdocs/hooks","issue_events_url":"https://api.github.com/repos/shopware/devdocs/issues/events{/number}","events_url":"https://api.github.com/repos/shopware/devdocs/events","assignees_url":"https://api.github.com/repos/shopware/devdocs/assignees{/user}","branches_url":"https://api.github.com/repos/shopware/devdocs/branches{/branch}","tags_url":"https://api.github.com/repos/shopware/devdocs/tags","blobs_url":"https://api.github.com/repos/shopware/devdocs/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/shopware/devdocs/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/shopware/devdocs/git/refs{/sha}","trees_url":"https://api.github.com/repos/shopware/devdocs/git/trees{/sha}","statuses_url":"https://api.github.com/repos/shopware/devdocs/statuses/{sha}","languages_url":"https://api.github.com/repos/shopware/devdocs/languages","stargazers_url":"https://api.github.com/repos/shopware/devdocs/stargazers","contributors_url":"https://api.github.com/repos/shopware/devdocs/contributors","subscribers_url":"https://api.github.com/repos/shopware/devdocs/subscribers","subscription_url":"https://api.github.com/repos/shopware/devdocs/subscription","commits_url":"https://api.github.com/repos/shopware/devdocs/commits{/sha}","git_commits_url":"https://api.github.com/repos/shopware/devdocs/git/commits{/sha}","comments_url":"https://api.github.com/repos/shopware/devdocs/comments{/number}","issue_comment_url":"https://api.github.com/repos/shopware/devdocs/issues/comments{/number}","contents_url":"https://api.github.com/repos/shopware/devdocs/contents/{+path}","compare_url":"https://api.github.com/repos/shopware/devdocs/compare/{base}...{head}","merges_url":"https://api.github.com/repos/shopware/devdocs/merges","archive_url":"https://api.github.com/repos/shopware/devdocs/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/shopware/devdocs/downloads","issues_url":"https://api.github.com/repos/shopware/devdocs/issues{/number}","pulls_url":"https://api.github.com/repos/shopware/devdocs/pulls{/number}","milestones_url":"https://api.github.com/repos/shopware/devdocs/milestones{/number}","notifications_url":"https://api.github.com/repos/shopware/devdocs/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/shopware/devdocs/labels{/name}","releases_url":"https://api.github.com/repos/shopware/devdocs/releases{/id}","deployments_url":"https://api.github.com/repos/shopware/devdocs/deployments","created_at":"2015-03-19T19:44:25Z","updated_at":"2016-08-11T12:38:51Z","pushed_at":"2016-08-26T09:04:39Z","git_url":"git://github.com/shopware/devdocs.git","ssh_url":"git@github.com:shopware/devdocs.git","clone_url":"https://github.com/shopware/devdocs.git","svn_url":"https://github.com/shopware/devdocs","homepage":"https://developers.shopware.com","size":72833,"stargazers_count":35,"watchers_count":35,"language":"PHP","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":72,"mirror_url":null,"open_issues_count":13,"forks":72,"open_issues":13,"watchers":35,"default_branch":"master"}},"base":{"label":"shopware:master","ref":"master","sha":"976d537535d2276fa6123b9d8b70083c2ff5bb03","user":{"login":"shopware","id":612628,"avatar_url":"https://avatars.githubusercontent.com/u/612628?v=3","gravatar_id":"","url":"https://api.github.com/users/shopware","html_url":"https://github.com/shopware","followers_url":"https://api.github.com/users/shopware/followers","following_url":"https://api.github.com/users/shopware/following{/other_user}","gists_url":"https://api.github.com/users/shopware/gists{/gist_id}","starred_url":"https://api.github.com/users/shopware/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shopware/subscriptions","organizations_url":"https://api.github.com/users/shopware/orgs","repos_url":"https://api.github.com/users/shopware/repos","events_url":"https://api.github.com/users/shopware/events{/privacy}","received_events_url":"https://api.github.com/users/shopware/received_events","type":"Organization","site_admin":false},"repo":{"id":32542624,"name":"devdocs","full_name":"shopware/devdocs","owner":{"login":"shopware","id":612628,"avatar_url":"https://avatars.githubusercontent.com/u/612628?v=3","gravatar_id":"","url":"https://api.github.com/users/shopware","html_url":"https://github.com/shopware","followers_url":"https://api.github.com/users/shopware/followers","following_url":"https://api.github.com/users/shopware/following{/other_user}","gists_url":"https://api.github.com/users/shopware/gists{/gist_id}","starred_url":"https://api.github.com/users/shopware/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shopware/subscriptions","organizations_url":"https://api.github.com/users/shopware/orgs","repos_url":"https://api.github.com/users/shopware/repos","events_url":"https://api.github.com/users/shopware/events{/privacy}","received_events_url":"https://api.github.com/users/shopware/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/shopware/devdocs","description":"Shopware Developers Website","fork":false,"url":"https://api.github.com/repos/shopware/devdocs","forks_url":"https://api.github.com/repos/shopware/devdocs/forks","keys_url":"https://api.github.com/repos/shopware/devdocs/keys{/key_id}","collaborators_url":"https://api.github.com/repos/shopware/devdocs/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/shopware/devdocs/teams","hooks_url":"https://api.github.com/repos/shopware/devdocs/hooks","issue_events_url":"https://api.github.com/repos/shopware/devdocs/issues/events{/number}","events_url":"https://api.github.com/repos/shopware/devdocs/events","assignees_url":"https://api.github.com/repos/shopware/devdocs/assignees{/user}","branches_url":"https://api.github.com/repos/shopware/devdocs/branches{/branch}","tags_url":"https://api.github.com/repos/shopware/devdocs/tags","blobs_url":"https://api.github.com/repos/shopware/devdocs/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/shopware/devdocs/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/shopware/devdocs/git/refs{/sha}","trees_url":"https://api.github.com/repos/shopware/devdocs/git/trees{/sha}","statuses_url":"https://api.github.com/repos/shopware/devdocs/statuses/{sha}","languages_url":"https://api.github.com/repos/shopware/devdocs/languages","stargazers_url":"https://api.github.com/repos/shopware/devdocs/stargazers","contributors_url":"https://api.github.com/repos/shopware/devdocs/contributors","subscribers_url":"https://api.github.com/repos/shopware/devdocs/subscribers","subscription_url":"https://api.github.com/repos/shopware/devdocs/subscription","commits_url":"https://api.github.com/repos/shopware/devdocs/commits{/sha}","git_commits_url":"https://api.github.com/repos/shopware/devdocs/git/commits{/sha}","comments_url":"https://api.github.com/repos/shopware/devdocs/comments{/number}","issue_comment_url":"https://api.github.com/repos/shopware/devdocs/issues/comments{/number}","contents_url":"https://api.github.com/repos/shopware/devdocs/contents/{+path}","compare_url":"https://api.github.com/repos/shopware/devdocs/compare/{base}...{head}","merges_url":"https://api.github.com/repos/shopware/devdocs/merges","archive_url":"https://api.github.com/repos/shopware/devdocs/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/shopware/devdocs/downloads","issues_url":"https://api.github.com/repos/shopware/devdocs/issues{/number}","pulls_url":"https://api.github.com/repos/shopware/devdocs/pulls{/number}","milestones_url":"https://api.github.com/repos/shopware/devdocs/milestones{/number}","notifications_url":"https://api.github.com/repos/shopware/devdocs/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/shopware/devdocs/labels{/name}","releases_url":"https://api.github.com/repos/shopware/devdocs/releases{/id}","deployments_url":"https://api.github.com/repos/shopware/devdocs/deployments","created_at":"2015-03-19T19:44:25Z","updated_at":"2016-08-11T12:38:51Z","pushed_at":"2016-08-26T09:04:39Z","git_url":"git://github.com/shopware/devdocs.git","ssh_url":"git@github.com:shopware/devdocs.git","clone_url":"https://github.com/shopware/devdocs.git","svn_url":"https://github.com/shopware/devdocs","homepage":"https://developers.shopware.com","size":72833,"stargazers_count":35,"watchers_count":35,"language":"PHP","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":72,"mirror_url":null,"open_issues_count":13,"forks":72,"open_issues":13,"watchers":35,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/shopware/devdocs/pulls/344"},"html":{"href":"https://github.com/shopware/devdocs/pull/344"},"issue":{"href":"https://api.github.com/repos/shopware/devdocs/issues/344"},"comments":{"href":"https://api.github.com/repos/shopware/devdocs/issues/344/comments"},"review_comments":{"href":"https://api.github.com/repos/shopware/devdocs/pulls/344/comments"},"review_comment":{"href":"https://api.github.com/repos/shopware/devdocs/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/shopware/devdocs/pulls/344/commits"},"statuses":{"href":"https://api.github.com/repos/shopware/devdocs/statuses/380b5ab780a5a53f3813bb63557a002c2ea48bd4"}}}}
{"actor":{"display_login":"bcremer"}}