I have always wondered where CSS specificity comes in but after today’s lesson, it came to my understanding on how the conflicting information is resolved as it is not possible to reliably style any kind of HTML document.
Many developers new to web design like a learner myself are often confused by this issue. As I would do to compile a style sheet with set font and colour information and then apply it to the document, only to find that it looks nothing like what I intended. This is usually due to the conflicting style information from the site's existing styles as I explained above. One would wonder how this happens?
Well I learned that when a document has a style sheet, the information in it can be conflicting. If the style information on a certain element conflicts with a style on a document-wide level, how do you know which style will be used?...this is where the CSS (Cascading Style Sheets) comes in as it is a language used for describing the look and formatting of a document created in HTML. This includes defining the colours, font types and sizes, positioning, borders, and so forth. Although HTML is concerned with defining the structure of a document, CSS is the means by which you can create the look.
What is CSS specificity?
One of the things I have also picked up in today’s lesson was the importance of the advantage of using CSS in the separation of content from presentation. In other words, I understand that it helps separate the structure of a document from the styling of the document. Now, when an HTML document is provided, the browser translates the content of the document to the structure by using the mark-up, and then it tries to represent that structure to what everyone can see visually. The advantage of separating content from style starts being lost when an HTML element can be styled in multiple ways and the styling can contradict itself. This is where CSS specificity comes in as it provides a solution for this problem.
CSS specificity is the set of rules that decide the level of importance of a specific style to be applied to an element. Specificity is also said to be calculated on the matching of a selector against the content of an HTML element. As quite confused as I was before the lesson had started I further learned that specificity is not based on the declaration of styles in a style sheet (like for instance internal or external), but it is based on the selectors and declaration of styles. In other words, CSS specificity helps in deciding which rule to apply for a certain element.
For example, a rule that contains a single ID selector is more specific than one with 1000 element selectors. Consider the following list from most specific to least:
What color will the text be? Having decided that the text should be green, testing in the different mainstream browsers will yield different results. This is because the p element in the second rule has more specificity than the #page which just has one ID attribute. Specificity is a weight that is applied to a given rule, determined by the number of each type of selector. A CSS rule is considered more specific the more information it has defining it.
Why is CSS specificity important?
I mean one of the things I have never learned ever since I started my journey in web development was the importance of specificity. Well CSS specificity can help prevent this 'style leakage' (eww), by ensuring that the more specific a selector is, the more precedence it will have over another less specific selector. This is why it is important to keep your styles in a document as organised as possible. By being more selective with the selectors you choose (pardon my pun) you can write less lines of CSS and achieve style results that are expected and easier to maintain.
So why is it important? Doesn't it just overcomplicate things, and cause frustration when your styles aren't behaving as expected? Well, in answer to the latter, to me, it certainly causes frustration, but the reason it's important is because it helps keep the styles in your stylesheet as organised and clean as possible, whilst minimizing the amount of overriding that occurs in your styles. When first writing a stylesheet, it's easy to just slap some styles in for a particular class(.) or ID(#) at the end of the sheet, just to make sure its styled as you'd like. However, when writing styles further for the same element, let's say for another ID that the element may have, or for a special case of the element using a class, these initial styles can get overridden or 'leaked' onto other elements that you didn't initially want them to.
Imagine you're working on your site's CSS and you've finally corrected that bug that's been driving you crazy for weeks. You refresh your site and... the bug's still there! After a few minutes muttering to yourself, you realise that the bug doesn't lie with the CSS you just edited, but with some other CSS elsewhere in the code. Maybe further down the page, or perhaps the style is being overridden by the style of an external PDF, or heaven forbid, an !important declaration! If you've experienced this, which I can attest that I have experienced that plenty of times then you know that you've experienced the pain of CSS specificity.
How does CSS specificity work?
How we were taught in today’s lesson was to work from right to left in the selector and create a 3-digit number by adding:
**- 100 if the statement is in the form of #id
- 10 if the statement is in the form of an element (e.g. div, h1, a, etc.)
- 1 if the statement is in the form of .class ... unfortunately no other possibilities exist for CSS specificity.**
So what I understand from the above is that each selector has its own specificity value. A CSS statement may conflict with another CSS statement that is declaring the same thing. More specific behavior always wins. To figure out which CSS statement is more specific than the other, you will have to look at the formula that calculates the specificity. This is a little more complex, but I was also assured at the beginning of the class that it's very simple once you get the hang of it. One should add a 1 if the declaration:
**- Is in an internal style element
- Is in an external style sheet
- Is in an external style sheet but has been referenced from the attribute of an HTML tag ...otherwise add a 0.**
Now to the scary sounding stuff… Think of every selector expression as a math formula. It will produce a value (the way the elements will look). Think of all the different selectors as different formulas or equations. When the browser is reading your style sheet, it looks at each selector and then puts the value (result of the formula) in a bucket with the name of that selector. At the end, the browser looks in all its buckets, finds all the buckets with that name on them, adds up all the results, and then the value with the most specificity is the one that takes effect and styles the element.
This brings me to the end of today’s lesson but ever wondered that if specificity makes your work easy to manuveur what is the use of a beginner’s progress in web development if they don’t know much about its importance ?!.
Top comments (0)