Intro to CSS Order & Precedence

CSS order and precedence is a challenging part of styling webpages.You may someday find that the CSS styles you’re trying to apply are not working. And it may seem as if the webpage is ignoring your code. This could be caused by conflicts in the order or precedence of your CSS. This article will explore what order and precedence are and how they affect styling web pages.

Specificity

Browsers decide which CSS property values will be relevant to an element. This rule is based on how CSS selectors compose different sorts of rules. Specificity is the exact name and it gives weight to a specific CSS declaration. The weight or “importance” of each declaration is determined by a number of selector types equal to a matching selector.

Specificity will only apply when one element has multiple declarations to it, the targeted element will take precedence based on the inherent value of the the selectors. Here is a list to gauge the difference in selector value:

• Type Selectors: This would be pseudo-elements or things like h1, h1, etc.
• Class Selectors: These include attributes selectors and pseudo-classes like :hover, etc.
• ID Selectors: Any type of ID selector.

Universal selectors do not have any effect on specificity and some of these include combinators like ( +, -, > ,~,). We mentioned earlier that inline styles such as bolding will always override styles from external stylesheets and is at the top of the chain with the highest specificity.

A few rules should be noted before continuing. Inline css, the style attributes to html is first and foremost the overriding rule for styles and in the css file. A specific selector will also take precedence over a less specified one. Code later on in the document will override any previous roles set earlier.

##!important exception

The exception to all of these specificity rules is when you invoke the !important method. When this is called upon it will override all other declarations. Although this works, it is generally bad practice. It breaks the natural cascading in your sheets and can make debugging a difficult process. The best practices to avoid using this are simple. For one, you’ll want to look at the rules of specificity to see what will take precedence before another style element. If you must use !important, use it wisely by applying it only to a single page.

Cascade Importance

Instead of using the !important method, you can make better use of the Cascade. For anyone that isn’t familiar with the fundamental aspect of CSS or Cascading Style Sheets, the cascade is the algorithm behind how to combine different properties’ values together.

Cascading works by first finding all CSS declaration that are being applied to an element or property. It starts from its origin (where it is declared,) and is followed by the importance of the declaration. Following that it will calculate specificity. Any CSS embedded in an HTML file will follow external stylesheets, regardless of order. It is important to realize the steps that the cascade will take.

Overall, the takeaway is to look for specificity issues if there are conflicts between competing style elements. If an element is behaving in a way that you didn’t code it do so, it is inheriting style from something that takes higher precedence. Begin your style designs with the least specificity to ensure that this problem won’t occur.