lot of people struggling with CSS, from beginners to seasoned developers always have issues with selectors and advance control on there or pre defined CSS.
We can use some tips mentioned below to write and code for a better and easy to maintain CSS code for your global and private style sheets.
Viable selector
CSS is a declarative language, which means you have to assign some rules and elements in the DOM, this language works on rule precedence over the other in the order they are applied, example Inline styles overriding internal CSS.
For instance
<button class=“button-warning”>
.button-warning {
background: red;
}
button, input[type=submit] {
background: gray;
}
Despite .button-warning being defined before the button, input[type=submit] rule, it will override the latter background property.
Now the question arise Why? and how can we decide the criteria which rule will override the styles of another one?
Now first we have to understand that some selectors are considered to be more specific than others, for example an #id selector will override a .class selector.
What happens if we use a selector that is more specific than it really needs to be, example If we later want to override those styles, we need to define even more specific selector.
So, whenever you are writing your selectors, if is this the least specific selector that can do the job here.
For more specificity rules you can follow the “W3C CSS Selectors specification”