Front end developer specialising in JavaScript and React. Experienced in all aspects of modern front end development. Passionate about making accessible, secure and performant software.
Since the question isn't about inherit specifically, I would say it's because because there is a ton to know in CSS in general. Different display modes and how they affect things, different weird things like block formatting contexts, positioning contexts, flexbox, grid, transforms, and much more, tons of inconsistencies and things not working as you would expect (height: 100% several levels down, no percentage on borders, weird behaviour on nested elements with underlines, transform percentages, etc.)...
In addition, many developers don't follow any programming principles when writing HTML and CSS. I.e. they don't use BEM. When you see a long selector, you know things could become very problematic in the future.
For inherit specifically, I would be quite wary to use it for things other than base styles. I would personally prefer to use a variable instead. The reason is because it's easy to forget that some declaration 50 lines down is using inherit. Then 6 months later you may refactor and remove the parent element, messing up the child element (since it inherited from the particular parent element). The problem would be worse if the "inherit" is several elements or components deep.
Some good points there. In the case of "font-family:inherit" on a button element though, I think it makes sense to use rather than a variable, because what you're really saying is you want the button to be the same font as its surrounding text, whatever that is. So if refactoring and removing the parent changes the surrounding text's font, then you'd want the button to adapt automatically to that, which is what inherit would do.
I'm also not personally a fan of BEM, which is a massively verbose way to write markup. You don't have to use long selectors without it. It's very rare that well written complex selectors need more than three compound terms. And even with BEM, you still can't avoid complex selectors completely.
Front end developer specialising in JavaScript and React. Experienced in all aspects of modern front end development. Passionate about making accessible, secure and performant software.
Fair enough about the button. In the end we can do anything we want. We just need to be careful that it's not unexpected and causes bugs and difficulty in the future. So absolutely, using font-family: inherit; could be acceptable, as long as the team is happy with the pros and cons.
Fair enough about BEM too. I use BEM personally but what I really mean is having a reasonable architecture where CSS specificity doesn't eventually become unmaintainable. If you can reasonably achieve that without BEM then you've achieved the main goal of BEM anyway (in my opinion) :).
The reason why I personally prefer BEM is because it absolutely minimises specificity even when you need complex selectors. I know from personal experience that having to work with a specificity of 10 is much nicer than having to override a specificity of 20, even for small things.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Since the question isn't about
inheritspecifically, I would say it's because because there is a ton to know in CSS in general. Different display modes and how they affect things, different weird things like block formatting contexts, positioning contexts, flexbox, grid, transforms, and much more, tons of inconsistencies and things not working as you would expect (height: 100%several levels down, no percentage on borders, weird behaviour on nested elements with underlines, transform percentages, etc.)...In addition, many developers don't follow any programming principles when writing HTML and CSS. I.e. they don't use BEM. When you see a long selector, you know things could become very problematic in the future.
For
inheritspecifically, I would be quite wary to use it for things other than base styles. I would personally prefer to use a variable instead. The reason is because it's easy to forget that some declaration 50 lines down is usinginherit. Then 6 months later you may refactor and remove the parent element, messing up the child element (since it inherited from the particular parent element). The problem would be worse if the "inherit" is several elements or components deep.Some good points there. In the case of "font-family:inherit" on a button element though, I think it makes sense to use rather than a variable, because what you're really saying is you want the button to be the same font as its surrounding text, whatever that is. So if refactoring and removing the parent changes the surrounding text's font, then you'd want the button to adapt automatically to that, which is what inherit would do.
I'm also not personally a fan of BEM, which is a massively verbose way to write markup. You don't have to use long selectors without it. It's very rare that well written complex selectors need more than three compound terms. And even with BEM, you still can't avoid complex selectors completely.
Thanks for your reply.
Fair enough about the button. In the end we can do anything we want. We just need to be careful that it's not unexpected and causes bugs and difficulty in the future. So absolutely, using
font-family: inherit;could be acceptable, as long as the team is happy with the pros and cons.Fair enough about BEM too. I use BEM personally but what I really mean is having a reasonable architecture where CSS specificity doesn't eventually become unmaintainable. If you can reasonably achieve that without BEM then you've achieved the main goal of BEM anyway (in my opinion) :).
The reason why I personally prefer BEM is because it absolutely minimises specificity even when you need complex selectors. I know from personal experience that having to work with a specificity of 10 is much nicer than having to override a specificity of 20, even for small things.