Nuke inline style using CSS specificity

Summary: When dealing with CSS, understanding CSS specificity is essential. Specificity decides which CSS styles, and in what order, will be applied to an HTML element. There are ways to nuke even inline styles.

CSS specificity

We will go through the various sorts of CSS selectors, the CSS specificity rules, and how to apply them to make CSS that is both efficient and easy to maintain in this blog post.

Elements, classes, and ID selectors are the three types of selectors available in CSS. HTML elements are directly targeted by element selectors, while elements having a certain class attribute or ID attribute are targeted by class selectors and ID selectors. The specificity weight for each type of selector varies, with ID selectors having the highest weight, then class selectors, then element selectors.

Specificity Hierarchy

The sequence in which CSS styles are applied to an HTML element is determined by the rule of specificity. The general rule is that a selector’s priority increases with its level of specificity. For instance, an element selection will take precedence over an ID selector, and a class selector will take precedence over an ID selector. The selection that comes last in the CSS rules will take precedence when two selectors with the same specificity are present.

Using CSS Specificity

When using CSS, it’s crucial to employ specificity in a planned and meaningful manner. One approach to achieve this is by structuring your CSS classes in accordance with a naming convention. Always keep it simple and don’t get lazy. Writing structured code css files makes it simpler to manage your CSS code and comprehend the particulars of your selectors.

Override Inline Styles

Using !important

Using the qualifier !important sparingly is another method to employ specificity. While occasionally useful, using !important too frequently might lead to specificity problems and make it more difficult to maintain your CSS code.

Using div[style] + !important

Here’s how to target inline css. This example when css is inline within a div and there isn’t any other way to target it.

<div style="font-size: 10px; color: blue;">
    The inline styles can be over ridden with CSS!
</div>

div[style] {
   font-size: 12px !important;
   color: black !important;
}

The above example can be swapped for issues with font weight or whatever css property values you need to target.

Keep your CSS specificity hierarchy Structured, but…

When dealing with CSS, it’s critical to understand how CSS specificity works. You can do so much with CSS. Keep your code efficient and maintainable by using selectors, the specificity rules, and how to employ them in structured ways. Be thoughtful and orderly when utilizing specificity, and refrain from using the asterisk (!) too frequently. But, know if you need to you could override inline styles very easily.

• CSS Specificity by MDN 🔗
• Override Inline Styles http://css-tricks.com/override-inline-styles-with-css/
• Attribute Selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Simon Urbina

Simon is a Product Designer and Front End Dev with over 20 years of experience. He started as a graphic designer and illustrator coding his first website in 1996. He has worked with brands like Publix, Microsoft, and Discovery Channel.

Twitter