Mastering Cascading Style Sheet - Structuring Your Code - Cascade and Specificity

feature-top

The power of the online world, is very influential in our world today, and many of us, let the cyber world, to influence, our world; because many of the events, which are occurring on the earth, are definitely happening on the Internet first and then they come into fruition in real life.

The events, I speak of, do have to become viral online, but once these events, gain enough traction, we see them manifested, somewhere on the planet.

In today’s article, we are going to continue our conversation on CSS3, in specifically the cascade and specificity of cascade style sheets.

It is likely that two or more rules, will target the same element, even with a moderately complicated stylesheet.

The cascade, is a process which is used, to handle issues and conflicts, which wouldn’t allow two or more rules, which would target the same element.

Each rule is assigned an importance, with the cascade process.

The least important rule in CSS is the default style sheet, which is used, by your browser or user agent.

The second most important, behind the most important rule is the user style sheet rules, and the most important considered rule is the author stylesheet set of rules.

A rule specified as !important, give users more control over rules, and over-ride them, even a rules flagged as !important by the author.

The following order of importance, is used with the cascade process, User styles flagged as !important, Author styles flagged as !important, Author styles, User styles and finally Styles applied by the browser/user agent.

The specificity of the selector is used, in order to order Rules; also Rules with more specific selectors, override those, with less specific ones.

The last rule defined, takes precedence, when two rules, are equally specific.

Alright now let’s talk a bit about specificity, in order to calculate how specific a rule is, a numeric value, is assigned to each type of a selector.

When the value of each of the selectors, are added up, then the specificity of a rule, is then calculated.

In order to ensure, that a highly specific selector, such as an ID is not overridden, by lots of less specific selectors, such as type selectors, specificity is not calculated in base 10 but a high unspecified base number.

Designers can calculate specificity in base 10 for simplicity’s sake, if they have fewer than 10 selectors in a specific selector.

Four constituent levels, such as a, b, c, and d are used to break down the specificity of a selector.

When the style is an inline style, than a = 1; b = the total number of ID selectors, c = the number of class, pseudo-class, and attribute selectors; and d = the number of type selectors and pseudo-element selectors.

The specificity of any selector can be calculated using these rules.

A rule written in a style attribute will essentially, be more specific than any other rule.

A rule without an ID will be less specific than, a rule, which has an ID; and a rule with a class selector will be more specific than a rule, with just type selector.

If two rules have the same specificity finally then the last one prevails.

Thank you for reading this article!!!

feature-top
feature-top

Add a Comment

Hernando Cadet

Hi every one, I obtained a bachelor's degree in Bioinformatics back in 2006, from Claflin University, after I received my bachelor's degree, I gained full time employment as a software engineer at a Video Relay Service company, maintaining databases and developing software for a new developed device called the VPAD.

I worked at that company for two years, then I became a web developer, and worked for a magazine for three years. After that job, I worked as a Drupal web developer, as a subcontractor for the NIH, for a year and then left the job to go back to school.

Hernando Cadet

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.