{"action":"created","issue":{"url":"https://api.github.com/repos/adamsilver/maintainablecss.com/issues/45","repository_url":"https://api.github.com/repos/adamsilver/maintainablecss.com","labels_url":"https://api.github.com/repos/adamsilver/maintainablecss.com/issues/45/labels{/name}","comments_url":"https://api.github.com/repos/adamsilver/maintainablecss.com/issues/45/comments","events_url":"https://api.github.com/repos/adamsilver/maintainablecss.com/issues/45/events","html_url":"https://github.com/adamsilver/maintainablecss.com/issues/45","id":156123832,"number":45,"title":"Inheritance/basic styling of elements","user":{"login":"kroofy","id":594971,"avatar_url":"https://avatars.githubusercontent.com/u/594971?v=3","gravatar_id":"","url":"https://api.github.com/users/kroofy","html_url":"https://github.com/kroofy","followers_url":"https://api.github.com/users/kroofy/followers","following_url":"https://api.github.com/users/kroofy/following{/other_user}","gists_url":"https://api.github.com/users/kroofy/gists{/gist_id}","starred_url":"https://api.github.com/users/kroofy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kroofy/subscriptions","organizations_url":"https://api.github.com/users/kroofy/orgs","repos_url":"https://api.github.com/users/kroofy/repos","events_url":"https://api.github.com/users/kroofy/events{/privacy}","received_events_url":"https://api.github.com/users/kroofy/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-05-21T22:06:19Z","updated_at":"2016-05-24T07:12:39Z","closed_at":"2016-05-23T17:55:56Z","body":"As I read through the content I became curious of what your thoughts are on inheritance. I was mainly thinking of elements like h1, p, ul and li etc.\r\n\r\nWhat do you think about covering this specifically in a future chapter?\r\n\r\nFor example, would you make a class called .h1 and make your styles there, or would you rather have it defined to the h1 element and let your modules/component inherit from that?\r\n\r\nIt could even be taken so far and you opt for styling body.myBody instead of body directly for setting your font-family and background etc.\r\n\r\nWhat I am aiming at is, what is the best approach to have the general styles of you CSS maintainable?\r\n\r\nNot sure if it makes sense or if you think it would make an interesting read, maybe it is more FAQ related. Nevertheless I'm interested to hear your thoughts."},"comment":{"url":"https://api.github.com/repos/adamsilver/maintainablecss.com/issues/comments/221185184","html_url":"https://github.com/adamsilver/maintainablecss.com/issues/45#issuecomment-221185184","issue_url":"https://api.github.com/repos/adamsilver/maintainablecss.com/issues/45","id":221185184,"user":{"login":"kroofy","id":594971,"avatar_url":"https://avatars.githubusercontent.com/u/594971?v=3","gravatar_id":"","url":"https://api.github.com/users/kroofy","html_url":"https://github.com/kroofy","followers_url":"https://api.github.com/users/kroofy/followers","following_url":"https://api.github.com/users/kroofy/following{/other_user}","gists_url":"https://api.github.com/users/kroofy/gists{/gist_id}","starred_url":"https://api.github.com/users/kroofy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kroofy/subscriptions","organizations_url":"https://api.github.com/users/kroofy/orgs","repos_url":"https://api.github.com/users/kroofy/repos","events_url":"https://api.github.com/users/kroofy/events{/privacy}","received_events_url":"https://api.github.com/users/kroofy/received_events","type":"User","site_admin":false},"created_at":"2016-05-24T07:12:39Z","updated_at":"2016-05-24T07:12:39Z","body":"Thanks for your reply.\r\n\r\nAfter thinking about it some more I think a chapter talking more specifically on layering the specificity, to aid sane inheritance, what properties are good, why etc.\r\n\r\nJust to cover some basic thoughts, even though you covered it briefly in your reply. Let's say:\r\n\r\nHow would a basic example of site with modules and components look like, possibly, like this?\r\n\r\n#### Option A\r\n\r\n```css\r\nh1 {\r\n  font-family: georgia, serif;\r\n  text-rendering: optimizeLegibility;\r\n  font-size: 3em;\r\n}\r\n\r\n.card {\r\n  background-color: #eee;\r\n}\r\n\r\n/*\r\nInherits the `h1`s `font-size`\r\n<h1 class=\"card-title\">My title</h1>\r\n*/\r\n.card-title {\r\n  color: #ccc;\r\n}\r\n\r\n/*\r\n<div class=\"hero\"></div>\r\n*/\r\n.hero {\r\n  border: 1px solid #bbb;\r\n}\r\n\r\n/*\r\nOverwrites the `h1`s `font-size`\r\n<div class=\"hero\"><h1 class=\"hero-title\">My hero title</h1></div>\r\n*/\r\n.hero-title {\r\n  font-size: 4em;\r\n}\r\n```\r\n\r\n#### Option B\r\nOr more like this?\r\n```css\r\nh1 {\r\n  font-family: georgia, serif;\r\n  text-rendering: optimizeLegibility;\r\n}\r\n\r\n.card {\r\n  background-color: #eee;\r\n}\r\n\r\n/*\r\nNo inheritance of the `h1`s `font-size`\r\n<h1 class=\"card-title\">My title</h1>\r\n*/\r\n.card-title {\r\n  font-size: 3em;\r\n  color: #ccc;\r\n}\r\n\r\n/*\r\n<div class=\"hero\"></div>\r\n*/\r\n.hero {\r\n  border: 1px solid #bbb;\r\n}\r\n\r\n/*\r\nNo need to overwrite the `h1`s `font-size`, but we still need to define it in the component\r\n<div class=\"hero\"><h1 class=\"hero-title\">My hero title</h1></div>\r\n*/\r\n.hero-title {\r\n  font-size: 4em;\r\n}\r\n```\r\n\r\nIf I understand you correctly, you would prefer option B. Some example like this would be helpful, at least for me, if there was a chapter/paragraph covering these aspects. Hopefully it could be helpful if you'd ever find it interesting to cover it in the future.\r\n\r\nRelated to styling headers, I remember reading, http://csswizardry.com/2016/02/managing-typography-on-large-apps/, where the suggestion boils down to setting all h[1-6] to the same size, and then style them individually on modular/component level."}}
{"actor":{"display_login":"kroofy"}}