Learning CSS with Less - Overriding Rules for CSS
Learning CSS with Less - Overriding Rules for CSS
We integrated into our Technical Blog section a new project that Andrei, a great developer in our community, wanted to share with all of us. Now, the project consists of a series of courses created by Andrei with a lot of passion and dedication, giving from his knowledge gathered during years of work and sleepless nights the chance to learn, grow and become our best version in the future.
- Topics of discussion
- The style attribute
- Overriding by using !important
- Overriding through specificity
1. Topics of discussion
In this tutorial, we are going to discuss how we can override CSS. So, let's have some fun.
2. The style attribute
In the previous tutorial, we discussed a bit about the style HTML attribute. This attribute can be added to any HTML element and any and all styles declared there will usually take precedence over the styles defined in the CSS classes used on that element.
It's important for you to understand that the style attribute takes precedence over other CSS classes because there are frameworks out there that to me do the unthinkable and instead of having some CSS file associated with them, they use inline style (defined in the style attribute) which makes everything really hard to maintain and understand how it works. Inside the style attribute, you can basically have any CSS instruction that could be defined in a CSS selector inside a CSS file.
I personally try to avoid using the style attribute as much as possible, but it does have its uses. One such use would be to define a one-time style that is only going to be used on the element you're using the style attribute on. Another one would be for singular cases where you would like to override some CSS rules defined in a file without too much hassle.
Of course, the style attribute itself is not exempt from being overridden, but there is a special markup required, which we will discuss in the next section.
3. Overriding by using !important
As I have already mentioned, there is a way in which you can override the style attribute. And that is by using the !important markup on CSS instructions. Say you have the following situation:
Some text here
Now if you were to try and override the text color like this:
div#main {
color: red;
}it would not work, because the style attribute overrides the CSS instructions. However, when you change it like this:
div#main {
color: red !important;
}you'll notice that the color will be changed this time around.
The !important marker basically means that everything in the style attribute should be ignored and it forces certain properties to have certain values.
However, you need to take very good care when using this marker because you may inadvertently screw other elements over by using this marker on elements that have children. Because the change to a certain property would get propagated to the children as well. And in order to fix that, you'd have to add !important markers on the children as well. Or you need to make sure that child elements have certain CSS rules with higher specificity that ensure the values for the attributes that may be marked as !important on a parent element. In other words, it's kind of a slippery slope when using this marker without care.
Of course, when using weird frameworks that force you to use !important because reasons there really are no alternatives. However, when writing your own CSS code, try to avoid inline styles and the use of !important as much as possible.
That being said, there is a certain case when using !important is actually pretty useful. Remember the previous tutorial where you had a list with some very specific CSS for its list items? Let's review the HTML:
And now let's review the CSS:
.list-item {
a {
color: red;
}
}
.main-link {
color: black;
}If you were to use the code in this fashion, then the first item would be red instead of black. However, let's make a subtle change in the CSS instructions for .main-link:
.list-item {
a {
color: red;
}
}
.main-link {
color: black !important;
}This is a very acceptable use of !important because it doesn't impact other elements.
4. Overriding through specificity
In a tutorial from forever ago, I mentioned that CSS stands for Cascading Style Sheet and that translates into properties getting overridden based on the order of the classes in the class attribute.
In other words, if you have two CSS classes and each one has a value for the color property, then an element that uses them both in its class attribute will use the value from the second class placed in the class attribute. And yes, this statement remains true, if the two classes have the same specificity.
It's when CSS instructions are defined in places with different specificity levels that things get tricky. Well, sort of tricky.
What I am trying to say is that you can actually override stuff in CSS without using !important when you want to have different specificity levels. Let's replace the !important marker in the previous section with something different:
.list-item {
a {
color: red;
&.main-link {
color: black;
}
}
}When you compile this code into vanilla CSS, it will look something like this:
.list-item a {
color: red;
}
.list-item a.main-link {
color: black;
}As you can see, since we added a more specific CSS instruction for any and all links that have the main-link class, since the specificity is higher, it will take precedence over the other rule that stated that all elements inside a li should be colored red if they have the list-item class.
And yeah, that about covers it for this tutorial. In the next one, we are going to discuss pseudo-elements and pseudo-selectors. See you then.