Inheritance/basic styling of elements
Closed this issue · 7 comments
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.
What do you think about covering this specifically in a future chapter?
For 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?
It 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.
What I am aiming at is, what is the best approach to have the general styles of you CSS maintainable?
Not 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.
@kroofy that's an interesting question and something I may well cover off.
Generally speaking I wouldn't do any of those things.
h1, p, ul etc
That's because I don't want to have to override them in other modules
.h1, .p
That's the same as the previous example except for that fact things are targeted by class name rather than by tag and I see that as having no value (again generally speaking)
.myBody
Similar to previous point, I wouldn't do this (at least not for basic setup). Generally speaking you do use the same fonts throughout the site, so you might specify some defaults such as:
font-family: georgia, serif;
text-rendering: optimizeLegibility;
I hope this helps, at least for now :)
Thanks for your reply.
After 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.
Just to cover some basic thoughts, even though you covered it briefly in your reply. Let's say:
How would a basic example of site with modules and components look like, possibly, like this?
Option A
h1 {
font-family: georgia, serif;
text-rendering: optimizeLegibility;
font-size: 3em;
}
.card {
background-color: #eee;
}
/*
Inherits the `h1`s `font-size`
<h1 class="card-title">My title</h1>
*/
.card-title {
color: #ccc;
}
/*
<div class="hero"></div>
*/
.hero {
border: 1px solid #bbb;
}
/*
Overwrites the `h1`s `font-size`
<div class="hero"><h1 class="hero-title">My hero title</h1></div>
*/
.hero-title {
font-size: 4em;
}Option B
Or more like this?
h1 {
font-family: georgia, serif;
text-rendering: optimizeLegibility;
}
.card {
background-color: #eee;
}
/*
No inheritance of the `h1`s `font-size`
<h1 class="card-title">My title</h1>
*/
.card-title {
font-size: 3em;
color: #ccc;
}
/*
<div class="hero"></div>
*/
.hero {
border: 1px solid #bbb;
}
/*
No need to overwrite the `h1`s `font-size`, but we still need to define it in the component
<div class="hero"><h1 class="hero-title">My hero title</h1></div>
*/
.hero-title {
font-size: 4em;
}If 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.
Related 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.
Option B exactly!!! And yes I would look to cover this off. I will just take your example here :) Thanks
+1 for adding an example. I got confused with this recently whilst trying to implement MaintainableCSS.
Great, thank you!
Thank you! :)
On 24 May 2016 5:45 p.m., "Rikard Ekberg" notifications@github.com wrote:
Great, thank you!
—
You are receiving this because you modified the open/close state.
Reply to this email directly or view it on GitHub
https://github.com/adamsilver/maintainablecss.com/issues/45#issuecomment-221332544