{"action":"created","issue":{"url":"https://api.github.com/repos/StarcounterSamples/Products/issues/11","repository_url":"https://api.github.com/repos/StarcounterSamples/Products","labels_url":"https://api.github.com/repos/StarcounterSamples/Products/issues/11/labels{/name}","comments_url":"https://api.github.com/repos/StarcounterSamples/Products/issues/11/comments","events_url":"https://api.github.com/repos/StarcounterSamples/Products/issues/11/events","html_url":"https://github.com/StarcounterSamples/Products/issues/11","id":145972485,"number":11,"title":"Apply BEM to Products's private CSS","user":{"login":"warpech","id":566463,"avatar_url":"https://avatars.githubusercontent.com/u/566463?v=3","gravatar_id":"","url":"https://api.github.com/users/warpech","html_url":"https://github.com/warpech","followers_url":"https://api.github.com/users/warpech/followers","following_url":"https://api.github.com/users/warpech/following{/other_user}","gists_url":"https://api.github.com/users/warpech/gists{/gist_id}","starred_url":"https://api.github.com/users/warpech/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/warpech/subscriptions","organizations_url":"https://api.github.com/users/warpech/orgs","repos_url":"https://api.github.com/users/warpech/repos","events_url":"https://api.github.com/users/warpech/events{/privacy}","received_events_url":"https://api.github.com/users/warpech/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"ubbeK","id":8124023,"avatar_url":"https://avatars.githubusercontent.com/u/8124023?v=3","gravatar_id":"","url":"https://api.github.com/users/ubbeK","html_url":"https://github.com/ubbeK","followers_url":"https://api.github.com/users/ubbeK/followers","following_url":"https://api.github.com/users/ubbeK/following{/other_user}","gists_url":"https://api.github.com/users/ubbeK/gists{/gist_id}","starred_url":"https://api.github.com/users/ubbeK/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ubbeK/subscriptions","organizations_url":"https://api.github.com/users/ubbeK/orgs","repos_url":"https://api.github.com/users/ubbeK/repos","events_url":"https://api.github.com/users/ubbeK/events{/privacy}","received_events_url":"https://api.github.com/users/ubbeK/received_events","type":"User","site_admin":false},"milestone":null,"comments":12,"created_at":"2016-04-05T12:25:30Z","updated_at":"2016-04-07T16:05:40Z","closed_at":null,"body":"Continuing our effort to implement https://github.com/Starcounter/Starcounter/issues/3450 in our sample apps, we should make changes to the Products app to follow the BEM CSS pattern.\r\n\r\nI have yet not written the blog post about it (it is on me - https://github.com/Starcounter/starcounter.io/issues/143), but here are some principles to follow:\r\n\r\n1. Only apply BEM to CSS styles defined in private CSS of the app. So apply it here: `wwwroot/Products`, but not here: `wwwroot/sys`\r\n2. The only valid BEM selectors are class selectors. Get rid of all the id and element selectors.\r\n3. It is ok for apps to be using Bootstrap selectors (which are found here: https://github.com/Starcounter/Starcounter/blob/develop/src/BuildSystem/ClientFiles/StaticFiles/sys/bootswatch/paper/bootstrap.css). It is not OK for an app (such as Products) to modify these classes. If you want to modify an element that uses a Bootstrap class, add another BEM-style class to it and modify that one.\r\n\r\nSome practical information might also be found in the review of applying BEM to KitchenSink, which I did here: https://github.com/StarcounterSamples/KitchenSink/issues/19"},"comment":{"url":"https://api.github.com/repos/StarcounterSamples/Products/issues/comments/206971343","html_url":"https://github.com/StarcounterSamples/Products/issues/11#issuecomment-206971343","issue_url":"https://api.github.com/repos/StarcounterSamples/Products/issues/11","id":206971343,"user":{"login":"warpech","id":566463,"avatar_url":"https://avatars.githubusercontent.com/u/566463?v=3","gravatar_id":"","url":"https://api.github.com/users/warpech","html_url":"https://github.com/warpech","followers_url":"https://api.github.com/users/warpech/followers","following_url":"https://api.github.com/users/warpech/following{/other_user}","gists_url":"https://api.github.com/users/warpech/gists{/gist_id}","starred_url":"https://api.github.com/users/warpech/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/warpech/subscriptions","organizations_url":"https://api.github.com/users/warpech/orgs","repos_url":"https://api.github.com/users/warpech/repos","events_url":"https://api.github.com/users/warpech/events{/privacy}","received_events_url":"https://api.github.com/users/warpech/received_events","type":"User","site_admin":false},"created_at":"2016-04-07T16:05:40Z","updated_at":"2016-04-07T16:05:40Z","body":"@tomalec I have moved the discussion about this partial to #12.\r\n\r\n@ubbeK You changed not the class that I requested. I proposed to change `.products-form__heading-label` to `.products-box-heading-label`. You changed `.products-top-menu__list-item` to `products-box-heading-label`."}}