Leveraging CSS inheritance rules and styling element selectors will only get you so far. I like to view this as setting up the core foundation of the styling in a project to give yourself a good base to begin styling components and building out more complex parts of your website.
#Not inherit font color code
When leveraged correctly, it can save you hundreds of lines of code in the long run. However, despite its well-understood nature, I believe the inheritance rule is often being underutilised. Inheritance in CSS allows us to define styles at a high level so that these styles can be trickled downstream and style descendant elements. Understanding inheritance in CSS might help. Technique 1: Leverage inheritance in CSSĭo you ever find yourself in CSS repeating a declaration, even though you know that you’ve used that declaration before?.Let’s dive into some actionable CSS techniques to help you write more modular & flexible code: How did things get so big?”ĬSS files can get out of control, pretty quickly.
css files and in total, they’re over 10,000 lines of code. But never use !important as a coding practice.How To Stop Writing Messy & Unscalable CSS !important can be used in browser inspector to quickly check the impact of your rule. Using specificity second, and !important Never. But the best practice is to consider using cascading rule first. One can use any of the mentioned techniques to override CSS. Never use !important on site-wide global CSS.Never use !important when you're writing a framework or CSS blueprint.Use specificity instead of using !important.There are tons of ways one element can be precisely selected and styled. Where instead only a higher specificity rule was enough to solve the problem. Html,body and we could end up creating multiple rules using !important to override CSS color property and it could disrupt the natural flow of CSS. Here is an example showcasing the inheritance between parent-child relations. You check my other article to get a detailed understanding of how CSS inheritance works. There is also Unset property works as inherited. We can override css or change it if we want to, by using an initial property. Most of the time, we don’t specify the inherited word because it's the default. There is a simple way to inherit any property. CSS Inheritance:īefore we talk about overriding let’s get a bit of understanding of how CSS inheritance works.įor any element, If apply set of rules to style, the Same set of rules will be applied for all of their child elements. There are many other ways you can inherit or override CSS properties. So use !important as your absolute last resort. It could create more site-wide problems if used in global CSS. But using !important is the absolutely wrong way to do anything. Most commonly developers use !important to override any kind of CSS property to save them time. So you may need to understand overriding techniques to be able to do it. There are times when we struggle to apply a specific style to a specific element, but they simply don’t work mainly because the element inherits CSS properties that have higher precedence than the code you’re writing.